Kendo Grid not calling correct DynamicLINQ method - kendo-ui

My grid won't call my parameterized DataSourceResult methods. It just calls the parameterless one. I've studied this article till my eyes are falling out. What am I missing?
From my javascript controller:
$("#grid").kendoGrid({
dataSource: {
transport: {
read: function (options) {
userService.getGridUserList($.extend(options.data))
.success(function (result) { options.success(result); })
.error(function (result) { options.error(result); });
},
parameterMap: function(options, type) {
return kendo.stringify(options);
}
},
requestStart: function (e) {
},
requestEnd: function (e) {
},
schema: {
data: "data",
total: "total"
},
pageSize: 25,
serverPaging: true,
serverSorting: true,
serverFiltering: true
},
height: 600,
filterable: true,
sortable: true,
pageable: true,
columns: [
{ field: "firstName", title: "First Name" },
{ field: "lastName", title: "Last Name" },
{ field: "email", title: "email" }
]
});
From my C# WebAPI:
//**doesn't get called**
public DataSourceResult GetGridUserList(GetUserGridListInput input)
{
var q = repository.GetAll().OrderBy(t => t.Id);
return q.ToDataSourceResult(input.Take, input.Skip. input.Sort, input.Filter);
}
//**doesn't get called**
public DataSourceResult GetGridUserList(int take, int skip, IEnumerable<Sort> sort, Filter filter)
{
var q = repository.GetAll().OrderBy(t => t.Id);
return q.ToDataSourceResult(take, skip, sort, filter);
}
//**gets called every time**
public DataSourceResult GetGridUserList()
{
var q = repository.GetAll().OrderBy(t => t.Id);
return q.ToDataSourceResult(500, 0, null, null);
}

Turns out I was clobbering the grid parameters in my service call. What I needed to fix it, is to add {} as the first parameter:
userService.getGridUserList({}, $.extend(options.data))

The example uses a POST request, perhaps the grid requires that.
"I'm using a POST since MVC blocks unsecured GETS by default. That's
good since we're going to be needing a POST request structure coming
up shortly."

Related

Grid remote data virtualization with custom transport.read method?

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" }
]
});

Kendo Grid Search ParameterMap

I am not able to get the following to call the web service function. It has something to do with the ParameterMap since if I call a function that does not need parameters (Meditech_MeditechSearchResultsTEST) then I get results. I have logging set up on the Meditech_MeditechSearchResults web service function and can tell it never gets called.
function GetQuery() {
var SearchText;
var URLLink;
SearchText = document.getElementById('QueryID').value;
var FilterSelected;
FilterSelected = document.getElementById('ArchivedResultsSelect').value;
URLLink = URL + 'Meditech_MeditechSearchResults';
var CurrPage = 1;
var Pagesize =10;
try {
if (SearchText != '') {
$(document).ready(function () {
$("#grid").kendoGrid({
attributes: {
"class": "SearchControls"
},
dataSource: {
pageSize: Pagesize,
transport: {
read: {
url: URLLink,
type: "GET",
dataType: "jsonp",
}
},
type: {
data: "odata"
},
parameterMap: function (options) {
var parameters = {
Search: FormatJSONString(SearchText),
FilterValue: FilterSelected,
CurrentPage: CurrPage,
PageSize: Pagesize
}
return parameters;
},
},
columns: [{
field: "View",
title: "",
width: "30px",
align: "center",
template: kendo.template($("#view-template").html())
},
{
field: "Results",
title: "Results",
width: "800px",
template: kendo.template($("#result-template").html())
},
{
field: "Rank",
title: "Rank",
width: "40px",
},
],
height: 500,
width: 900,
scrollable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
error: function(e) {
alert(e.errors);
},
});
});
}
else { alert('Please enter a search text.') }
}
catch(ex) {
alert(ex.description);
}
}
The parameterMap option is part of the transport configuration. Try putting it there. Right now it is ignored.

Kendo Grid renders properly but does not display json data

I have been having a tough time with grids lately, mostly getting them to display properly formatted JSON data that is being fetched from a webservice (which has been checked in VS2013, and JSONLint), if a second set of eyes could please have a look at my solution and tell me whats lacking? I am going bananas!
function SetTelerikGrid() {
// prepare the data object and consume data from web service,...
$.ajax({
type: "GET",
async: false,
url: "http://localhost:38312/SDMSService.svc/GetProductPositionsByLocation/0544",
datatype: "json",
success: function (ProductData, textStatus, jqXHR) {
// populate kendo location grid by data from successful ajax call,...
$("#LocationProductsGrid").kendoGrid({
dataSource: {
data: ProductData, // solution here was: **JSON.parse(LocationData)**
schema: {
model: {
fields: {
Date: { type: "string" },
ProductCode: { type: "string" },
StoreNum: { type: "string" },
ProductQty: { type: "int" }
}
}
},
pageSize: 20
},
height: 550,
scrollable: true,
sortable: true,
filterable: true,
pageable: {
input: true,
numeric: false
},
columns: [
{ field: "Date", title: "Date", width: "130px" },
{ field: "ProductCode", title: "Product Code", width: "130px" },
{ field: "StoreNum", title: "Store Number", width: "130px" },
{ field: "ProductQty", title: "Product Qty", width: "130px" }
]
});
}
});
}
There is a breaking change in ASP.NET Core, related to how the JSON serializer
works
You can probably mitigate this by adding a json option like this:
1:
change
services.AddMvc();
to
services
.AddMvc()
.AddJsonOptions(options => options.SerializerSettings.ContractResolver = new DefaultContractResolver());
OR
2:
public IActionResult Read()
{
// Override serializer settings per-action
return Json(
MyModel,
new JsonSerializerSettings { ContractResolver = new DefaultContractResolver() }
);
}
refrences :
http://www.telerik.com/forums/using-2016-2-630-preview---data-not-displayed#qlHR6zhqhkqLZWuHfdUDpA
https://github.com/telerik/kendo-ui-core/issues/1856#issuecomment-229874309
https://github.com/telerik/kendo-ui-core/issues/1856#issuecomment-230450923
Finally figured it out, the 'ProductData' field - although in perfect JSON format - still required to be parsed as JSON in the datasource configuration, like so,...
Data: JSON.parse(ProductData)

How to prevent the whole grid from refreshing when a single cell data changes in kendo grid?

While we can use virtualization or paging to speed up refreshing, the whole-grid refresh for each data change is not good at all. Is there a way to avoid this?
This gets worse when multiple data changes in the bound objects, the grid gets refreshed for each change, which is not good either.
function PresonDetails(_contactName, _contactTitle, _country, _companyName) {
Object.defineProperties(this, {
"ContactName": {
get: function () {
return this._contactName;
},
set: function (value) {
this._contactName = value;
},
enumerable: true,
configurable: true
},
"ContactTitle": {
get: function () {
return this._contactTitle;
},
set: function (value) {
this._contactTitle = value;
},
enumerable: true,
configurable: true
},
"Country": {
get: function () {
return this._country;
},
set: function (value) {
this._country = value;
},
enumerable: true,
configurable: true
},
"CompanyName": {
get: function () {
return this._companyName;
},
set: function (value) {
this._companyName = value;
},
enumerable: true,
configurable: true
}
});
this.ContactName = _contactName;
this.ContactTitle = _contactTitle;
this.Country = _country;
this.CompanyName = _companyName;
}
(function () {
var details = [];
details.push(new PresonDetails("ContactName1", "ContactTitle", "USA", "MICro"));
var refresh = window.kendo.ui.Grid.fn.refresh;
window.kendo.ui.Grid.fn.refresh = function () {
alert("Grid Refresh");
refresh.call(this,arguments);
}
var $grid = $('#grid');
$grid.kendoGrid({
scrollable: true,
dataSource: details,
groupable: false,
sortable: false,
editable: true,
columns: [{
field: "ContactName",
title: "Contact Name",
width: 200
}, {
field: "ContactTitle",
title: "Contact Title",
width: 250
}, {
field: "CompanyName",
title: "Company Name"
}, {
field: "Country",
width: 150,
}]
});
})();
here is the demo
Preventing the dataBinding event of the grid will stop the refresh:
funnction avoidRefresh(e) {
e.preventDefault();
}
// stop refresh
grid.bind("dataBinding", avoidRefresh);
// allow refresh
grid.unbind(avoidRefresh);

Kendo Grid Will not populate with server side data

I cannot get Kendo Grid to populate from server side data.
I have a grid builder function as as follows:
var build = function (carrier, date) {
var urlBase = 'my base url';
var datasource = new kendo.data.DataSource({
pageSize: 20,
serverPaging: true,
serverFiltering: true,
serverSorting: true,
schema: {
model: {
id: 'Id',
fields: {
StatementDate: { type: "string", editable: false },
CobDate: { type: "string", editable: false },
//lots more fields
Status: { type: "string", editable: false },
Matched: { type: "boolean", editable: true }
}
}
},
transport: {
read: function (options) {
var address = urlBase + '/' + carrier + '/' + date;
$.ajax({
url: address,
type: "POST",
data: JSON.stringify(options.data),
contentType: "application/json",
success: function (result) {
options.success(result);
},
error: function (result) {
options.error(result);
}
});
},
//update function omitted
parameterMap: function (data, operation) {
if (operation == "read") {
return JSON.stringify(data)
}
},
change: function (e) {
var data = this.data();
console.log(data.length); // displays "77"
}
}
});
return datasource;
};
return {
build: build
}
Grid Definition
elem.kendoGrid({
columns: [
{ field: "StatementDate", title: "State Date", width: 125 },
{ field: "CobDate", title: "COB Date", width: 100 },
//lots more fields
{ command: ["edit"], title: " ", width: "85px"}],
resizable: true,
sortable: true,
editable: "inline",
columnMenu: true,
filterable: true,
reorderable: true,
pageable: true,
selectable: "multiple",
change: this.onSelectedRecordChanged,
toolbar: kendo.template($('#' + templateName).html()),
scrollable: {
virtual: true
},
height: 800
});
I trigger the update via a button click. When I look at the response I see the data. Looks good but the grid will not show the data. It has previously worked fine when data was completely client side.
If I break point on the AJAX call back. I see the correct results.
The grid is bound with data bind. The datasource is a property on a viewmodel.
<div id="grid" data-bind="source: dataSource"></div>
At the start of the app. I create view model
var viewModel= kendo.observable(new GridViewModel(...
and bind
kendo.bind($('#grid'), viewModel);
If I look at the datasource attached to the grid, I see data for the page as expected
This has previously worked fine when data was client side.
I have tried using read() on datasource, and refresh() method on grid. Neither seems to work.
Example response content from server
{"Data":[{"Id": //lots more fields, 20 records],"Total":90375,"AggregateResults":null,"Errors":null}
Any help very much appreciated.
I found the cause in datasource schema missing
{ data: 'Data', total: 'Total' }

Resources