如何将行号添加到kendo ui网格？

Question

我在我的页面有一些kendo ui网格，有一些列。 现在我想添加一个列，它显示了我的行号。 如何做到这一点？ 谢谢。

Answer 1

初始化变量和列显示出它作为template: "#= ++record #"

Working Demo

下面是代码：

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

对于asp.net的MVC的包装，你应该使用这样的事情：

@{ 
    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

YD1m的模板对我来说不起作用编辑变量像string。所以我不得不来实现它，像这样：

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

Answer 4

对于剃刀还需要实际显示也数量：（没有足够的点一样的东西发表评论）

网格上方：

@{int counter = 1;} 

栏内定义：

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

Answer 5

有没有必要定义任何变量，你可以得到帮助从数据绑定事件：

$("#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

基于伊赫桑Mirsaeedi最伟大的答案，我想出了这个版本，指派从0开始，而不是从1开始行号指数，跳过组头如果网格划分，并把手当网格未被分页时的情况。

我需要这些索引，以便为每列添加一个带有隐藏输入的模板，这样我就可以将网格的值与整个表单一起提交。

我认为它是相关的并且值得添加到线程中...

代码：

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); 
}); 

结果：在编辑网格

Answer 7

如果需要，行号

$(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

声明一个变量为行计数：

var rowNumber = 0; 

用它在你的模板与++运算符来增加它的每一次迭代：

#= ++rowNumber # 

这也适用于剑道UI的ListView。

看到官方文件：

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