Griglia KendoUI - come aggiungere una classe alla tabella generata

Question

Sto generando una griglia KendoUI utilizzando ajax dataSource. La tabella è generata e per impostazione predefinita non ha una classe. Per mantenere l'aspetto uniforme con il resto del sito, vorrei aggiungere una classe "interattiva" ad essa.

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

So che posso farlo utilizzando JQuery.addClass() metodo, eseguire dopo la generazione della griglia, se c'è un modo di impostazione nella configurazione griglia/configurazione?

Grazie in anticipo.

Answer 1

Immagino che non abbia altra scelta che usare addClass(). Non è possibile trovare nulla nella documentazione relativa all'impostazione di una griglia (non della colonna della griglia) htmlAttributes utilizzando la proprietà integrata in JS. L'ho provato anche senza successo. A meno che non si dichiara in questo modo (C#):

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

Ma se si ha realmente bisogno in JS, allora si dovrà fare in questo modo:

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

Answer 2

si può fare attraverso la definizione di una classe in elemento originale, hai usato, come:

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

Answer 3

il modo in cui lo faccio è aggiungerlo ai miei colonne nella mia configurazione, nella sezione attributes. A seconda di quale colonna che si desidera impostare la classe sul effettuare le seguenti operazioni:

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

In questo modo tutti gli elementi nella colonna 'Nome' (nel mio caso) hanno le loro classi istituito su l'inizializzazione della griglia. Non c'è bisogno di fare jquery extra per aggiungere classi. L'ho provato all'inizio. Facendo il modo jquery (usando addClass) ha funzionato fino a quando ho provato a ordinare le mie colonne, quindi i binding si sono interrotti (probabilmente a causa della magia che stavamo facendo nell'implementazione). Dopo averlo fatto come ho fatto sopra, i miei attacchi hanno funzionato anche dopo lo smistamento.

Answer 4

È inoltre possibile utilizzare il TableHtmlAttributes()

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