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:
@(Html.Kendo().Grid<GatherFormModel>() .Name("gridGatherForm") .AutoBind(false) .Columns( c => { c.Bound(m => m.Id).Hidden(true); c.Bound(m => m.Order).Title("â„–"); c.Bound(m => m.DepartmentName); c.Bound(m => m.Name).Title("Name"); c.Bound(m => m.PeriodicityName).Title("Periodicity"); c.Bound(m => m.StateName).Title("State"); c.Bound(m => m.PeriodName).Title("Data range"); c.Bound(m => m.IsStarted).Title(""); }) .Pageable(p => p.Enabled(true).Refresh(true)) .Editable(p => p.Enabled(false)) .Groupable(g => g.Enabled(false)) .DataSource(d => d.Ajax() .PageSize(30) .ServerOperation(true) .Read(read => read.Url(Url.Action("Get", "GatherForm", new {httproute = ""}))) ))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.
<div id="example"> <div class="demo-section k-content wide"> <div class="box"> <input id="Value1NumericTextBox" data-role="numerictextbox" data-format="c0" data-decimals="0" data-bind="value: Value1, events: { change: Value1Change }" data-min="0" /> <input id="Value2NumericTextBox" data-role="numerictextbox" data-format="c0" data-decimals="0" data-bind="value: Value2, events: { change: Value2Change }" data-min="0" /> </div> <div> <div id="chart1" data-role="chart" data-series-defaults="{ type: 'column' }" data-series="[ {field: 'v1', categoryField: 'category'}, {field: 'v2', categoryField: 'category'} ]" data-bind="source: dataSource" style="height: 200px;" > </div> </div> </div><script> (function() { var viewModel = kendo.observable({ Value1: 10, Value2: 20, dataSource: new kendo.data.DataSource({ data: [ { v1: 10, v2: 20, category: "A B" }, { v1: 100, v2: 200, category: "A*10 B*10" } ] }), Value1Change: function(e) { var a = viewModel.get("Value1"); var b = viewModel.get("Value2"); // Is it incorrect to access the dataSource directly? this.dataSource.at(0).v1 = a; this.dataSource.at(0).v2 = b; this.dataSource.at(1).v1 = a*10; this.dataSource.at(1).v2 = b*10; var chart = $("#chart1").data('kendoChart'); chart.refresh(); }, Value2Change: function(e) { var a = viewModel.get("Value1"); var b = viewModel.get("Value2"); // Is it better to access the dataSource via get() var ds = viewModel.get("dataSource"); // Should I be setting the data via set() somehow? ds.at(0).v1 = a; ds.at(0).v2 = b; ds.at(1).v1 = a*10; ds.at(1).v2 = b*10; var chart = $("#chart1").data('kendoChart'); chart.refresh(); } }); kendo.bind($("#example"), viewModel); })();</script></div>Hello,
I want to have multiple filters on my grid. I've tried and tried but I can't get my logic to work. I'm getting some really wierd results back. I want to be able to filter on a company and by a type of vessel. The results are wrong so I need to know where I have messed up in my code.
Here is my javascript
function filterChange() { var grid = $("#Grid").data("kendoGrid"), ddl_owners = document.getElementById("owners"), ddl_vessels = document.getElementById("vessel_types"), value = this.value(), if (value) { grid.dataSource.filter( { logic: "and", filters: [ { field: "owner_company", operator: "eq", value: ddl_owners.value }, { field: "vessel_type", operator: "eq", value: ddl_vessels.value } ] }) } else { grid.dataSource.filter({}); }}Here is my dropdown code (toolbar of the grid) for my dropdown filters.
@(Html.Kendo().ComboBox() .Name("vessel_types") .Placeholder("-- Select Type --") .Suggest(true) .Filter("contains") .DataTextField("spot_name") .DataValueField("spot_name") .AutoBind(false) .Events(e => e.Change("filterChange")) .DataSource(ds => { ds.Read("toolbar_Types", "Home"); }))@(Html.Kendo().ComboBox() .Name("owners") .Placeholder("-- Select Owner --") .Suggest(true) .Filter("contains") .DataTextField("owner_name") .DataValueField("owner_name") .AutoBind(false) .Events(e => e.Change("filterChange")) .DataSource(ds => { ds.Read("toolbar_Types", "Home"); }))