This is a migrated thread and some comments may be shown as answers.

How to avoid kendo grid refreshing after cell edit

1 Answer 641 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Nitin
Top achievements
Rank 1
Nitin asked on 21 Mar 2020, 11:12 AM

How to avoid kendo grid refresh after cell editing , when i edit a cell value that time databound event called it self ,so issue is when databound event called it self my kendo grid expanded row collapse automaticly so i need to re-expand again this row that not well taking lot time to expand again

here is Snapshot 

 $("#planViewDataGrid").kendoGrid({
        columns: ParentGridJSON,
        noRecords: true,
        dataSource: sharedDataSource,
        excel: {
            allPages: true
        },
        //cancel: function (e) {
        //    lstGridDataSet = [];
        //},
        saveChanges: function (e) {
            if (IsInlineEdit === "True") {
                //dialog.data("kendoDialog").open().element.closest(".k-window").css({
                //    top: 100
                //});
                showInlineConfirmDialog();
                //bindReasonCodeDropDown();
                IsInlineEditDataBindReq = 0;
            }
            else {
                showConfirmBox("Confirm Overrides", "Are you sure you want to override all changes?");
                var kendoWindow = $("#confirmPopUpWindow");
                kendoWindow
                    .find("#confirmYes")
                    .unbind("click").click(function () {
                        // showInProgress();
                        $("#confirmYes").off();
                        hideKendoConfirmWindow();
                        kendo.ui.progress($(bodyTag), true);
                        $(".k-grid-save-changes").addClass('disabled_button');
                        $(".k-grid-save-changes").css("pointer-events", "none");
                        $(".k-grid-button").addClass('disabled_button');
                        $(".k-grid-button").css("pointer-events", "none");

                        saveTimeSeriesData($("#planViewDataGrid"));

                    });
            }
        },
        pageable: {
            pageSizes: [10, 20, 30, 40, 50],
            change: function () {
                if (leavepage) {
                    expandedItems = [];
                }
                renderChart();
            },
            messages: {
                display: Resources.resPagerDisplayMessage + footerLabel,
                itemsPerPage: footerLabel + Resources.resPagerItemsPerPageMessage
            }
        },
        requestStart: function () {

            kendo.ui.progress($(bodyTag), true);
        },
        requestEnd: function () {
            // kendo.ui.progress($(bodyTag), false);
        },
        editable: true,
        toolbar: [{ template: '<Label ID="m_lblUpdateStatus" CssClass="updatestatus" class="text-right"/>' },
        { name: "save", text: "Save Overrides" }, { name: "button", text: "Cancel Overrides" },
        { template: '<img id="expandGrid" style="width:20px;margin-top:2px;margin-right:5px;cursor:pointer;" class="float-left" title="Maximize Grid" onclick="expandCollapseGrid()" src="../CollaborativePlanning/Images/maximize.png" />' },
        { template: '<a class="k-button float-left" id="btnExpandAll" onclick="return expandAll()">Expand All</a>' },
        { template: '<a class="k-button float-left" id="btnCollapseAll" onclick="return collapseAll()">Collapse All</a>' },
        { template: '<Input type="search" ID="m_txtProductSearch" placeholder="Product Hierarchy" class="mleft mright float-left"/>' },
        { template: '<Input type="search" ID="m_txtLocationSearch" placeholder="Location Hierarchy" class="mright float-left"/>' },
        { template: '<Input type="search" ID="m_txtChannelSearch" placeholder="Customer Hierarchy" class="float-left"/>' },
        { template: '<img class="findIcon float-left" title="Search" onclick="searchPlanView()" src="../Images/find.gif" />' },
        { template: '<img style="width:20px;margin-top:2px;" class="findIcon float-left" title="Remove Search" onclick="removeSearchPlanView()" src="../Images/delete.png" />' }
        ],
        detailTemplate: '<div class="planViewDataGrid"></div>',
        detailExpand: function (e) {
            var grid = $("#planViewDataGrid").data("kendoGrid");
            var expanded = $.map(grid.tbody.children(":has(> .k-hierarchy-cell .k-i-collapse)"), function (row) {
                var index = $(row).data("uid");
                var list = $("#planViewDataGrid").data("kendoGrid").tbody.find("tr.k-master-row");
                if (list != undefined && list.length > 0) {
                    for (var i = 0; i < list.length; i++) {
                        if (list[i].getAttribute('data-uid') == index) {
                            if ($.inArray(i, expandedItems) == -1) {
                                expandedItems.push(i);
                            }
                        }
                    }
                }

            });
           
            if (IsInlineEdit === "True") {
                //disable non editable cells
                $('.nonEditable').css({ pointerEvents: "none" });
                if (IsInlineEditDataBindReq === 0) {
                    totalRenderChartRequest = totalRenderChartRequest + 1;
                    renderChart();
                }
                IsInlineEditDataBindReq = 0;
            }
            else {
                totalRenderChartRequest = totalRenderChartRequest + 1;
                renderChart();
            }
            

        },
        detailCollapse: function (e) {
            expandedItems = [];
            var grid = $("#planViewDataGrid").data("kendoGrid");
            var expanded = $.map(grid.tbody.children(":has(> .k-hierarchy-cell .k-i-collapse)"), function (row) {
                var index = $(row).data("uid");
                var list = $("#planViewDataGrid").data("kendoGrid").tbody.find("tr.k-master-row");
                if (list != undefined && list.length > 0) {
                    for (var i = 0; i < list.length; i++) {
                        if (list[i].getAttribute('data-uid') == index) {
                            if ($.inArray(i, expandedItems) == -1) {
                                expandedItems.push(i);
                            }
                        }
                    }
                }

            });
            totalRenderChartRequest = totalRenderChartRequest + 1;
            renderChart();
        },
        dataBound: function () {
            var grid = $("#planViewDataGrid").data("kendoGrid");
            for (var i = 0; i < expandedItems.length; i++) {
                //var rowToExpand = ">tr.k-master-row:nth-child(" + expandedItems[i] + ")";
                if (IsInlineEdit === "True") {
                    IsInlineEditDataBindReq = 1;
                }
                // grid.expandRow(grid.tbody.find("tr.k-master-row")[expandedItems[i]]);

                var rowToExpand = $("#planViewDataGrid").data("kendoGrid").tbody.find("tr.k-master-row")[expandedItems[i]];
                if (rowToExpand != undefined) {
                    grid.expandRow(rowToExpand);
                    //grid.expandRow(grid.tbody.find("tr[data-uid='" + expandedItems[i] + "']"));
                }
            }

            $("div.k-grid-content .k-auto-scrollable").scrollLeft(leftValue);
            $('div#planViewDataGrid div.k-grid-content.k-auto-scrollable').scrollTop(gridScrollTop);
          //  renderChart();
            kendo.ui.progress($(bodyTag), false);
        },
        detailInit: function (e) {
            //Model values to be used when saving forecast changes
            e.data.Timeseries.forEach(function (item, index) {
                if (item.UpdateSummaryTimeSeries != null) {
                    if (lstTsIds.indexOf(item.UpdateSummaryTimeSeries) < 0) {
                        lstTsIds.push(item.UpdateSummaryTimeSeries);
                    }
                }
            });

            e.detailRow.find(".planViewDataGrid").kendoGrid({
                resizable: true,
                columns: dynamicColumns,
                dataSource: e.data.Timeseries,
                editable: true,
                edit: function (e) {
                    var gridDataSet = {
                        LocationHierarchyField: '',
                        LocationHierarchy: '',
                        ProductHierarchy: '',
                        ProductHierarchyField: '',
                        ChannelHierarchyField: '',
                        ChannelHierarchy: '',
                        Period: '',
                        Value: '',
                        TemplateId: templateId,
                        TimeseriesId: '',
                        ReasonCode: '',
                        Comments: '',
                        Id: ''
                    };
                    var input = e.container.find(".k-input");
                    var oldValue = input.val().replace(/,/g, '');
                    var value = input.val();
                    var name = input[0].nextElementSibling.name;
                    var parent = $("#planViewDataGrid").data("kendoGrid").dataItem(e.sender.element.closest("tr").prev());
                    gridDataSet.LocationHierarchy = parent.LocationHierarchy;
                    gridDataSet.LocationHierarchyField = parent.LocationHierarchyField;
                    gridDataSet.ChannelHierarchy = parent.ChannelHierarchy;
                    gridDataSet.ChannelHierarchyField = parent.ChannelHierarchyField;
                    gridDataSet.ProductHierarchyField = parent.ProductHierarchyField;
                    //gridDataSet.ProductHierarchy = parent.HasChild ? parent.ProductHierarchy : parent.ProductHierarchy.split(":")[0];
                    gridDataSet.ProductHierarchy = parent.HasChild ? parent.ProductHierarchy : parent.ProductId;
                    gridDataSet.Period = name;
                    gridDataSet.TimeseriesId = e.model.TimeSeriesId;
                    gridDataSet.Id = input.context.id;
                    //gridDataSet.ReasonCode = reasonCode;
                    //gridDataSet.Comments = comments;
                    if (IsInlineEdit === "True") {
                        IsInlineEditDataBindReq = 1;
                    }
                    //GET SCROLLBAR POSITION
                    var oBody = document.body;
                    var oDoc = document.documentElement;
                    topValue = oBody.scrollTop > oDoc.scrollTop ? oBody.scrollTop : oDoc.scrollTop;
                    leftValue = $("div.k-grid-content .k-auto-scrollable").scrollLeft();

                    gridScrollTop = $('div#planViewDataGrid div.k-grid-content.k-auto-scrollable').scrollTop();
                    input.focusout(function () {
                        value = input.val().replace(/,/g, '');
                        gridDataSet.Value = value;
                        if (IsInlineEdit === "True") {
                            IsInlineEditDataBindReq = 1;
                        }
                        if (oldValue != value) {
                            //if (IsInlineEdit === "False") {
                                $(".k-grid-save-changes").removeClass('disabled_button');
                                $(".k-grid-save-changes").css("pointer-events", "visible");

                                $(".k-grid-button").removeClass('disabled_button');
                                $(".k-grid-button").css("pointer-events", "visible");
                            //}

                            for (var i = 0; i < lstGridDataSet.length; i++) {
                                if (lstGridDataSet[i].Id == gridDataSet.Id && oldValue != value) {
                                    lstGridDataSet.splice(i, 1);
                                }
                            }

                            lstGridDataSet.push(gridDataSet);
                            //Adding overriden cells ids to list, as we have to show them in different color
                            if (lstOverriddenIds.indexOf('#' + gridDataSet.Id) == -1) {
                                lstOverriddenIds.push('#' + gridDataSet.Id);
                            }

                            UpdateSummaryTimeSeries(gridDataSet, lstTsIds);

                            //if (IsInlineEdit === "True") {
                            //    saveTimeSeriesDataInline($("#planViewDataGrid"));
                            //}

                            // SCROLLBAR RESTORE POSITION
                            try {
                                oBody.scrollTop = topValue;
                                oDoc.scrollTop = topValue;
                                $("div.k-grid-content .k-auto-scrollable").scrollLeft(leftValue);
                                $('div#planViewDataGrid div.k-grid-content.k-auto-scrollable').scrollTop(gridScrollTop);
                            }
                            catch (e) {
                                console.log(e);
                            }

                        }
                    });
                },
                dataBound: function (e) {

                }
            });
            $("#planViewDataGrid").resize();
            if (lstGridDataSet.length == 0) {
                $(".k-grid-save-changes").addClass('disabled_button');
                $(".k-grid-save-changes").css("pointer-events", "none");

                $(".k-grid-button").addClass('disabled_button');
                $(".k-grid-button").css("pointer-events", "none");
            }
            //renderChart();
        }
    });

 

 

1 Answer, 1 is accepted

Sort by
0
Preslav
Telerik team
answered on 25 Mar 2020, 03:49 PM

Hello Nitin,

A possible workaround for this behavior is to persist the expanded rows, and programmatically, expand them after an edit. For example, check these KB articles -

Another possible workaround is to prevent the default editing, and manually update the data items and mark them as dirty. For example, check this KB - https://docs.telerik.com/kendo-ui/knowledge-base/grid-detail-template-edit-master-rows

I hope the above is useful. Please, check the above resources, and let me know if you require any further assistance.

 

Regards,
Preslav
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
Grid
Asked by
Nitin
Top achievements
Rank 1
Answers by
Preslav
Telerik team
Share this question
or