or
<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>I am trying to consume a json data source that returns @ and # characters in the fieldnames. Apparently these characters are causing the kendoGrid template creation to fail. Any workarounds (no, I can't change the data source)?
See below:
"Results": { "@ViewName": "WFP_MacroDemandForecast", "RowSet": { "@ColDims": "Workforce Planning Value", "Rows": [ { "WorkforcePlanningMeasure": { "@Name": "HC Demand", "@DimName": "Workforce Planning Measure", "@ID": "Headcount Demand", "#text": "HC Demand" }, "Value": "0", "ChangeRate": "0", "BaseYear": "0", "ForecastDriver": "0", "_5YearGoal": "0", "Year1": "0", "Year2": "0", "Year3": "0", "Year4": "0", "Year5": "0" },