or
#hmenu { float:right; margin-top: 38px; text-align: right; margin-right: 20px;}<div id="hmenu"> <ul id="k-menu" class="k-content" style="float:right; margin-top:38px; margin-right:20px"> <li><a href="index.html">Home</a></li> <li>Products <ul> <li><a href="products.html">Products</a><div id="grid" data-role="grid" data-sortable="true" data-pageable="true" data-editable= "inline" data-bind="source: gridSource" data-row-template="row-template"></div> <script id="row-template" type="text/x-kendo-template"> <tr> <td> <input class='k-textbox' data-bind="value: Name, source: gridSource" width: '150px'/> </td> <td> <input class='k-textbox' data-bind="value: Price, source: gridSource" width: '150px'/> </td> <td> <input class='k-textbox' data-bind="value: UnitsInStock, source: gridSource" width: '150px'/> </td> </tr> </script> <script> $("#grid").kendoGrid({ dataSource: { schema: { model: { fields: { Name: { validation: { required: true} }, Price: { validation: { required: true} }, UnitsInStock: { validation: { required: true } } } } } }, columns: [ { field: "Name", title: "Name", width: "150px" }, { field: "Price", title: "Price", width: "150px" }, { field: "UnitsInStock", title: "Units In Stock", width: "150px" }, ], }); var viewModel = kendo.observable({ gridSource: [ { Name: "1Chai", Price: 18.00, UnitsInStock: 39 }, { Name: "2Chai", Price: 18.00, UnitsInStock: 39 }, { Name: "3Chai", Price: 18.00, UnitsInStock: 39 }, { Name: "4Chai", Price: 18.00, UnitsInStock: 39 }, { Name: "5Chai", Price: 18.00, UnitsInStock: 39 }, ], displayGridSource: function() { var gridSource1 = this.get("gridSource"); return $.map(gridSource1, function(product) { return "\t" + kendo.stringify(product); }).join(",\r\n"); } }); kendo.bind($("table"), viewModel); </script>
Scenario: using Kendo MVVM data-binding and listview template to create a form.
What works: I can reproduce the example on http://demos.kendoui.com/web/mvvm/source.html that displays data in a table.
- I can display data in a table from a page method using this template script
<tr><td data-bind="text: Message"></td><td data-bind="text: CurrentState"></td><td data-bind="text: Subject"></td></tr><tr><td data-bind="text: Message"></td></tr><tr><td data-bind="text: CurrentState"></td></tr><tr><td data-bind="text: Subject"></td></tr>