How to add row number to kendo ui grid?

Question

I have a kendo ui grid in my page that has some columns. Now I want to add a column to it that shows me row number. How to I do this? Thanks.

Answer 1

If you need, row number in editable grid

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

Declare a variable for row counting:

var rowNumber = 0;

Use it in your template with ++ operator to increment it for each iteration:

#= ++rowNumber #

This also works for Kendo UI ListView.

See the official document:

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