kendo-grid - 如何使用 Kendo UI 在网格顶部创建一行?
问题描述
我想使用 Kendo UI 在网格顶部创建一行?
当我单击“添加新记录”按钮时,我希望始终将新行填充在顶部(网格的第一行),如果我添加一条记录我没有任何问题,但如果我连续添加多条记录,那么这些行会下降(一个接一个)。
我的 .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 is ADD NEW RECORD, cancel -is Cancel 更改此信息来自 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))
}
解决方案
设置您的索引,然后添加您想要的值(我只是将它们设置为 null,因为您可以填写它们):
$('#yourButton').on('click', function(){
var grid = $("#grid").data("kendoGrid");
grid.dataSource.insert(0, { cmntTxt: "", createdDate: "", action: "" });
});
推荐阅读
- mysql - 从 3 个不同的主题中为一个 id 找到 max(marks),对于第二个 id 类似,依此类推
- angular - Angular 8 延迟加载的路由和守卫
- c# - 如何将参数传递给 ASP.NET Core 布局中的顶部导航栏?
- excel - 如何使用函数填充集合,然后调用集合以填充用户表单中的组合框
- javascript - 向 2d 平台游戏添加重力的问题
- outlook-addin - O365 Outlook 加载项无法加载
- react-native - 如何在导航抽屉上执行注销按钮以将我重定向到登录页面?
- pandas - Dask 的性能比 Pandas 差
- java - Dataset.map() 抛出 ClassCastException
- python-3.x - 为什么函数 1 不调用 fun2