Вставить несколько строк в Kendo Grid при загрузке без цикла for

Question

Мне нужно отобразить 100 пустых строк в сетке кендо при загрузке, как показано здесь Изображение без использования цикла 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 секунд на моей машине.Теперь оно меньше секунды.