Customization

28 Dec 20163 minutes to read

Adding watermark text

It provides the short description of the expected value in dropdown and will display the text until any item is selected. You can set this text using data-ej-watermarktext attribute.

HTML

<input type="text" id="dd_grouping" data-role="ejmdropdownlist" data-ej-datasource="window.listData"
            data-ej-watermarktext="Select a Country" data-ej-fields-text="name"/>

To include datasource, add the following script.

JS

window.listData = [{ name: "Australia"},
                           { name: "Brazil" },
                           { name: "China" },
                           { name: "India"},
                           { name: "Spain" },
                           { name: "United States of America" }
        ];

The following screenshot displays the Local Data Binding:

Height and width customization

You can customize the DropDownList by using data-ej-popupwidth and data-ej-popupheight attributes.

HTML

<input type="text" id="dd_grouping" data-role="ejmdropdownlist" data-ej-datasource="window.listData"
            data-ej-watermarktext="Select a Country" data-ej-fields-text="name" data-ej-popupheight="200px" data-ej-popupwidth="200px"/>

</div>

To include datasource, add the following script.

JS

window.listData = [{ name: "Australia"},
                           { name: "Brazil" },
                           { name: "China" },
                           { name: "India"},
                           { name: "Spain" },
                           { name: "United States of America" }
        ];

The following screenshot displays the height and width customization of DropDownList.