在加载时在Kendo网格中插入多行而没有for循环

Question

我需要在剑道网格上显示100个空行，如Image所示，而不使用for循环。

我已经尝试过：-

$(document).ready(function () {
        var grid = $("#AlertRowGrid").data("kendoGrid");
        var datasource = grid.dataSource;
        for (i = 0; i < 100; i++) {
            datasource.add({ PhoneNumber: '', Field1: '', Field2: '', Field3: '', Field4: '', Field5: '', Field6: '', Field7: '', Field8: '', Field9: '', Field10: '' });
        }            
    });

但是使用for循环会消耗大量的加载时间。那么，除了for循环以外，还有其他更好的选择来在剑道网格中显示多行吗？

我的网格如下：-

@(Html.Kendo().Grid<SCC.Business.Models.Point_of_Service.Custom.SendAlertsDataModel>()
.Name("AlertRowGrid")
.Columns(columns =>
{
columns.Bound(c => c.PhoneNumber).ClientTemplate("<input type='text' value='#:PhoneNumber#' id='Phone' maxlength='12' onchange = EditGridRow(this) placeholder = '000-000-0000' class='MaskPhone'/>").Title(General.PhoneNumber).Width("10%").HtmlAttributes(new { @class = "PhoneNumber" });
columns.Bound(c => c.Field1).ClientTemplate("<input type='text' value='#:Field1#' id='Field1' maxlength='100' onchange = EditGridRow(this) />").Title(PointOfService.SendAlert_Field1).Width("10%").HtmlAttributes(new { @class = "Field1" });
columns.Bound(c => c.Field2).ClientTemplate("<input type='text' value='#:Field2#' id='Field2' maxlength='100' onchange = EditGridRow(this) />").Title(PointOfService.SendAlert_Field2).Width("10%").HtmlAttributes(new { @class = "Field2" });
columns.Bound(c => c.Field3).ClientTemplate("<input type='text' value='#:Field3#' id='Field3' maxlength='100' onchange = EditGridRow(this) />").Title(PointOfService.SendAlert_Field3).Width("10%").HtmlAttributes(new { @class = "Field3" });
columns.Bound(c => c.Field4).ClientTemplate("<input type='text' value='#:Field4#' id='Field4' maxlength='100' onchange = EditGridRow(this) />").Title(PointOfService.SendAlert_Field4).Width("10%").HtmlAttributes(new { @class = "Field4" });
columns.Bound(c => c.Field5).ClientTemplate("<input type='text' value='#:Field5#' id='Field5' maxlength='100' onchange = EditGridRow(this) />").Title(PointOfService.SendAlert_Field5).Width("10%").HtmlAttributes(new { @class = "Field5" });
columns.Bound(c => c.Field6).ClientTemplate("<input type='text' value='#:Field4#' id='Field4' maxlength='100' onchange = EditGridRow(this) />").Title(PointOfService.SendAlert_Field6).Width("10%").HtmlAttributes(new { @class = "Field6" });
columns.Bound(c => c.Field7).ClientTemplate("<input type='text' value='#:Field7#' id='Field7' maxlength='100' onchange = EditGridRow(this) />").Title(PointOfService.SendAlert_Field4).Width("10%").HtmlAttributes(new { @class = "Field7" });
columns.Bound(c => c.Field8).ClientTemplate("<input type='text' value='#:Field8#' id='Field8' maxlength='100' onchange = EditGridRow(this) />").Title(PointOfService.SendAlert_Field8).Width("10%").HtmlAttributes(new { @class = "Field8" });
columns.Bound(c => c.Field4).ClientTemplate("<input type='text' value='#:Field9#' id='Field9' maxlength='100' onchange = EditGridRow(this) />").Title(PointOfService.SendAlert_Field9).Width("10%").HtmlAttributes(new { @class = "Field9" });
columns.Bound(c => c.Field10).ClientTemplate("<input type='text' value='#:Field10#' id='Field10' maxlength='100' onchange = EditGridRow(this) />").Title(PointOfService.SendAlert_Field4).Width("10%").HtmlAttributes(new { @class = "Field10" });
}).Scrollable(x => x.Height(400)).Events(e => e.DataBound("onDataBound"))    
)

谢谢您的帮助，谢谢。

Answer 1

每次更新网格的数据源时，都会刷新它。我已更改您的代码以首先构建数据源，然后再将其分配给网格：

$(document).ready(function () {
    console.log("S: " + new Date());

    var data = [];
    for (var i = 0; i < 100; i++) {
        data.push({ PhoneNumber: '', Field1: '', Field2: '', Field3: '', Field4: '', Field5: '', Field6: '', Field7: '', Field8: '', Field9: '', Field10: '' });
    }
    var dataSource = new kendo.data.DataSource({
        data: data
    });

    var grid = $("#AlertRowGrid").getKendoGrid();
    grid.setDataSource(dataSource);
    grid.dataSource.read();

    console.log("E: " + new Date());
});

根据https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/setdatasource，不需要手动重新加载数据源。但是，没有它就无法工作。

您的代码在我的计算机上花费了5秒钟。现在不到一秒钟。