Arrow Position

3 Nov 20162 minutes to read

To provide a good look and feel for the Split Button, position of arrow in the Split Button is important. By using the ArrowPosition property, you can easily customize the position of arrow inside Split Button without using any complex CSS. ArrowPosition property is applicable for both Split Button and Dropdown Button. This property represents the position of arrow with menu content.

Left Support for arrow in left.
Right Support for arrow in right. 
Top Support for arrow in top. 
Bottom Support for arrow in bottom.

The following steps explain the details on rendering the Split Button with above mentioned arrow position options.

In an ASPX page, define the Split Button control and configure the ArrowPosition property as required.  

  • HTML
  • <ej:SplitButton ID="spltbutton11" runat="server" Text="login" Size="Large" ShowRoundedCorner="true" ContentType="ImageOnly" ArrowPosition="Left" PrefixIcon="e-icon e-login">
    
        <Items>
    
            <ej:SplitItem Text="User"></ej:SplitItem>
    
            <ej:SplitItem Text="Guest"></ej:SplitItem>
    
            <ej:SplitItem Text="Admin"></ej:SplitItem>
    
        </Items>
    
    </ej:SplitButton>
    
    <ej:SplitButton ID="spltbutton21" runat="server" Text="login" Size="Mini" ShowRoundedCorner="true" ContentType="TextOnly" ArrowPosition="Top">
    
        <Items>
    
            <ej:SplitItem Text="User"></ej:SplitItem>
    
            <ej:SplitItem Text="Guest"></ej:SplitItem>
    
            <ej:SplitItem Text="Admin"></ej:SplitItem>
    
        </Items>
    
    </ej:SplitButton>
    
    <ej:SplitButton ID="spltbutton31" runat="server" Text="login" Size="Small" ShowRoundedCorner="true" ContentType="TextOnly" ArrowPosition="Bottom">
    
        <Items>
    
            <ej:SplitItem Text="User"></ej:SplitItem>
    
            <ej:SplitItem Text="Guest"></ej:SplitItem>
    
            <ej:SplitItem Text="Admin"></ej:SplitItem>
    
        </Items>
    
    </ej:SplitButton>
    
    <ej:SplitButton ID="spltbutton41" runat="server" Text="login" Size="Medium" ShowRoundedCorner="true" ContentType="TextOnly" ArrowPosition="Right">
    
        <Items>
    
            <ej:SplitItem Text="User"></ej:SplitItem>
    
            <ej:SplitItem Text="Guest"></ej:SplitItem>
    
            <ej:SplitItem Text="Admin"></ej:SplitItem>
    
        </Items>
    
    </ej:SplitButton>

    The following screenshot displays the output of the above code example.