Come aggiungere il numero di riga alla griglia di kendo ui?

Question

Ho una griglia di kendo nella mia pagina che ha alcune colonne. Ora voglio aggiungere una colonna che mostri il numero di riga. Come faccio questo? Grazie.

Answer 1

inizializzare una variabile e mostrarlo in colonna come template: "#= ++record #"

Working Demo

Qui è il codice:

var record = 0; 

$("#grid").kendoGrid({ 
    dataSource: { 
    data: [{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" }, { foo: "foo" }, { foo : "foo1" }], 
    pageSize: 10 
    }, 
    sortable: true, 
    columns: [ { 
    title: " ", 
    template: "#= ++record #", 
    width: 30 
    }, { field: "foo" }], 
    pageable: true, 
    dataBinding: function() { 
    record = (this.dataSource.page() -1) * this.dataSource.pageSize(); 
    } 
}); 

Answer 2

Per asp.net mvc involucro si dovrebbe usare qualcosa di simile:

@{ 
    var counter = 1; 
} 

@(Html.Kendo().Grid<Types>() 
    .Name("grid") 
    .Columns(columns => 
    {   
     // Define a template column with row counter 
     columns.Template(@<text>@counter++</text>);  

     // Define a columns from your data set and set a column setting 
     columns.Bound(type => type.id);  

     columns.Bound(type=> type.name).Title("Name");  
     // add more columns here   
    }) 
) 

Answer 3

Il modello di YD1m non ha funzionato per me ed è la variabile come a string. Così ho dovuto implementare in questo modo:

columns.Template(@<text>@((long)counter++)</text>) 

Answer 4

Per rasoio è anche bisogno di mostrare in realtà il numero anche: (non thingies punto abbastanza di commentare)

sopra la griglia:

@{int counter = 1;} 

definizioni di colonna interna:

columns.Template(@<text> 
     <span>@counter @{ counter++; }</span> 
     </text>).Title("#"); 

Answer 5

non v'è alcuna necessità di definire qualsiasi variabile, è possibile ottenere aiuto dall'evento databound:

$("#grid").kendoGrid({ 
    sortable: true, 
    dataSource: [{ 
     name: "Jane Doe", 
     age: 30 
    }, { 
     name: "John Doe", 
     age: 33 
    }], 
    columns: [{ 
     field: "name" 
    }, { 
     field: "age" 
    }, { 
     field: "rowNumber", 
     title: "Row number", 
     template: "<span class='row-number'></span>" 
    }], 
    dataBound: function() { 
     var rows = this.items(); 
     $(rows).each(function() { 
      var index = $(this).index() + 1 
      + ($("#grid").data("kendoGrid").dataSource.pageSize() * ($("#grid").data("kendoGrid").dataSource.page() - 1));; 
      var rowLabel = $(this).find(".row-number"); 
      $(rowLabel).html(index); 
     }); 
    } 
}); 

Answer 6

Basato sul grande risposta di Ehsan Mirsaeedi, mi si avvicinò con questa versione, che assegna gli indici a partire da 0 invece di numeri di riga a partire da 1, salta intestazioni di gruppo se la griglia è raggruppato e maniglie il caso in cui la griglia non è paginata.

Avevo bisogno di questi indici per aggiungere un modello con un input nascosto a ciascuna colonna, in modo da poter quindi inviare i valori della griglia insieme all'intero modulo.

Penso che sia correlato abbastanza e vale la pena aggiungere alla discussione ...

Codice:

var theGrid = $("#grid").data("kendoGrid"); 
var rows = this.items().filter(function (index, item) { 
    return $(item).hasClass("k-grouping-row") == false; 
}); 

$(rows).each(function() { 
    var index = $(this).index(); 

    //prevent group header rows from incrementing index 
    if (theGrid.dataSource.options.group != null && theGrid.dataSource.options.group.length > 0) 
     index -= $(this).prevAll("#grid tr.k-grouping-row").length; 

    //adjust indices for current page 
    if (theGrid.options.pageable == true) 
     index += theGrid.dataSource.pageSize() * (theGrid.dataSource.page() - 1); 

    //add the value to the grid's data object 
    theGrid.dataItem(this).rowNumber = index; 

    //and update the grid's HTML 
    var rowLabel = $(this).find(".row-number"); 
    $(rowLabel).html(index); 
}); 

Risultato:

Answer 7

Se è necessario, il numero di riga nella griglia modificabile

$(document).ready(function(){ 
 
     $("#grid").kendoGrid({ 
 
     dataSource: { 
 
      data: null, 
 
      schema: { 
 
       model: { 
 
        id: "register_No", 
 
        fields: { 
 
         register_No: {editable: true}, 
 
         myEditableField: {editable: true}, 
 
        } 
 
       } 
 
      } 
 

 
     }, 
 
     edit:function(e){ 
 
      var fields= $('input[name="register_No"]'); 
 
      fields.attr('disabled', true); 
 
      fields.removeClass('k-input k-textbox'); 
 
      fields.addClass('none'); 
 
//create this class and set border and background none 
 
      $('input[name="myEditableField"]').focus(); 
 
     }, 
 
     save:function(e){ 
 
      var total=e.sender.dataSource.data().length; 
 
      if(e.model.register_No==""){ 
 
       e.model.register_No=total; 
 
      } 
 

 
     }, 
 
     remove:function(e){ 
 
      var grid = $("#grid").data("kendoGrid"); 
 
      var todos=grid.dataSource.data(); 
 
      var id_actual=e.model.register_No; 
 
      var count=1; 
 
      for(var i=0;i<todos.length;i++){ 
 
       if(todos[i].register_No!==id_actual){ 
 
        var data = grid.dataSource.at(i); 
 
        data.set("register_No", count); 
 
        count++; 
 

 
       } 
 
      } 
 
     } 
 
     , height: 280, 
 
     toolbar: ["create"], 
 
     scrollable: true, 
 
     editable: {mode:"inline", createAt: "bottom",  confirmation: true 
 
     } 
 
     , 
 
     columns: [ 
 
      {field: "register_No",title: "No", width: 30}, 
 
      {field: "myEditableField", title: "Any Field", width: 120}, 
 
      {field: "options", command: ["edit", "destroy"], width: 200} 
 

 
     ] 
 
    }); 
 
     });

<div id="grid"></div>

Answer 8

dichiarare una variabile per il conteggio di fila:

var rowNumber = 0; 

utilizzare nel vostro modello con ++ all'operatore di incrementarlo per ogni iterazione:

#= ++rowNumber # 

funziona questo anche per Kendo UI ListView.

Vedere il documento ufficiale:

http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Templates/add-row-numbers