KendoUI Grid - wie man eine Klasse zur generierten Tabelle hinzufügt

Question

Ich erstelle ein KendoUI Grid mit ajax dataSource. Die Tabelle wird generiert und hat standardmäßig keine Klasse. Damit es mit dem Rest der Seite einheitlich aussieht, möchte ich eine Klasse "interaktiv" hinzufügen.

$("#pending_documents").kendoGrid({ 
    dataSource: { 
     transport: { 
      read: "/get-data?type=1" 
     }, 
     schema: { 
      data: "data", 
      total: "total" 
     }, 
     pageSize: 2, 
     serverPaging: true, 
     serverFiltering: true, 
     serverSorting: true, 
     reorderable: true 
    }, 
    height: 500, 
    filterable: { 
     extra: false 
/* 
, ui: "datetimepicker" // use Kendo UI DateTimePicker 
*/ 
    }, 
    sortable: true, 
    pageable: { 
     pageSize: 2  }, 
    columns: [...] 
}); 
    }); 

Ich weiß, dass ich dies mit JQuery.addClass() Methode zu tun, lief, nachdem das Gitter erzeugt wird, aber wenn es eine Möglichkeit, es im Raster Setup/Konfiguration der Einstellung?

Vielen Dank im Voraus.

Answer 1

Ich denke, Sie haben keine andere Wahl als addClass() zu verwenden. In der Dokumentation zum Festlegen der Rasterspalte eines Gitters (htmlAttributes) mithilfe der eingebauten Eigenschaft in JS kann nichts gefunden werden. Ich habe es auch ohne Erfolg versucht. Es sei denn, Sie es wie folgt (C#) erklärt:

@(Html.Kendo().TabStrip() 
    .Name("TabStrip") 
    .HtmlAttributes(new { @class = "newclass"}) 
) 

Aber wenn Sie es in JS wirklich, dann werden Sie es wie folgt tun:

$("#pending_documents").kendoGrid({ 
dataSource: { 
    //code 
    } 
}).addClass("newclass"); 

Answer 2

Sie können es durch die Definition eine Klasse in Original Element, verwendet Sie, wie:

<div id="pending_documents" class="your-class-name"> </div> 

Answer 3

So wie ich es tun, ist es, in der attributes Abschnitt meiner Spalten in meiner Konfiguration hinzuzufügen. Je nachdem, welche Spalte möchten Sie die Klasse setzen auf Folgendes tun:

columns: [{ field: 'Name', title: 'Company Name', width: '250px',attributes: { 
        "class": "class1 class2" 
       }}, 
      . 
      . 
      . 
      . 
      . 
      . 
      .] 

Auf diese Weise alle Elemente in der Spalte ‚Name‘ (in meinem Fall) haben ihre Klassen bei der Initialisierung des Gitters eingerichtet. Es ist nicht nötig extra jquery zu machen um Klassen hinzuzufügen. Das habe ich am Anfang versucht. Die jQuery-Methode (mit addClass) funktionierte, bis ich versuchte, meine Spalten zu sortieren, dann brachen die Bindungen (wahrscheinlich wegen der Magie, die wir in der Implementierung machten). Nachdem ich es so gemacht habe, wie ich es oben gemacht habe, funktionierten meine Bindungen auch nach dem Sortieren.

Answer 4

Sie auch die TableHtmlAttributes() können

@(Html.Kendo().Grid<Object>() 
     .Name("dataGrid").TableHtmlAttributes(new { @class = "interactive" })