kendo gridは行番号/番号列(二)を表示します.

前のブログで述べた番号列に基づいて、新しいgridを作成するごとに、バインディングイベントを書き換える必要があります.
したがって、ここでは、kendo gridをカプセル化し、シーケンス番号列の制御可能な表示を実現する.

 /*
     *
     * ExtGrid
     *
     */
    var ExtGrid = kendo.ui.Grid.extend({

        init: function (element, options) {
            var that = this;
            
            that._orderNumber(options);
            
            kendo.ui.Grid.fn.init.call(that, element, options);
            that._RegisterRowNumber(options);
        },
        _orderNumber: function (options) {
            if (options.rowNumber) {
                var that = this;
                var rowTemplate = '#= count #';
                var renderRowCount = function () {

                    that.options._count += 1;
                    return kendo.render(kendo.template(rowTemplate), [{ count: that.options._count }]);
                }
                
                if (options.rowNumber) {
                    if (options.columns) {
                        //1.      
                        options.columns.splice(0, 0, { attributes: { 'class': 'tight-cell' }, editor: null, editable: false, title: '', template: renderRowCount, width: "38px" });
                    }
                }
            }
        },
        _RegisterRowNumber: function () {
            var that = this;
            if (that.options.rowNumber) {
                var that = this;
                that.bind('dataBinding', function () {
                    that.options._count = (that.dataSource.page() - 1) * that.dataSource.pageSize();
                    that.options._count = isNaN(that.options._count) ? 0 : that.options._count;
                });
            }
        },
        options: {
            name: 'ExtGrid',
            _count: 0,
            rowNumber: false
        }
    });

    kendo.ui.plugin(ExtGrid);

ExtGridのパッケージを完成しました.直接使用します.

$("#grid").kendoExtGrid({
                sortable: true,
                dataSource: [{
                    name: "Jane Doe",
                    age: 30
                }, {
                    name: "Jane Doe",
                    age: 30
                }, {
                    name: "Jane Doe",
                    age: 30
                }, {
                    name: "Jane Doe",
                    age: 30
                }, {
                    name: "John Doe",
                    age: 33
                }],
                columns: [{
                    field: "name"
                }, {
                    field: "age"
                }],
                pageable: {
                    pageSize: 2
                },
                rowNumber: true,
            });

注意上で使用している名前はkendoExtGridで、options属性のrowNumberを設定する必要があります.trueはシリアル番号を表示します.書かないまたはfalseを書く必要があります.
シリアル番号を表示する必要はありません.