All Components

MVVM / Widget binding

Current view model state

{
    autoCompleteValue: ,
    comboBoxValue: ,
    dropDownListValue: ,
    datePickerValue: ,
    timePickerValue: ,
    numericTextBoxValue: ,
    sliderValue: ,
    multiSelectValue: ,
    gridSource: [
    ],
    treeviewSource: [
    ]
}
                
  • AutoComplete

  • ComboBox:

  • DropDownList:

  • DatePicker:

  • TimePicker:

  • NumericTextBox:

  • Slider:

  • TreeView

  • MultiSelect:

  • Grid

  • Splitter

    Pane 1
    Pane 2
  • TabStrip

    • First
    • Second

    First page:

    Pick a time:

    Second page:

    Time is:

View source code:

<div class="demo-section k-content wide">
            <h4>Current view model state</h4>
            <pre class="prettyprint">
{
autoCompleteValue: <span data-bind="text: displayAutoCompleteValue"></span>,
comboBoxValue: <span data-bind="text: displayComboBoxValue"></span>,
dropDownListValue: <span data-bind="text: displayDropDownListValue"></span>,
datePickerValue: <span data-bind="text: displayDatePickerValue"></span>,
timePickerValue: <span data-bind="text: displayTimePickerValue"></span>,
numericTextBoxValue: <span data-bind="text: displayNumericTextBoxValue"></span>,
sliderValue: <span data-bind="text: sliderValue"></span>,
multiSelectValue: <span data-bind="text: displayMultiSelectValue"></span>,
gridSource: [
<span data-bind="text: displayGridSource"></span>    ],
treeviewSource: [
<span data-bind="text: displayTreeviewSource"></span>    ]
}
            </pre>
</div>
<div class="demo-section k-content wide">
    <ul class="fieldlist">
        <li>
            <h4>AutoComplete</h4>
            <input data-role="autocomplete" data-text-field="name" data-bind="source: colors, value: autoCompleteValue"/>
        </li>
        <li>
            <h4>ComboBox:</h4>
            <select data-role="combobox" data-text-field="name" data-value-field="value" data-bind="source: colors, value: comboBoxValue"></select>
        </li>
        <li>
            <h4>DropDownList:</h4>
            <select data-role="dropdownlist" data-text-field="name" data-value-field="value" data-bind="source: colors, value: dropDownListValue"></select>
        </li>
        <li>
            <h4>DatePicker:</h4>
            <input data-role="datepicker" data-bind="value: datePickerValue" />
        </li>
        <li>
            <h4>TimePicker:</h4>
            <input data-role="timepicker" data-bind="value: timePickerValue" />
        </li>
        <li>
            <h4>NumericTextBox:</h4>
            <input data-role="numerictextbox" data-format="c" data-bind="value: numericTextBoxValue" />
        </li>
        <li>
            <h4>Slider:</h4>
            <input data-role="slider" data-bind="value: sliderValue" />
        </li>
        <li>
            <h4>TreeView</h4>
            <div data-role="treeview" data-drag-and-drop="true" data-bind="source: treeviewSource"></div>
        </li>
    </ul>
    <ul class="fieldlist">
        <li>
            <h4>MultiSelect:</h4>
            <select multiple="multiple" data-role="multiselect" data-text-field="name" data-value-field="value" data-bind="source: colors, value: multiSelectValue"></select>
        </li>
        <li>
            <h4>Grid</h4>
            <div data-role="grid" data-sortable="true" data-editable="true" data-columns='["Name", "Price", "UnitsInStock", {"command": "destroy"}]' data-bind="source: gridSource"></div>
        </li>
        <li>
            <h4>Splitter</h4>
            <div data-role="splitter" data-panes="[{size:'30%', collapsible:true},{size:'70%'}]">
                <div>Pane 1</div>
                <div>Pane 2</div>
            </div>
        </li>
        <li>
            <h4>TabStrip</h4>
            <div data-role="tabstrip" data-animation="false">
                <ul>
                    <li class="k-state-active">First</li>
                    <li>Second</li>
                </ul>
                <div>
                    <h4>First page:</h4>
                    Pick a time: <input data-role="timepicker" data-bind="value: timePickerValue"/>
                </div>
                <div>
                    <h4>Second page:</h4>
                    Time is: <span data-bind="text: displayTimePickerValue"></span>
                </div>
            </div>
        </li>
    </ul>
</div>
    

View model source code:

var viewModel = kendo.observable({
    autoCompleteValue: null,
    colors: [
        { name: "Red", value: "#f00" },
        { name: "Green", value: "#0f0" },
        { name: "Blue", value: "#00f" }
    ],
    displayAutoCompleteValue: function() {
        var autoCompleteValue = this.get("autoCompleteValue");
        return kendo.stringify(autoCompleteValue);
    },
    comboBoxValue: null,
    displayComboBoxValue: function() {
        var comboBoxValue = this.get("comboBoxValue");
        return kendo.stringify(comboBoxValue);
    },
    dropDownListValue: null,
    displayDropDownListValue: function() {
        var dropDownListValue = this.get("dropDownListValue");
        return kendo.stringify(dropDownListValue);
    },
    numericTextBoxValue: 10,
    displayNumericTextBoxValue: function() {
        var numericTextBoxValue = this.get("numericTextBoxValue");

        return kendo.toString(numericTextBoxValue, "c");
    },
    datePickerValue: new Date(),
    displayDatePickerValue: function() {
        var datePickerValue = this.get("datePickerValue");
        return kendo.toString(datePickerValue, "yyyy-MM-dd");
    },
    timePickerValue: new Date(),
    displayTimePickerValue: function() {
        var timePickerValue = this.get("timePickerValue");

        return kendo.toString(timePickerValue, "hh:mm:ss");
    },
    multiSelectValue: [],
    displayMultiSelectValue: function() {
        var multiSelectValue = this.get("multiSelectValue");
        return kendo.stringify(multiSelectValue);
    },
    gridSource: [
        { Name: "Chai", Price: 18.00, UnitsInStock: 39 },
        { Name: "Chang", Price: 19.00, UnitsInStock: 17 },
        { Name: "Mishi Kobe Niku", Price: 97.00, UnitsInStock: 29 }
    ],
    displayGridSource: function() {
        return stringify(this.get("gridSource"));
    },
    treeviewSource: kendo.observableHierarchy([
        { text: "Andrew", expanded: true, items: [
            { text: "Nancy" },
            { text: "Steve" }
        ] }
    ]),
    displayTreeviewSource: function() {
        return stringify(this.get("treeviewSource").toJSON());
    }
});

viewModel.autoCompleteValue = viewModel.colors[1];
viewModel.dropDownListValue = viewModel.colors[0];
viewModel.comboBoxValue = viewModel.colors[0];

kendo.bind($("table"), viewModel);
        

HTML5/JavaScript 源码

<!DOCTYPE html>
<html>
 <head> 
  <title>Widget binding</title> 
  <meta charset="utf-8"> 
  <link href="../content/shared/styles/examples-offline.css" rel="stylesheet"> 
  <link href="../../styles/kendo.common.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.rtl.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.default.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.dataviz.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.dataviz.default.min.css" rel="stylesheet"> 
  <script src="../../js/jquery.min.js"></script> 
  <script src="../../js/kendo.all.min.js"></script> 
  <script src="../content/shared/js/console.js"></script> 
  <script>
        
    </script> 
 </head> 
 <body> 
  <a class="offline-button" href="../index.html">Back</a> 
  <div id="example"> 
   <div class="demo-section k-content wide"> 
    <h4>Current view model state</h4> 
    <pre class="prettyprint">
{
    autoCompleteValue: <span data-bind="text: displayAutoCompleteValue"></span>,
    comboBoxValue: <span data-bind="text: displayComboBoxValue"></span>,
    dropDownListValue: <span data-bind="text: displayDropDownListValue"></span>,
    datePickerValue: <span data-bind="text: displayDatePickerValue"></span>,
    timePickerValue: <span data-bind="text: displayTimePickerValue"></span>,
    numericTextBoxValue: <span data-bind="text: displayNumericTextBoxValue"></span>,
    sliderValue: <span data-bind="text: sliderValue"></span>,
    multiSelectValue: <span data-bind="text: displayMultiSelectValue"></span>,
    gridSource: [
<span data-bind="text: displayGridSource"></span>    ],
    treeviewSource: [
<span data-bind="text: displayTreeviewSource"></span>    ]
}
                </pre> 
   </div> 
   <div class="demo-section k-content wide"> 
    <ul class="fieldlist"> 
     <li> <h4>AutoComplete</h4> <input data-role="autocomplete" data-text-field="name" data-bind="source: colors, value: autoCompleteValue"> </li> 
     <li> <h4>ComboBox:</h4> <select data-role="combobox" data-text-field="name" data-value-field="value" data-bind="source: colors, value: comboBoxValue"></select> </li> 
     <li> <h4>DropDownList:</h4> <select data-role="dropdownlist" data-text-field="name" data-value-field="value" data-bind="source: colors, value: dropDownListValue"></select> </li> 
     <li> <h4>DatePicker:</h4> <input data-role="datepicker" data-bind="value: datePickerValue"> </li> 
     <li> <h4>TimePicker:</h4> <input data-role="timepicker" data-bind="value: timePickerValue"> </li> 
     <li> <h4>NumericTextBox:</h4> <input data-role="numerictextbox" data-format="c" data-bind="value: numericTextBoxValue"> </li> 
     <li> <h4>Slider:</h4> <input data-role="slider" data-bind="value: sliderValue"> </li> 
     <li> <h4>TreeView</h4> 
      <div data-role="treeview" data-drag-and-drop="true" data-bind="source: treeviewSource"></div> </li> 
    </ul> 
    <ul class="fieldlist"> 
     <li> <h4>MultiSelect:</h4> <select multiple data-role="multiselect" data-text-field="name" data-value-field="value" data-bind="source: colors, value: multiSelectValue"></select> </li> 
     <li> <h4>Grid</h4> 
      <div data-role="grid" data-sortable="true" data-editable="true" data-columns="["Name", "Price", "UnitsInStock", {"command": "destroy"}]" data-bind="source: gridSource"></div> </li> 
     <li> <h4>Splitter</h4> 
      <div data-role="splitter" data-panes="[{size:'30%', collapsible:true},{size:'70%'}]"> 
       <div>
        Pane 1
       </div> 
       <div>
        Pane 2
       </div> 
      </div> </li> 
     <li> <h4>TabStrip</h4> 
      <div data-role="tabstrip" data-animation="false"> 
       <ul> 
        <li class="k-state-active">First</li> 
        <li>Second</li> 
       </ul> 
       <div> 
        <h4>First page:</h4> Pick a time: 
        <input data-role="timepicker" data-bind="value: timePickerValue"> 
       </div> 
       <div> 
        <h4>Second page:</h4> Time is: 
        <span data-bind="text: displayTimePickerValue"></span> 
       </div> 
      </div> </li> 
    </ul> 
   </div> 
   <script>
        function tab() {
            var tabs = "";

            for (var i = 0; i < stringify.level; i++) {
                tabs += "\t";
            }

            return tabs;
        }

        function stringify(items) {
            var item,
                itemString,
                levelString = "";

            for (var i = 0; i < items.length; i++) {
                item = items[i];

                if (!item.items) {
                    itemString = kendo.stringify(item);
                } else {
                    stringify.level++;
                    var subnodes = stringify(item.items);
                    stringify.level--;

                    delete item.items;

                    itemString = kendo.stringify(item);

                    itemString = itemString.substring(0, itemString.length - 1);

                    itemString += ",\"items\":[\r\n" + subnodes + tab() + "]}";
                }

                levelString += tab() + itemString;

                if (i != items.length - 1) {
                    levelString += ",";
                }

                levelString += "\r\n";
            }

            return levelString;
        }

        stringify.level = 1;

        $(document).ready(function() {
            var Node = kendo.data.Node;
            var viewModel = kendo.observable({
                autoCompleteValue: null,
                colors: [
                    { name: "Red", value: "#f00" },
                    { name: "Green", value: "#0f0" },
                    { name: "Blue", value: "#00f" }
                ],
                displayAutoCompleteValue: function() {
                    var autoCompleteValue = this.get("autoCompleteValue");
                    return kendo.stringify(autoCompleteValue);
                },
                comboBoxValue: null,
                displayComboBoxValue: function() {
                    var comboBoxValue = this.get("comboBoxValue");
                    return kendo.stringify(comboBoxValue);
                },
                dropDownListValue: null,
                displayDropDownListValue: function() {
                    var dropDownListValue = this.get("dropDownListValue");
                    return kendo.stringify(dropDownListValue);
                },
                numericTextBoxValue: 10,
                displayNumericTextBoxValue: function() {
                    var numericTextBoxValue = this.get("numericTextBoxValue");

                    return kendo.toString(numericTextBoxValue, "c");
                },
                datePickerValue: new Date(),
                displayDatePickerValue: function() {
                    var datePickerValue = this.get("datePickerValue");
                    return kendo.toString(datePickerValue, "yyyy-MM-dd");
                },
                timePickerValue: new Date(),
                displayTimePickerValue: function() {
                    var timePickerValue = this.get("timePickerValue");

                    return kendo.toString(timePickerValue, "hh:mm:ss");
                },
                multiSelectValue: [],
                displayMultiSelectValue: function() {
                    var multiSelectValue = this.get("multiSelectValue");
                    return kendo.stringify(multiSelectValue);
                },
                gridSource: [
                    { Name: "Socks", Price: 18.00, UnitsInStock: 39 },
                    { Name: "Gloves", Price: 19.00, UnitsInStock: 17 },
                    { Name: "Shoes", Price: 97.00, UnitsInStock: 29 }
                ],
                displayGridSource: function() {
                    return stringify(this.get("gridSource").toJSON());
                },
                sliderValue: 5,
                treeviewSource: kendo.observableHierarchy([
                    { text: "Andrew", expanded: true, items: [
                        { text: "Nancy" },
                        { text: "Steve" }
                    ] }
                ]),
                displayTreeviewSource: function() {
                    return stringify(this.get("treeviewSource").toJSON());
                }
            });

            viewModel.autoCompleteValue = viewModel.colors[1];
            viewModel.dropDownListValue = viewModel.colors[0];
            viewModel.comboBoxValue = viewModel.colors[0];

            kendo.bind($("div.demo-section"), viewModel);
        });
    </script> 
   <div class="box wide"> 
    <h4>View source code:</h4> 
    <pre class="prettyprint">
<div class="demo-section k-content wide">
            <h4>Current view model state</h4>
            <pre class="prettyprint">
{
autoCompleteValue: <span data-bind="text: displayAutoCompleteValue"></span>,
comboBoxValue: <span data-bind="text: displayComboBoxValue"></span>,
dropDownListValue: <span data-bind="text: displayDropDownListValue"></span>,
datePickerValue: <span data-bind="text: displayDatePickerValue"></span>,
timePickerValue: <span data-bind="text: displayTimePickerValue"></span>,
numericTextBoxValue: <span data-bind="text: displayNumericTextBoxValue"></span>,
sliderValue: <span data-bind="text: sliderValue"></span>,
multiSelectValue: <span data-bind="text: displayMultiSelectValue"></span>,
gridSource: [
<span data-bind="text: displayGridSource"></span>    ],
treeviewSource: [
<span data-bind="text: displayTreeviewSource"></span>    ]
}
            </pre>
</div>
<div class="demo-section k-content wide">
    <ul class="fieldlist">
        <li>
            <h4>AutoComplete</h4>
            <input data-role="autocomplete" data-text-field="name" data-bind="source: colors, value: autoCompleteValue"/>
        </li>
        <li>
            <h4>ComboBox:</h4>
            <select data-role="combobox" data-text-field="name" data-value-field="value" data-bind="source: colors, value: comboBoxValue"></select>
        </li>
        <li>
            <h4>DropDownList:</h4>
            <select data-role="dropdownlist" data-text-field="name" data-value-field="value" data-bind="source: colors, value: dropDownListValue"></select>
        </li>
        <li>
            <h4>DatePicker:</h4>
            <input data-role="datepicker" data-bind="value: datePickerValue" />
        </li>
        <li>
            <h4>TimePicker:</h4>
            <input data-role="timepicker" data-bind="value: timePickerValue" />
        </li>
        <li>
            <h4>NumericTextBox:</h4>
            <input data-role="numerictextbox" data-format="c" data-bind="value: numericTextBoxValue" />
        </li>
        <li>
            <h4>Slider:</h4>
            <input data-role="slider" data-bind="value: sliderValue" />
        </li>
        <li>
            <h4>TreeView</h4>
            <div data-role="treeview" data-drag-and-drop="true" data-bind="source: treeviewSource"></div>
        </li>
    </ul>
    <ul class="fieldlist">
        <li>
            <h4>MultiSelect:</h4>
            <select multiple="multiple" data-role="multiselect" data-text-field="name" data-value-field="value" data-bind="source: colors, value: multiSelectValue"></select>
        </li>
        <li>
            <h4>Grid</h4>
            <div data-role="grid" data-sortable="true" data-editable="true" data-columns='["Name", "Price", "UnitsInStock", {"command": "destroy"}]' data-bind="source: gridSource"></div>
        </li>
        <li>
            <h4>Splitter</h4>
            <div data-role="splitter" data-panes="[{size:'30%', collapsible:true},{size:'70%'}]">
                <div>Pane 1</div>
                <div>Pane 2</div>
            </div>
        </li>
        <li>
            <h4>TabStrip</h4>
            <div data-role="tabstrip" data-animation="false">
                <ul>
                    <li class="k-state-active">First</li>
                    <li>Second</li>
                </ul>
                <div>
                    <h4>First page:</h4>
                    Pick a time: <input data-role="timepicker" data-bind="value: timePickerValue"/>
                </div>
                <div>
                    <h4>Second page:</h4>
                    Time is: <span data-bind="text: displayTimePickerValue"></span>
                </div>
            </div>
        </li>
    </ul>
</div>
    </pre> 
    <h4 style="padding-top: 2em;">View model source code:</h4> 
    <pre class="prettyprint">
var viewModel = kendo.observable({
    autoCompleteValue: null,
    colors: [
        { name: "Red", value: "#f00" },
        { name: "Green", value: "#0f0" },
        { name: "Blue", value: "#00f" }
    ],
    displayAutoCompleteValue: function() {
        var autoCompleteValue = this.get("autoCompleteValue");
        return kendo.stringify(autoCompleteValue);
    },
    comboBoxValue: null,
    displayComboBoxValue: function() {
        var comboBoxValue = this.get("comboBoxValue");
        return kendo.stringify(comboBoxValue);
    },
    dropDownListValue: null,
    displayDropDownListValue: function() {
        var dropDownListValue = this.get("dropDownListValue");
        return kendo.stringify(dropDownListValue);
    },
    numericTextBoxValue: 10,
    displayNumericTextBoxValue: function() {
        var numericTextBoxValue = this.get("numericTextBoxValue");

        return kendo.toString(numericTextBoxValue, "c");
    },
    datePickerValue: new Date(),
    displayDatePickerValue: function() {
        var datePickerValue = this.get("datePickerValue");
        return kendo.toString(datePickerValue, "yyyy-MM-dd");
    },
    timePickerValue: new Date(),
    displayTimePickerValue: function() {
        var timePickerValue = this.get("timePickerValue");

        return kendo.toString(timePickerValue, "hh:mm:ss");
    },
    multiSelectValue: [],
    displayMultiSelectValue: function() {
        var multiSelectValue = this.get("multiSelectValue");
        return kendo.stringify(multiSelectValue);
    },
    gridSource: [
        { Name: "Chai", Price: 18.00, UnitsInStock: 39 },
        { Name: "Chang", Price: 19.00, UnitsInStock: 17 },
        { Name: "Mishi Kobe Niku", Price: 97.00, UnitsInStock: 29 }
    ],
    displayGridSource: function() {
        return stringify(this.get("gridSource"));
    },
    treeviewSource: kendo.observableHierarchy([
        { text: "Andrew", expanded: true, items: [
            { text: "Nancy" },
            { text: "Steve" }
        ] }
    ]),
    displayTreeviewSource: function() {
        return stringify(this.get("treeviewSource").toJSON());
    }
});

viewModel.autoCompleteValue = viewModel.colors[1];
viewModel.dropDownListValue = viewModel.colors[0];
viewModel.comboBoxValue = viewModel.colors[0];

kendo.bind($("table"), viewModel);
        </pre> 
   </div> 
   <style>      
        .demo-section > div {
            float: left;
            margin-bottom: 2em;
        }
        .fieldlist {
            float: left;
            margin: 0 3em 2em 0;
            padding: 0;
            max-width: 50%;
        }

        .fieldlist li {
            list-style: none;
            padding-bottom: 1.5em;
            text-align: left;
        }

        .prettyprint {
            background-color: #fff;
            border: 1px solid #ccc;
            overflow: auto;
            padding: 5px;
        }
    </style> 
  </div>   
 </body>
</html>