Verwenden von benutzerdefinierten CSS in Kendo UI

Question

Ich verwende Kendo UI HTML-Framework für meine Webanwendung.

Ich benutze Kendo hauptsächlich für die Out-of-the-Box-Unterstützung, die es für MVVM bietet. Allerdings brauche ich die Flexibilität von Kendo MVVM, ohne die Kendo Widgets verwenden zu müssen. dh, ich will die beobachtbaren Objekte binden, indem Kendo angeboten direkt an die HTML-Elemente wie div/Tabellen usw.

Beispiel: Wenn ich ein Datasource-Objekt in der kendo.observable Ansicht Modellobjekt haben viewModel.dtSource I binden kann den Code unten an einem Kendo Gitter mit

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

jedoch habe ich die Objekttabelle viewModel.dtSource zu einem HTML Kendo beobachtbaren wollen direkt anstelle von Kendo Grid.

Ist das möglich?

Answer 1

Ja. Das ist möglich. Kendo UI ist nach Knockout JS modelliert, obwohl es nicht so mächtig ist. Sie werden ein Beispiel dafür finden, wie Kendo MVVM ohne Kendo Widgets hier http://docs.telerik.com/kendo-ui/framework/mvvm/overview

Answer 2

Ich denke, mit Kendo Grid ist fantastisch, wenn Sie es richtig einrichten! Es kann schwierig sein, reguläres HTML einzurichten, um Datensätze in Form von dynamischen Listen zu verarbeiten. Ich denke, Sie könnten Kendo's Template System verwenden und für Schleifen dafür einrichten. Die dtSource.schema ist optional, aber es ist hilfreich, wenn Sie Ihre Daten organisieren oder mehr damit interagieren müssen.

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>