kendo combobox html sample code demo code example

Example: kendo ui combobox

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="styles/kendo.common.min.css" />
    <link rel="stylesheet" href="styles/kendo.default.min.css" />
    <link rel="stylesheet" href="styles/kendo.default.mobile.min.css" />

    <script src="js/jquery.min.js"></script>
    
    
    <script src="js/kendo.all.min.js"></script>
    

</head>
<body>

        <div id="example" role="application">
		    <div id="tshirt-view" class="demo-section k-content">
            <h4>Customize your Kendo T-shirt</h4>
            <img id="tshirt" alt="T-shirt image" src="../content/web/combobox/tShirt.png" />
            <h4><label for="fabric">T-shirt Fabric</label></h4>
                  <input id="fabric" placeholder="Select fabric..." style="width: 100%;" />
     
            <h4 style="margin-top: 2em;"><label for="size">T-shirt Size</label></h4>
            <select id="size" placeholder="Select size..." style="width: 100%;" >
              <option>X-Small</option>
              <option>Small</option>
              <option>Medium</option>
              <option>Large</option>
              <option>X-Large</option>
              <option>2X-Large</option>
            </select>
     
            <button class="k-button k-primary" id="get" style="margin-top: 2em; float: right;">Customize</button>
        </div>
        <style>
           #tshirt {
               display: block;
               margin: 2em auto;
           }
           .k-readonly
           {
               color: gray;
           }
        </style>

            <script>
                $(document).ready(function() {
                    // create ComboBox from input HTML element
                    $("#fabric").kendoComboBox({
                        dataTextField: "text",
                        dataValueField: "value",
                        dataSource: [
                            { text: "Cotton", value: "1" },
                            { text: "Polyester", value: "2" },
                            { text: "Cotton/Polyester", value: "3" },
                            { text: "Rib Knit", value: "4" }
                        ],
                        filter: "contains",
                        suggest: true,
                        index: 3
                    });

                    // create ComboBox from select HTML element
                    $("#size").kendoComboBox();

                    var fabric = $("#fabric").data("kendoComboBox");
					var select = $("#size").data("kendoComboBox");


					$("#get").click(function() {
					    alert('Thank you! Your Choice is:\n\nFabric ID: ' + fabric.value() + ' and Size: ' + select.value());
                    });
                });
            </script>
        </div>


</body>
</html>

Tags:

Misc Example

Recent Posts