KendoUI 基础：Grid 绑定template展示

Grid 绑定template展示

 <div id="TodayEditorGrid" style="margin:0 10px"></div>

 <script id="trTemplate2" type="text/x-kendo-template">
 <tr>
 <td style=" margin: 0; padding: 1px 0;">
 <p class="fontTitle1">#: BusinessForm #<p>
 </td>
 <td style=" margin: 0; padding: 1px 0;">
 <p class="fontTitle21">#: SKU #</p>
 <p class="fontTitle22">#: ProductCategory #</p>
 </td>
 </tr>
 </script>

 <script>

 var dataToday = new kendo.data.DataSource({
 transport: {
 read: {
 dataType: "json",
 url: url,
 },
 parameterMap: function (options, operation) {

 return { pageIndex: options.page, pageCount: options.pageSize };
 }
 },
 serverPaging: true,
 pageSize: ,
 schema: {
 total: function (d) {
 return d.total;
 },
 data: function (d) {
 return d.rows;
 }
 }
 });

 var page = , pageCount = ;
 $(document).ready(function () {

 $("#TodayEditorGrid").kendoGrid({
 dataSource: dataToday,
 editable: false,
 height: ,
 resizable: true,
 selectable: "single row",
 rowTemplate: kendo.template($("#trTemplate2").html()),
 columns: [
 { title: " ", width: '20%' },
 { headerTemplate: '<p class="fontTitle21">SKU</p><p class="fontTitle22">templateType</p>', width: '80%' },
 ],
 pageable: {
 pageSize: ,
 info: false,
 refresh: true, //启用刷新按钮
 }
 });

 });

 </script>

效果展示图：