AddRow by JavaScript after GRID is ready

[Jana Vichtova]

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 and displayed.

When i try this in DataBound event, addRow cause DataBound event again and become never ending loop. It is posible to know when is grid ready, data loaded and displayed ? Thanks for help!

My grid code:

    @(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
)

 

Add row code fired in DataBound event => cause never ending loop, becouse addRow cause DataBound event:

function gridAdd(){
    var grid = $("#gridAdd").data("kendoGrid");
    grid.addRow();
}

[Dimiter Madjarov]

Hello Martin,

A possible solution would be to check if the first item in the dataSource is a newly added one and only if that is not the case to add a new row.
E.g.

function dataBound(e) {
    var firstItem = this.dataSource.view()[0];
    if (firstItem.isNew() == false) {
        this.addRow();
    }
}

Regards,
Dimiter Madjarov
Telerik