CODEWITHSUNDEEP
javascriptjqueryhtmlcsskendo-ui
overflowstack9
overflowstack9

Reputation: 345

How to display placeholder by default in kendo-ui

I implemented kendo but i want to keep the place holder by default like select planets should be displayed on default.

But the options are displaying by default as seen in the below example when i remove the options the place holder is displaying properly.

But my aim is to achieve to display the place holder by default and also increase the place holder size. Thanks in advance.

<!doctype html>
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.material.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.default.mobile.min.css" />
    <script src="//kendo.cdn.telerik.com/2016.2.607/js/jquery.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script>
        <div id="example" role="application">
            <div id="tshirt-view" class="demo-section k-content">
                <h4 style="margin-top: 2em;">Solar System</h4>
                <select id="size" placeholder="Select Planets..." style="width: 220px;" >
                    <option />Mercury
                    <option />Venus
                    <option />Earth
                    <option />Mars
                    <option />Jupiter
                    <option />Plutz
                </select>
            </div>
            <script>
                $(document).ready(function() {
                    // create ComboBox from input HTML element
                    
                    // create ComboBox from select HTML element
                    $("#size").kendoComboBox();

                    var select = $("#size").data("kendoComboBox");
                });
            </script>
        </div>
</!doctype>

Upvotes: 1

Views: 369

Answers (2)

nitzanerman
nitzanerman

Reputation: 104

try adding another default option

<option value="" disabled selected>Select Planest...</option>

Upvotes: 2

Robert
Robert

Reputation: 6967

Per the Kendo documentation for combo box:

$("#combobox").kendoComboBox({
  placeholder: "Select..."
});

Upvotes: 3

Related Questions