Insert Multiple rows in Kendo Grid on load without for loop - asp.net-mvc

Question

I need to Display 100 empty rows in Kendo grid on load as shown here Image without using for loop.
I have tried this:-
$(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: '' });
}
});
But using for loop consumes much loading time.So is there any better option other than for loop to display multiple rows in kendo grid?
My grid is as below:-
#(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"))
)
Your help will be appreciated Thanks.

Answer 1

Every time you update the grid's data source, it gets refreshed. I've changed your code to build the data source first and assign it to the grid afterwards:
$(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());
});
According to https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/setdatasource it should not be necessary to reload the data source manually. But it did not work without.
Your code took 5 seconds on my machine. Now it is less than a second.