Kendo GRID AddRow by javascript

Question

I want to add row to kendo Grid with inline edit support. I need to do it after grid is initialized and data are loaded.

I tried this:

$(document).ready(function () {

    gridAdd(); // no work

});

function gridAdd(){
     $(".k-grid-add").click()
}

When I call gridAdd() in DataBound event in Grid, grid freeze and data do not load. What is correct event to perform this function ?

Grid code is before code for gridAdd function:

                    @(Html.Kendo().Grid<TT.Web.Models.ViewModel.WorkViewModel>()
                      .Name("gridAdd")
                      .Events(events => events.Edit("gridEdit").DataBound("databoundinitAdd").Save("gridAddSaveChanges"))
                      .Columns(columns =>
                      {
                      columns.Template(x => x.Id)
                          .HeaderTemplate("<input id='mastercheckbox' type='checkbox'/>")
                          .ClientTemplate("#if(Status == 0 || Status == 3) {#  <input type='checkbox' name='checkedRecords' value='#= Id #' class='checkboxGroups'/> #} #")
                          .Width(30)
                          .HtmlAttributes(new { style = "text-align:center" })
                          .HeaderHtmlAttributes(new { style = "text-align:center" });
                      columns.Template(@<text></text>).Title("Status").ClientTemplate("#if(Status == 0) {# <i class='fa fa-bolt icc'></i> #}#" + "#if(Status == 1) {# <i class='fa fa-paper-plane icc'></i> #}#" + "#if(Status == 2) {# <i class='fa fa-check-square-o icc'></i> #}#" + "#if(Status == 3) {# <a class='popoverEl' data-toggle='popover' data-trigger='hover' tabindex='0' title='Důvod zamítnutí' data-content='#=RejectionReason#' ><i class='fa fa-ban icc popoverEl' ></i></a> #}#").HtmlAttributes(new { @class = "icc" });
                      columns.Bound(work => work.Date).EditorTemplateName("WorkDate").Title(@L("Date"));
                      columns.Bound(work => work.Project).ClientTemplate("#=Project.Name#").Width(250).Title(@L("ProjectNameP")); // .ClientTemplate("#=Project.Name#")
                      columns.Bound(work => work.Spp).ClientTemplate("#=Spp.Code#").Width(100);
                      columns.Bound(work => work.Operation).ClientTemplate("#=Operation.Code#").Width(100).Title(@L("TypeOfOperation"));
                      columns.Bound(work => work.Hours).Title(@L("Hours"));
                      //columns.Command(command => { command.Edit(); command.Destroy(); }).Width(172);

                      columns.Template(@<text></text>).ClientTemplate(
                             "<div class='btn-group'>" +
                             "#if(Status == 0 || Status == 3 ) {# <a class='btn btn-success btn-sm k-button-icontext k-grid-edit'><i class='fa fa-pencil'></i></a>#}#" +
                             "#if(Status == 0 || Status == 3 ) {# <a class='btn btn-sm btn-primary sendToApprove'  data-href='" + Url.Action("WorkToApprove", "Home") + "/#=Id#'><i class='fa fa-paper-plane'></i></a>#}#"
                           + "#if(Status == 0 ) {# <a data-href='" + Url.Action("WorkDelete", "Home") + "/#=Id#' class='btn btn-sm btn-danger delete-work-item' ><i class='fa fa-times'></i></a>#}#"
                           + "</div>"
                             ).Width(130);
                      })
                      .ToolBar(toolbar =>
                      {
                          toolbar.Create().Text(@L("AddRecord"));
                          //toolbar.Save();
                      })
                      .Editable(editable => editable.Mode(GridEditMode.InLine))
                      .DataSource(dataSource => dataSource
                        .Ajax()
                        .Batch(false)
                        .Events(events => events.RequestEnd("OnRequestEnd_TopLinePriceGrid"))
                        .PageSize(20)
                        //.Events(events => events.Error("error_handler"))
                        .Model(model =>
                        {
                            model.Id(p => p.Id);
                            model.Field(p => p.Operation).DefaultValue(ViewData["defaultOperation"] as TT.Web.Models.ViewModel.OperationViewModel);
                            model.Field(p => p.Spp).DefaultValue(ViewData["defaultSpp"] as TT.Web.Models.ViewModel.SppViewModel);
                            model.Field(p => p.Project).DefaultValue(ViewData["defaultProject"] as TT.Web.Models.ViewModel.ProjectViewModel);
                        })
                        .Read(read => read.Action("WorkRead", "Home").Data("currentWeekInfo")) // Přidádo HTTP parametr s vybranným týdnem
                        .Create(update => update.Action("EditingInline_Create", "Home").Data("currentWeekInfo"))
                        .Update(update => update.Action("EditingInline_Update", "Home").Data("currentWeekInfo"))
                        .Destroy(update => update.Action("EditingInline_Destroy", "Home").Data("currentWeekInfo"))
                       )
                      .Pageable() // Enable paging
                      .Sortable() // Enable sorting
                )

Thanks!

EDIT NOT SOLVED BY: in databound Event, but there is a problem. GridAdd cause databound event, so it is calling repeatedly and brower freeze.

setTimeout(function(){
    $(".k-grid-add").click()
})

It depends where your grid is initialized. This call should be done after grid is initialized. Can you provide some extra code? — calinaadi
It's not recomended to use timeouts to solve issues like yours. You did not solve your problem, you just delayed your call. — calinaadi
Ok, it is bad way and do not work corectly, becouse addRow cause databound event. So add row calling freez brower.... — Martin Haščák

Vladimir Iliev Vladimir Iliev · Accepted Answer · 2015-10-20T09:41:24

Basically the best way is to get the Grid client side object and then use the client-side API to add the row. Please check the related docuemntation below:

Kendo GRID AddRow by javascript

1 Answers