At work, we are having performances issues with a kendo grid that has a lot of row. We are thinking about using virtualization of remote data as a solution like you can see on the link below.
https://demos.telerik.com/kendo-ui/grid/virtualization-remote-data
The problem we have with that solution is that we allow filters on a lots of our columns and only the rows that are defined in the pagesize of the grid are displayed.
In the link below, you can easily see what I mean by that. I added the filterable attribute to the grid in the telerik demo and only the rendered row are displayed if I try to add a filter.
https://dojo.telerik.com/ayaKidet
The question was previously asked here but without an answer :(
Kendo Grid Virtualization of Lots of Data with Filters?
If anyone know of a way to apply the filter to the whole datasource it would be awesome.
Thank you very much
As well as you have set serverSorting to true in your datasource (the following code is from the dojo link):
$("#grid").kendoGrid({
dataSource: {
type: "odata",
serverPaging: true,
serverSorting: true,
pageSize: 100,
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
}
},
height: 543,
scrollable: {
virtual: true
},
sortable: true,
filterable: true,
columns: [
{field: "OrderID", title: "Order ID", width: 110},
{field: "CustomerID", title: "Customer ID", width: 130},
{field: "ShipName", title: "Ship Name", width: 280},
{field: "ShipAddress", title: "Ship Address"},
{field: "ShipCity", title: "Ship City", width: 160},
{field: "ShipCountry", title: "Ship Country", width: 160}
]
});
you should set serverFiltering to true. The question is that, by default, filtering is applied to the data that is in memory but, of course, not all records that meet the condition have already been transferred and, of course, you don't want to transfer all data before start filtering.
dataSource: {
type: "odata",
serverPaging: true,
serverSorting: true,
serverFiltering: true, // Add this to your code
pageSize: 100,
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
}
},
$("#grid").kendoGrid({
dataSource: {
type: "odata",
serverPaging: true,
serverSorting: true,
serverFiltering: true,
pageSize: 100,
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
}
},
height: 543,
scrollable: {
virtual: true
},
sortable: true,
filterable: true,
columns: [{
field: "OrderID",
title: "Order ID",
width: 110
},
{
field: "CustomerID",
title: "Customer ID",
width: 130
},
{
field: "ShipName",
title: "Ship Name",
width: 280
},
{
field: "ShipAddress",
title: "Ship Address"
},
{
field: "ShipCity",
title: "Ship City",
width: 160
},
{
field: "ShipCountry",
title: "Ship Country",
width: 160
}
]
});
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.common.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.highcontrast.min.css" />
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/kendo.all.min.js"></script>
<div id="grid"></div>
I am using jqgrid version 4.1.2 with MVC4, using loadonce option. When the search result's count exceeds approximately 9000 records, no data is shown up on the grid.
What might be the issue?
Here is the JS code: Update 1
function showCompletedGrid() {
// Set up the jquery grid
$("#jqTableCompleted").jqGrid({
// Ajax related configurations
url: jqDataUrl,
datatype: "json",
mtype: "POST",
loadonce: true,
loadtext: 'Loading Data please wait ...',
postData: { strUserName: function () { return $('#ddlUserName :selected').val(); },
strFunctionName: function () { return $('#ddlOPMSFunction :selected').text(); },
strProcName: function () { return $('#ddlOPMSProcess :selected').text(); },
strCategory: function () { return $('#ddlSearchCategory :selected').text(); },
strWorkType: function () { return $('#ddlSearchWorkType :selected').text(); },
strRequestNumber: function () { return $('#txtRequestNo').val(); },
strStatus: function () { return $('#ddlSearchStatus :selected').text(); },
strFromDate: function () { return $('#txtFromDate').val().toString(); }, //datepicker('getDate'),
strToDate: function () { return $('#txtToDate').val().toString(); }, //datepicker('getDate'),
strAction: "Closed"
},
autowidth: true,
shrinkToFit: true,
// Specify the column names
colNames: ["S.No.", "User Name", "Category", "Work Type", "Request Number", "Status", "Time Spent", "RE", "GUID", "Marked for Correction", "Correction Complete", "Reason", "Task Type", "acf2id", "Created Date", "Action", "IsTeam"],
// Configure the columns
colModel: [
{ name: "SNo", index: "SNo", sorttype: 'int', width: 100, align: "left", hidden: true, sortable: true, search: true, searchoptions: { sopt: ['eq']} },
{ name: "UserName", index: "UserName", width: 200, align: "left", sortable: true, search: true, sorttype: 'string', searchoptions: { sopt: ['cn']} },
{ name: "Category", index: "Category", width: 200, align: "left", sortable: true, search: true, sorttype: 'string', searchoptions: { sopt: ['cn']} },
{ name: "WorkType", index: "WorkType", width: 200, align: "left", sortable: true, search: true, sorttype: 'string', searchoptions: { sopt: ['cn']} },
{ name: "RequestNumber", index: "RequestNumber", width: 200, align: "left", sortable: true, search: true, searchoptions: { sopt: ['cn']} },
{ name: "Status", index: "Status", width: 200, align: "left", sortable: true, search: true, sorttype: 'string', searchoptions: { sopt: ['cn']} },
{ name: "TimeSpent", index: "TimeSpent", width: 200, align: "left", sortable: true, search: true },
{ name: "RE", index: "RE", width: 200, align: "left", sortable: true, search: true },
{ name: "GUID", index: "GUID", sortable: false, search: false, width: 200, align: "left", hidden: true },
{ name: "MarkCorrection", index: "MarkCorrection", width: 200, align: "left", hidden: true, sortable: true, search: true, sorttype: 'string', searchoptions: { sopt: ['cn']} },
{ name: "CorrectionComplete", index: "CorrectionComplete", width: 200, align: "left", hidden: true, sortable: true, search: true, sorttype: 'string', searchoptions: { sopt: ['cn']} },
{ name: "Reason", index: "Reason", width: 200, align: "left", hidden: true, sortable: true, search: true, sorttype: 'string', searchoptions: { sopt: ['cn']} },
{ name: "TaskType", index: "TaskType", width: 200, align: "left", sortable: true, search: true, sorttype: 'string', searchoptions: { sopt: ['cn']} },
{ name: "acf2id", index: "acf2id", width: 200, align: "left", hidden: true, sortable: true, search: true, sorttype: 'string', searchoptions: { sopt: ['cn']} },
{ name: "CreatedDate", index: "CreatedDate", width: 200, align: "left", hidden: false, search: false },
{ name: 'Actions', sortable: false, search: false, fixed: true, align: 'center', formatter: returnHyperLinkCompleted },
{ name: 'IsTeam', sortable: false, hidden: true, search: false, fixed: true, align: 'center' }
],
ignoreCase: true,
//width: 1250,
height: 150,
// Paging
toppager: true,
pager: $("#jqTableCompletedPager"),
//rowTotal: 200,
rowNum: 20,
rowList: [20, 15, 10, 5],
viewrecords: true,
emptyrecords: "",
hiddengrid: true,
// Default sorting
sortname: "SNo",
sortorder: "asc",
// Grid caption
caption: "Closed",
loadComplete: function (data) {
var RE;
var TimeSpent;
var rowIDs = jQuery("#jqTableCompleted").jqGrid('getDataIDs');
for (var i = 0; i < rowIDs.length; i++) {
var rowID = rowIDs[i];
var row = jQuery('#jqTableCompleted').jqGrid('getRowData', rowID);
RE = hmsToSecondsOnly(row.RE);
RE = (0.2 * RE) + RE;
TimeSpent = hmsToSecondsOnly(row.TimeSpent);
if (TimeSpent > RE && RE > 0) {
$(row).removeClass('ui-widget-content');
$(row).removeClass('ui-state-highlight');
$("#jqTableCompleted tr[id='" + rowID + "']").addClass('myColor');
}
}
}
}).navGrid("#jqTableCompletedPager",
{ refresh: true, add: false, edit: false, del: false },
{}, // settings for edit
{}, // settings for add
{}, // settings for delete
{sopt: ["cn"]}
);
$("#jqTableCompleted").jqGrid('navGrid', '#jqTableCompletedPager', { del: false, add: false, edit: false, search: false });
$("#jqTableCompleted").jqGrid('filterToolbar', { searchOnEnter: false, searchOperators: true });
$("#jqTableCompleted").jqGrid('navButtonAdd', '#jqTableCompletedPager',
{ caption: "Export to Excel", buttonicon: "ui-icon-extlink", title: "Export", id: "btnExport",
onClickButton: function (evt) {
var UserName = $('#ddlUserName option:selected').val();
var RequestNumber = $('#txtRequestNo').val();
var FunctionName = encodeURIComponent($('#ddlOPMSFunction option:selected').text());
var ProcessName = encodeURIComponent($('#ddlOPMSProcess option:selected').text());
var Category = $('#ddlSearchCategory option:selected').text();
var WorkTypeName = $('#ddlSearchWorkType option:selected').text();
var SearchStatus = $('#ddlSearchStatus option:selected').text();
var TransactionStartTS = $('#txtFromDate').val().toString();
var TransactionEndTS = $('#txtToDate').val().toString();
window.open("../Search/Export?UserName=" + UserName + "&RequestNumber=" + RequestNumber + "&FunctionName=" + FunctionName + "&ProcessName=" + ProcessName + "&Category=" + Category + "&WorkTypeName=" + WorkTypeName + "&SearchStatus=" + SearchStatus + "&TransactionStartTS=" + TransactionStartTS + "&TransactionEndTS=" + TransactionEndTS + "&ActionName=" + "Closed");
}
});
}
Although the data is being returned and in the correct format, from the controller, as follows, the grid does not show any result.
var jsonData = new
{
page = page,
rows = data
};
return Json(jsonData, JsonRequestBehavior.AllowGet);
Also is there any limit on number of records or dependency on the browser when returning all the data from server using the loadonce option?
Any help would be much appreciated. Thanks.
Finally I found the solution for the above problem by tracing the request in Fiddler, in the response title following error was shown:
Error during serialization or deserialization using the JSON JavaScriptSerializer. The length of the string exceeds the value set on the maxJsonLength property.
Upon searching for the above error, I found a workaround:
Here
Basically the problem area was not the jqGrid, but was MaxJsonLength property of JavaScriptSerializer which defaults to 2097152 characters ~ 4 MB of data. Source: MaxJsonLength
To get it working, I replaced the following code in my Action method:
return Json(jsonData, JsonRequestBehavior.AllowGet);
with:
var jsonResult = Json(jsonData, JsonRequestBehavior.AllowGet);
jsonResult.MaxJsonLength = int.MaxValue;
return jsonResult;
Thanks.
Here is my code below. I need to link the onclick to my Action in my controller for the toolbar button.
<script>
$(document).ready(function() {
var grid = $("#grid").kendoGrid({
dataSource: {
transport: {
read: { url: '#Url.Action("GetCars", "Home")' }
pageSize: 20,
serverPaging: true,
serverSorting: true,
serverFiltering: true
},
toolbar: [ { name: "create", text: "Add a new car" }],
height: 550,
sortable: true,
pageable: true,
columns: [
{ field: "ProductID", title: "Product ID", width: 100 },
{ field: "ProductName", title: "Product Name" },
{ field: "UnitPrice", title: "Unit Price", width: 150 },
{ field: "QuantityPerUnit", title: "Quantity Per Unit" }
]
});
</script>
The way i always did it in Razor was:
.ToolBar(toolbar => toolbar.Custom().Text("Add new car").Action("Create", "Home"))
I found the answer to my problem.
toolbar: [{ name:"create", template: "<input type='submit' value='Add
new' onclick=\"location.href='#Url.Action("Create", "Home")'\" />" }],
i have:
var answers_json = [{
name: "email",
mapping: "answer.respondent.email"
}, {
name: "group",
mapping: "answer.respondent.respondent_group_id"
}, {
name: "text",
mapping: "answer.text"
}, {
name: "scale",
mapping: "answer.scale"
}, {
name: "created_at",
mapping: "answer.created_at",
type: "date",
dateFormat: "c"
}];
var answers_columns = [{
id: "email",
header: a_email,
width: 240,
sortable: true,
resizable: false,
menuDisabled: true,
dataIndex: "email",
//renderer: anonim_fun i need to write function?
}, {
id: "group",
header: "<div style=text-align:center>" + a_group + "</div>",
width: 55,
sortable: true,
resizable: false,
menuDisabled: true,
dataIndex: "group"
}, {
id: "text",
header: a_answer,
width: 550,
sortable: true,
resizable: false,
menuDisabled: true,
dataIndex: "text"
}, {
id: "scale",
header: a_scale,
width: 50,
sortable: true,
resizable: false,
menuDisabled: true,
dataIndex: "scale"
}, {
id: "created_at",
header: a_added_date,
width: 120,
sortable: true,
resizable: false,
menuDisabled: true,
dataIndex: "created_at",
xtype: "datecolumn",
format: "Y-m-d H:i:s"
}];
Problem is follow:
I have tables (as you can see) ..if respondent answered and he putted flag to (I ASK ANONYMOUS) then (IN MY VERSION) respondent_id gets 0 as id and in tale respondents there are user with some id called anonymous and then in extjs i see - anonymous (from respondent_id).
This works, but there are another way.. add field is_anonymous into inquiry table (relation between answers & respondents tables). but answers_json in column email get info about answer.respondent.email... How i can do another way with just adding field is_annonymous (and if yes = 1, if no = 0). this is much clever. But how it write in extJS? Function? AND HOW?
thanks!
You can use convert: as part of your field definition. Look at the current value and replace it with what you prefer.
{
name: "email",
mapping: "answer.respondent.email"
convert: function(val) {
if(val=="....") {
return "(anonymous)"
}
},