Getting Started

11 Jan 20172 minutes to read

This section explains breifly about how to create a SplitButton in your applcation with JSP.The usage of SplitButton control is described in the following sections.

Create a SplitButton in JSP Platform

To create a Essential JSP component, you should have the general knowledge about the information regarding integrating Syncfusion widget’s provided in this page.

Create the JSP file and add the below given code to render SplitButton control

  • HTML
  • <div class="cols-sample-area">
            <div class="control">
            <table>
    
            <td >
            <ej:splitButton id="large text="Login contentType="text">
            <ej:splitButton-splitButtonItems>
            <ej:splitButton-splitButtonItem text="User"></ej:splitButton-splitButtonItem>
            <ej:splitButton-splitButtonItem text="Guest"></ej:splitButton-splitButtonItem>
            <ej:splitButton-splitButtonItem text="Admin"></ej:splitButton-splitButtonItem>
            </ej:splitButton-splitButtonItems>
            </ej:splitButton></td>
                    
            </table>
            </div>
            </div>

    The above code will render the following output in the display.

    ##Configuring the SplitButton
    This section encompasses the details on how to configure the SplitButton component with its API properties like showRoundedCorner, width, height, prefixIcon.

  • HTML
  • <div class="cols-sample-area">
            <div class="control">
            <table>
    
            <td >
            <ej:splitButton id="large"
            showRoundedCorner="true" size="large" text="Login"
            contentType="textandimage" prefixIcon="e-icon e-login">
            <ej:splitButton-splitButtonItems>
            <ej:splitButton-splitButtonItem text="User"></ej:splitButton-splitButtonItem>
            <ej:splitButton-splitButtonItem text="Guest"></ej:splitButton-splitButtonItem>
            <ej:splitButton-splitButtonItem text="Admin"></ej:splitButton-splitButtonItem>
            </ej:splitButton-splitButtonItems>
            </ej:splitButton></td>
                    
            </table>
            </div>
            </div>

    The above code will render the following output in the display screen.