在Kendo UI中使用自定義CSS

我正在使用Kendo UI我的Web應用程序的HTML框架。在Kendo UI中使用自定義CSS

我使用Kendo主要用於爲MVVM提供的開箱即用支持。但是我需要Kendo MVVM的靈活性，而不必使用Kendo Widgets。即，我要通過劍道提供的觀察對象結合直接將HTML元素如DIV /表等

示例：如果我在kendo.observable視圖模型對象viewModel.dtSource我DataSource對象可以結合使用的代碼一個劍術網格下面

$("#grid").kendoGrid({ 
      dataSource: viewModel.dtSource, 
      height: 550, 
      columns: [{ 
       field: "firstname", 
       title: "First Name" 
      }, { 
       field: "address", 
       title: "Address" 
      }, { 
       field: "contact", 
       title: "Contact" 
      }, { 
       field: "gender", 
       title: "Gender" 
      }], 
     });

但是我想要的劍道observable對象viewModel.dtSource到一個HTML表，而不是直接使用劍道電網。

這可能嗎？

來源

2016-03-31 this-Me

是的。這個有可能。 Kendo UI是在Knockout JS之後建模的，儘管它不如功能強大。你會發現如何在不使用劍道部件的情況下如何使用劍道部件的例子http://docs.telerik.com/kendo-ui/framework/mvvm/overview

來源

2016-03-31 05:34:10 Tamayi

我認爲如果你將它設置正確，我會使用Kendo Grid！設置常規HTML來處理動態列表形式的數據集可能很困難。我想你可以使用Kendo's Template系統併爲此設置循環。

dtSource.schema是可選的，但它是有用的，如果你需要組織你的數據，或與它進行更多的交互。

var viewModel = kendo.observable({ 
 
    dtSource: new kendo.data.DataSource({ 
 
     schema: { 
 
      model: { 
 
       fields: { 
 
        firstname: { type: "string" }, 
 
        address: { type: "string" }, 
 
        contact: { type: "string" }, 
 
        gender: { type: "string" } 
 
       } 
 
      } 
 
     } 
 
    }) 
 
}); 
 
kendo.bind("body", viewModel); 
 
viewModel.dtSource.add({ 
 
    firstname: "John", 
 
    address: "123 Main St", 
 
    contact: "555-1212", 
 
    gender: "Male" 
 
});

<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.common.min.css" /> 
 
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.blueopal.min.css" /> 
 
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<script src="//kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script> 
 

 
<div data-role="grid" 
 
    data-height="550" 
 
    data-bind="source: dtSource" 
 
    data-sortable="true" 
 
    data-columns="[ 
 
     { field: 'firstname', title: 'First Name' }, 
 
     { field: 'address', title: 'Address' }, 
 
     { field: 'contact', title: 'Contact' }, 
 
     { field: 'gender', title: 'Gender' } 
 
    ]"></div>

來源

2016-07-08 19:36:37

在Kendo UI中使用自定義CSS

回答

相關問題