Hello,

I have a problem when I'm trying to bind my data to a datasource with remote. If I bind it inline everything is fine and my chart looks like the first attached file. But with remote I get something like the second attached file.

The data I'm using for inline binding is this: var data = [{"Draft": 100, "Published": 200,"Deactivated": 50,"ChangeByVendor": 20}];

And the Data I receive from my endpoint with remote binding is following: "{\"Draft\": 100, \"Published\": 200,\"Deactivated\": 50,\"ChangeByVendor\": 20}"

The series field in my chart looks like this:

For me, I don't understand why i get two so different result with inline and remote. What am I missing here? I would love to get the chart to look like the inline result but with a remote binding. I hope you can help me with that.

Best regards,

Dominik

Dear Support,

Is there are any options to lazy load the sheets as my excel sheet is large enough and browser gets hanged. Do i missing something or any workaround for that.Thanks in advance. 

I have a grid where the display criteria is set by another control on the page, therefore sometimes I need to present an empty grid with all column filtering and sorting cleared. The only way I have been able to do this is with the following code:

grid.dataSource.query({
                filter: {},
                sort: {},
                take: grid.dataSource.take(),
                page: grid.dataSource.page(),
                pageSize: grid.dataSource.pageSize(),
                skip: grid.dataSource.skip()
            }).then(function (e) {
                grid.dataSource.data([]);
});

The problem with this code is the grid.dataSource.query causes a call to the service layer, which is extra traffic in the network, and seems unecessary since I am not presenting any data in the grid. Is there any other way of presenting an empty grid with column filtering/sorting cleared, that would not involve a call to the service layer?

Hi,

I have use custom validation function to my grid, it's fired twice every time. How to prevent this?

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();
        }
    });

Hello,

When I attempt to export a Kendo Grid to Excel that has a couple of fields that contain string array data, the data from those columns do not get exported to the Excel spreadsheet. Exporting this same grid to a PDF works just fine. I'm using the saveAsExcel() method and saveAsPDF() methods respecitvely.

Any known issues with the saveAsExcel method that would cause this?

Regards,

Jason

Grid doesn't call read method after page loading. It calls it if I press on Refresh button only. What's wrong in grid configuration?

Code in .cshtml file:

I've got a viewModel with a dataSource whose values I end up calculating after some event occurs. What I'm wondering is how to access the dataSource. It seems like directly accessing it in the changeEvent function works, but is it better to access it via the get() method? I'm also wondering if I should be trying to set its member data via set() somethow or if what I'm doing is correct. Here is a dojo, and the code is also below.