BatchEdit with bad performance

[Michael]

So I have used a grid with batch edit (in cell) for editing offer positions. The offers are quiet big and usually have between 20 and 500 positions.The performance is now really bad and this is almost not usable...

The reason are quiet simple the DOM is getting to big. The simple solution would of course be to implement paging. But the customer needs to see all positions and can even move the positions with drag & drop. It feels kinda too late to change it to paging. It would be a step backwards.

With some tests I have found out that mostly the EditorTemplates are mostly the issue. I use here quiet complex controlls. 

 

Do you have any ideas how to easily improve the performance? Is it maybe possible to render the EditorTemplate during runtime if a cell is clicked?

 

Here the code for the grid, it is dynamic with some definition classes:

@(Html.Kendo().Grid<dynamic>
    ()
    .Name(gridName)
    .Events(events => events
        .DataBound("insertRowCount"))
    .Columns(columns =>
    {
        foreach (var col in definition.Grid.Fields.Where(f => !f.Internal))
        {
            var clientTemplate = "";
            var kCol = columns.Bound(!string.IsNullOrEmpty(col.Alias) ?
            $"{col.Alias}_{col.Name}" : col.Name)
            .Title(col.Title);

            if (col.FieldType is IntegerField)
            {
                kCol.EditorTemplateName("GridIntegerField").EditorViewData(new { fieldType = col.FieldType });
            }
            else if (col.FieldType is DoubleField)
            {
                kCol.EditorTemplateName("GridDoubleField").EditorViewData(new { fieldType = col.FieldType });
            }
            else if (col.FieldType is ListValueField)
            {
                kCol.EditorTemplateName("GridListValueField").EditorViewData(new { fieldType = col.FieldType });
                clientTemplate = $"#= htmlDecode({col.Name}_Display) #";
            }
            else if (col.FieldType is DataEntityLinkField)
            {
                //columns.Bound(typeof(string), $"{col.Name}_Display").Hidden(true);
                kCol.EditorTemplateName("GridDataEntityLinkField").EditorViewData(new { fieldType = col.FieldType });
                clientTemplate = $"#= htmlDecode({col.Name}_Display) #";
            }
            else if (col.FieldType is CurrencyField)
            {
                kCol.EditorTemplateName("GridCurrencyField").EditorViewData(new { fieldType = col.FieldType });
                clientTemplate = $"#=grid.currencyFormat({col.Name}) #";
            }
            else if (col.FieldType is BoolField)
            {
                kCol.EditorTemplateName("GridBoolField").EditorViewData(new { fieldType = col.FieldType });
            }
            else if (col.FieldType is TextField)
            {
                kCol.EditorTemplateName("GridTextField").EditorViewData(new { fieldType = col.FieldType });
            }
            else if (col.FieldType is DateField)
            {
                clientTemplate = $"#=grid.dateFormat({col.Name}) #";
                kCol.Editable("function () { return false; }");
            }
            if (!string.IsNullOrEmpty(col.ClientTemplate))
            {
                clientTemplate = col.ClientTemplate;
            }
            else if (col.FieldType is EditorField)
            {
                clientTemplate = $"#= htmlDecode({col.Name}) #";
            }
            if (!string.IsNullOrEmpty(clientTemplate))
                kCol.ClientTemplate(clientTemplate);
            if (!string.IsNullOrEmpty(col.ClientGroupHeaderColumnTemplate))
                kCol.ClientGroupHeaderColumnTemplate(col.ClientGroupHeaderColumnTemplate);
            if (col.Width > 0)
            {
                kCol.Width(col.Width);
            }

            if (!string.IsNullOrEmpty(col.Format))
            {
                kCol.Format(col.Format);
            }
            if (autoIncrementFields.Contains(col.Name))
                kCol.Editable("function () { return false; }");
        }
        if (!definition.Grid.HideBatchEditButtons)
            columns.Command(command =>
            {
                command.Custom("Löschen").Text(" ").IconClass("k-icon k-i-delete").Click("batchEditDelete")
                    .HtmlAttributes(new { @class = "nu-grid-button", @title = "Löschen" });

                if (definition.Grid.ShowNewButton)
                    command.Custom("Neu").Text(" ").IconClass("k-icon k-i-add").Click("batchEditNewAfter")
                        .HtmlAttributes(new { @class = "nu-grid-button", @title = "Neue Zeile einfügen" });
            });


    })
    .ToolBar(toolbar =>
    {
        if (definition.Grid.ShowNewButton)
            toolbar.Custom()
            .HtmlAttributes(new { onclick = "batchEditNew();" })
                .Name("new")
                .Text("Neu")
                .IconClass("k-icon k-i-plus");

        if (!definition.Grid.HideBatchEditButtons)
            toolbar.Save().SaveText("Änderungen speichern").CancelText("Änderungen verwerfen");
    })
    .Sortable(false)
    .Filterable()
    .Selectable()
    .Editable(editable => editable.Mode(GridEditMode.InCell))
    .DataSource(datasource =>
         datasource.Ajax()
            .Model(model =>
            {
                model.Id("Id");
                if (sortField is IntegerField)
                {
                    model.Field(sortField.Name, typeof(int));
                }
                model.Field(Model.ParentLink, typeof(Guid)).DefaultValue(Model.ParentId).Editable(false);
                model.Field("Id", typeof(Guid)).DefaultValue(Guid.Empty).Editable(false);
                model.Field("Entity", typeof(string)).DefaultValue(Model.Entity).Editable(false);
                foreach (var col in definition.Grid.Fields.Where(f => f.FieldType is DataEntityLinkField || f.FieldType is ListValueField))
                {
                    model.Field($"{col.Name}", typeof(Guid)).DefaultValue(Guid.Empty);
                    model.Field($"{col.Name}_Display", typeof(string)).DefaultValue(string.Empty);
                }
                foreach (var col in definition.Grid.Fields.Where(f => f.FieldType is CurrencyField))
                {
                    model.Field(col.Name, typeof(double)).DefaultValue(0.0);
                }
            })
            .Batch(true)
            .Read(read => read.Action("BatchEditRead", "Entities", new { parentId = Model.ParentId, entity = Model.Entity, useLink = Model.ParentLink, orderBy = sortField.Name }))
            .Create("BatchEditUpdateOrCreate", "Entities")
            .Update("BatchEditUpdateOrCreate", "Entities")
            .Destroy("BatchEditDelete", "Entities")
            .Events(events => events.Error("error").Change(definition.Grid.ChangeEvent))
            .ServerOperation(false)
    )
    .AutoBind(true)
 )

 

[Michael]

As usual the issue was not where I was looking for! In a script i use dataItem.set(field, value) to update all rows if anything was changed... after changing it to dataItem.field = value and only once grid.refresh it worked fine!