I am loading a Kendo UI grid with virtual scrolling option on and for un-identified reasons when I scroll down when inside the grid infinite hits are made to the get grid data method.
My page also has angular JS.
The page number is always sent as one, but it should at least be incremented to two.
Grid has been defined as following:
dataSource: {
serverPaging: true,
serverSorting: true,
serverFiltering: true,
pageSize: 10,
transport: {
read: URL
},
schema: {
data: function(data) {
/* Few business filter operation done here */
return data.Items;
},
total: function(data) {
if (data.Items != null && data.Items.length > 0) {
// Every record of the current data set has total employees count
// Thus returning the first value
return data.Items[0].totalEmployees;
}
return 0;
},
scrollable: {
virtual: true
},
sortable: true,
columns: columns,
dataBound: function(arg) {
/* few more business operations */
},
scrollable: {
virtual: true
},
serverPaging: true,
serverSorting: true,
serverFiltering: true,
editable: {
'mode': 'inline',
'createAt': 'top'
},
Image showing infinite hits:
I was loading the kendo.all.js file more than once, precisely thrice. I made sure it only loads once and the issue is gone.
Related
I am creating a kendo grid that is built out by calling an remote data source. I have enabled grouping, which works as expected, but I would like to default grouping and leave the user the option of adding/changing the groupings. I added the group parameter to the data source and this adds the desired group by default, but it also causes all column headers to disappear which prevents the end user from having the ability to add/change the groupings and also makes it a bit harder to read the displayed data. Google has failed me, so I submit myself to the mercy of stack overflow.
<div id="grid"></div>
<script>
var remoteDataSource = new kendo.data.DataSource({
transport: {
read: {
url: "https://localhost:44387/api/values",
dataType: "json"
}
},
pageSize: 8
,group: { field: "State" }
});
$("#grid").kendoGrid({
toolbar: ["excel", "pdf"],
groupable: true,
sortable: true,
pageable: {
pageSize: 5,
buttonCount: 10,
pageSizes: true
},
excel: {
allPages: true
},
pdf: {
allPages: true,
landscape: true
},
selectable: {
mode: "multiple, row"
},
reorderable: {
columns: true
},
dataSource: remoteDataSource,
height: 800,
width: 2000
});
</script>
Without default grouping:No Default Group
With default grouping: With Default Group
The reason is because you're allowing the grid to implicitly create the columns. If you explicitly define them, then they will show up.
See this example with the implicit column definition: https://dojo.telerik.com/AMucoVav versus this example with the explicit column definitions: https://dojo.telerik.com/EjeGeHAJ
I would like to use the Kendo grid with remote data virtualization. I also need to have a custom method for the transport.read property.
My grid is configured like this:
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
serverPaging: true,
serverSorting: true,
pageSize: 100,
transport: {
read: function (options) {
// Get the template items, which could be products, collections, blogs or articles
getTemplateItems().then(function (data) {
options.success(data);
});
}
}
},
schema: {
total: function(response) {
return 2000;
}
},
height: 543,
scrollable: {
virtual: true
},
sortable: true,
columns: [
{ field: "title", title: "Title" }
]
});
});
function getTemplateItems() {
var deferred = $q.defer();
smartseoEntityMapping.getEntityInfo({ mappedEntityType: mappedEntityType.Product }).$promise.then(function (data) {
deferred.resolve(data);
});
return deferred.promise;
}
The problem is that the read method is only called once when the grid is initialized. It is not called when the scroll reaches the last item in the current visible set.
I suspect that the grid needs the total number of items but I cannot understand how to set the total number of items. Setting a method for the schema.total property does not work because the method is never called.
So I would like to ask you, is this scenario possible at all, to have the virtualization work with a custom transport.read method, which needs to be called every time to get the next page of data?
Why I am using a custom read? Well I cannot just set an url for the transport.read property because my remote call is made via an angularjs resource, involves setting authentication, etc...
schema is a property of a kendo datasource. It looks like you have it outside of the datasource.
Should be:
$("#grid").kendoGrid({
dataSource: {
serverPaging: true,
serverSorting: true,
pageSize: 100,
transport: {
read: function (options) {
// Get the template items, which could be products, collections, blogs or articles
getTemplateItems().then(function (data) {
options.success(data);
});
}
},
schema: {
total: function(response) {
return 2000;
}
}
},
height: 543,
scrollable: {
virtual: true
},
sortable: true,
columns: [
{ field: "title", title: "Title" }
]
});
I am using Kendo Grid and filterable mode row. One of the columns is using a kendoDatePicker.
I filter on server and my problem is, when I pick a value on the datePicker, filtering works fine, but when it shows the data, the value doesn't stay in filter input, it disappears.
I am using to set the DatePicker:
$(document).ready(function () {
var grid = $("#grid").kendoGrid({
dataSource: {
transport: {
read: {
url: "/kukatko/search",
dataType: "json",
cache: false
},
parameterMap: function (data, type) {
if (type == "read") {
var paramMap = kendo.data.transports.odata.parameterMap(data.filter);
return paramMap;
}
}
},
serverFiltering: true,
pageSize: 10
},
filterable: {
mode: "row"
},
sortable: true,
pageable: true,
reorderable: true,
columns: [{...(some other columns)...
}, {
field: "datumZalozenia",
title: "Dátum založenia",
width: "150px",
parseFormats: ["d.M.yyyy"],
format: "d.M.yyyy",
template: "#=kendo.toString(new Date(datumZalozenia), 'd')#",
filterable: {
cell: {
showOperators: false,
operator: "contains",
format: "{0:d.M.yyyy}",
template: function (args) {
args.element.kendoDatePicker({
format: "d.M.yyyy"
});
}
}
}
Here is an image of how it looks (before, select value and after):
I selected 15.7.2015 so filtering on server runs without any problems.
take a look at these 2 fiddles
http://jsfiddle.net/uFcHK/
(v2013.1.319)
http://jsfiddle.net/rcvY3/
(v2013.2.716)
The code is identical.
var grid = $("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.kendoui.com/service/Northwind.svc/Products"
},
pageSize: 15,
serverPaging: true,
serverSorting: true,
serverFiltering: true
},
height: 450,
sortable: true,
pageable: true,
editable: true,
toolbar: ["create"],
filterable: false,
columns: ["ProductID", "ProductName", "UnitPrice"]
});
(you can ignore the the broken nav panel, I don't see this in prod)
The problem is the record count.
If you click on "Add new record" you will see the record count do a text add instead of number add. This is crazy, no idea how kendo let this slide for half a year+
The problem is with OData that return total as string since this is received as string.
In previous releases of code the increment was done as total++ but now it is being added a number allowing to add more than one record in one single operation. The problem is that if you do string + number you actually get the number concatenated to the string.
The easiest way of solving it is providing a total function that just converts the string to number something as simple as defining in the DataSource:
dataSource: {
type : "odata",
transport : {
read: "http://demos.kendoui.com/service/Northwind.svc/Products"
},
schema : {
total : function (data) {
// Convert __count to number
return +data.d.__count;
}
},
pageSize : 15,
serverPaging : true,
serverSorting : true,
serverFiltering: true
},
I am trying to implement server side sorting with kendo grid in my MVC application. but sorting option is not showing. i have double checked that i have enabled all the necessary option (made the serversorting to true to the the kendo grid data source and made the scrollable to true to the grid element) to do this but still i am able to find the sortable option. below is my kendo grid code
Kendo Grid Script
var grid = $("#grid");
grid.children().remove();
grid.kendoGrid({
columns: [{attributes:"",field:"",template:"${ResultFields[0].Value},title:"Column 1",width:"110px"},{attributes:"",field:"",template:"${ResultFields[1].Value},title:"Column 1",width:"110px"}],
resizable: true,
reorderable: true,
scrollable: true,
filterable: true,
columnMenu: true,
selectable: "row",
selectable: "multiple",
dataBound: function () { alert("Data Bound"); },
dataSource: {
transport: {
read: {
url: '#Url.Action("Index", "KendoServerSideSorting")',
type: "GET",
dataType: "json",
traditional: true,
data: {
itemTypeId: 1,
where: values,
orderBy: ["", "", ""],
},
},
},
schema: {
data: "Items",
total: "TotalItems",
},
serverPaging: true,
pageSize: 10,
error: function (e) {
alert(e.errors);
}
},
pageable: {
pageSize: 10,
input: true,
pageSizes: [10, 20, 30, 50, 100, 250],
},
change: function () { alert("Change event"); },
})
Controller Action will look like this
public JsonResult Search(int itemTypeId, int skip, int take, string[] where, string[] orderBy)
{
var v = Kernel.Get<IItemSearch>().Search(itemTypeId, skip, take, where, orderBy);
return Json(v, JsonRequestBehavior.AllowGet);
}
*Can anyone help me to resolve this issue. *
You can use the helper functionality from KendoGridBinderEx to parse all the commands (like filter and sort) and do the filtering and sorting at the server-side automatically using DynamicLinq.
See this project : https://github.com/StefH/KendoGridBinderEx for some examples.Also available as NuGet package : https://www.nuget.org/packages/KendoGridBinderEx/