New to Kendo UI for jQuery? Download free 30-day trial

Floating Label

A floating label is a placeholder text for form or input fields, which floats above that field and remains visible once the user starts interacting with that field.

To implement a floating label in the Kendo UI for jQuery DropDownTree, define it either as a string or from a function.

The following example demonstrates how to set the floating label as a string:

    <input id="dropdowntree" /> 
    <script>
        $(document).ready(function(){
            $("#dropdowntree").kendoDropDownTree({
                dataSource: [
                    {
                        text: "Bedroom Furniture",
                        items: [
                            { text: "Beds" },
                            { text: "Wardrobes" }
                        ]
                    },
                    { text: "Other..." },               
                ],
                label: {
                    content: "Select Category...",
                    floating: true
                }
            });
        });
    </script>

The following example demonstrates how to set the floating label from a function:

    <input id="dropdowntree" /> 
    <script>
        $(document).ready(function(){
            $("#dropdowntree").kendoDropDownTree({
                dataSource: [
                    {
                        text: "Bedroom Furniture",
                        items: [
                            { text: "Beds" },
                            { text: "Wardrobes" }
                        ]
                    },
                    { text: "Other..." },               
                ],
                label: {
                    content: function(){
                        return "Select Category...";
                    },
                    floating: true
                }
            });
        });
    </script>

See Also

In this article