Использование пользовательского css в пользовательском интерфейсе Kendo

Question

Я использую Kendo UI HTML-рамки для моего веб-приложения.

Я использую Kendo в основном для поддержки, которую он предлагает для MVVM. Однако мне нужна гибкость Kendo MVVM без использования виджетов Kendo. то есть, я хочу, чтобы связать наблюдаемые объекты, предлагаемые Кендо непосредственно в HTML-элементов, таких как DIV/таблиц и т.д.

Пример: Если у меня есть объект источника данных в kendo.observable вид модели объекта viewModel.dtSource I может связываться с кендо сеткой, используя код ниже

$("#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" 
      }], 
     }); 

Однако я хочу кендо наблюдаемого объекта viewModel.dtSource в HTML-таблицу непосредственно вместо того, чтобы использовать кендо Grid.

Возможно ли это?

Answer 1

Да. Это возможно. Пользовательский интерфейс Kendo моделируется после Knockout JS, хотя он не такой мощный. Вы можете найти пример того, как Kendo MVVM без использования видений kendo здесь http://docs.telerik.com/kendo-ui/framework/mvvm/overview

Answer 2

Я думаю, что использование 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>