Tuesday, February 18, 2014

Combobox using kando UI javascript

Posted by  on  
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="WebApplication1.WebForm2" %>

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <link href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.common.min.css" rel="stylesheet" />

    <link href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.default.min.css" rel="stylesheet" />

    <script src="http://cdn.kendostatic.com/2013.3.1324/js/jquery.min.js"></script>

    <script src="http://cdn.kendostatic.com/2013.3.1324/js/kendo.all.min.js"></script>

</head>

<body>

    

        <div id="example" class="k-content" role="application">

        <div id="tshirt-view" class="demo-section">

            <h2>Customize your Kendo T-shirt</h2>

            <img id="tshirt" src="../../content/web/combobox/tShirt.png" />

            <div id="options">

            <h3>T-shirt Fabric</h3>

            <input id="fabric" placeholder="Select fabric..." />



            <h3>T-shirt Size</h3>

            <select id="size" placeholder="Select size...">

                <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" id="get">Customize</button>

            </div>

        </div>

        <style scoped>

            .demo-section {

                width: 460px;

                height: 340px;

                padding: 30px;

            }

            .demo-section h2 {

                text-transform: uppercase;

                font-size: 1.2em;

                margin-bottom: 30px;

            }

            #tshirt {

                float: left;

                margin: 0 40px 30px 0;

            }

            #options {

                padding: 20px 0 30px 30px;

            }

            #options h3 {

                font-size: 1em;

                font-weight: bold;

                margin: 25px 0 8px 0;

            }

            #get {

                margin-top: 25px;

            }



            .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>
If you are searching life partner. your searching end with kpmarriage.com. now kpmarriage.com offer free matrimonial website which offer free message, free chat, free view contact information. so register here : kpmarriage.com- Free matrimonial website

0 comments:

Post a Comment