Question

我想使用Kendo UI在网格顶部创建一行？

当我点击Add New Record按钮时，我希望新行总是填充在顶部（网格的第一行），如果我添加一条记录我没有任何问题，但如果我连续添加多条记录然后行会一个接一个地下降。

我的.html页面中的示例网格：

    <div id="commentsDiv" style="width: 100%; margin-bottom:15px; border: 0px;">

                    <div data-role="grid"
                         data-scrollable="true"
                         data-resizable="true"
                         data-editable="inline"
                         data-toolbar="['create', 'cancel']"
                         data-columns="[
                                         { field: 'cmntTxt',                title: 'Comment',       width: 400},
                                         { field: 'createdDate' ,           title: 'Created On',    width: 125, type : 'date', 'format' : '{0: MM/dd/yyyy HH:mm:ss}'},
                                        { command: ['edit', 'destroy',],    title: 'Actions',       width: 150 }
                                     ]"
                         data-bind="source: commentsDS"
                         data-scrollable='true'
                         data-sortable='true'
                         data-filterable='true'

                         data-pageable="{ 
                                 pageSize: 15,
                                 pageSizes: [15, 50, 100, 200, 500],
                                 refresh : true,                                                         
                                 buttonCount : 5
                                 }"                
                        style="width: 100%; height: 500px">
                    </div>

    </div>

data-toolbar="['create', 'cancel']" create是ADD NEW RECORD，取消-is取消更改此信息来自kendo.all.mini.js。

当我点击添加新记录按钮时，我希望新行总是填充在顶部（网格的第一行），如果我添加一条记录我没有任何问题，但如果我连续添加多条记录然后行会一个接一个地下降。

当我点击添加新记录时，将从kendo.all.mini.js调用以下代码

    addRow: function () {
    var e,
    t,
    n,
    i,
    r,
    o,
    a = this,
    s = a.dataSource,
    l = a._editMode(),
    c = a.options.editable.createAt || '',
    d = s.pageSize(),
    u = s.view() || [];
    (a.editable && a.editable.end() || !a.editable) && ('incell' != l && a.cancelRow(), e = s.indexOf(u[0]), 'bottom' == c.toLowerCase() && (e += u.length, d && !s.options.serverPaging && u.length >= d && (e -= 1)), 0 > e && (e = s.page() > s.totalPages() ? (s.page() - 1) * d : 0), t = s.insert(e, {
    }), n = t.uid, i = a.lockedContent ? a.lockedTable : a.table, r = i.find('tr[' + dt.attr('uid') + '=' + n + ']'), o = r.children('td:not(.k-group-cell,.k-hierarchy-cell)').eq(a._firstEditableColumnIndex(r)), 'inline' === l && r.length ? a.editRow(r)  : 'popup' === l ? a.editRow(t)  : o.length && a.editCell(o), 'bottom' == c.toLowerCase() && a.lockedContent && (a.lockedContent[0].scrollTop = a.content[0].scrollTop = a.content[0].offsetHeight))
    }

Answer 1

设置索引然后添加你想要的值（我只是将它们设置为null，因为你可以填写它们）：

$('#yourButton').on('click', function(){
    var grid = $("#grid").data("kendoGrid");
    grid.dataSource.insert(0, { cmntTxt: "", createdDate: "", action: "" });
});

如何使用Kendo UI在网格顶部创建一行？

1 个答案: