Kendo Grid Serverside Paging, Incorrect Parameter Map values - kendo-ui

I'm trying to use the Dynamic Linq Helper libraries from Kendo. The parameter map function on the grid does not have the correct parameters to send to the controller.
The parameterMap options have:
{"take":10,"skip":0,"page":1,"pageSize":10}
but according to the example, it should have take, skip, sort, filter, which is not in the parameterMap function or getting passed to the server.
I'm following the example here
http://www.telerik.com/blogs/kendo-ui-open-sources-dynamic-linq-helpers
And also looked other examples, my grid is set up the same as the others.
The only difference being, this is a Web API single page app, not MVC. However, this shouldn't make a difference in what the Grid class is passing to it's parameterMap function.
What is going on here?
$("#grid").kendoGrid({
dataSource: {
transport: {
read: {
url: "http://localhost/biahost/query/projectStatuses",
dataType: "application/json",
type: "POST",
contentType: "application/json; charset=utf-8"
//data:{}
},
parameterMap: function (options) {
debugger;
//options only contain {"take":10,"skip":0,"page":1,"pageSize":10}
return kendo.stringify(options);
}
},
schema: {
data: "Data",
total: "Total",
model: {
fields: {
NAME: { type: "string" },
CODE: { type: "string" },
STATUS: { type: "string" },
COMMENTS: { type: "string" },
INSERTS: { type: "string" },
UPDATES: { type: "string" },
TOTAL_UPDATES: { type: "string" },
LAST_ACTION_DATE: { type: "string" }
//UnitId: { type: "string" },
//UnitName: { type: "string" }
}
}
},
pageSize: 10,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
filterable: true,
sortable: true,
pageable: true,
columns: projectStatusColumns
});
var projectStatusColumns = [
{
field: 'NAME',
label: 'Res name',
hidden: true,
},
{
field: 'CODE',
label: 'Code'
},
{
field: 'STATUS',
label: 'Status'
},
{
field: 'COMMENTS',
label: 'Comments'
}
,
{
field: 'INSERTS',
label: 'Inserts'
}
,
{
field: 'UPDATES',
label: 'Updates'
}
,
{
field: 'TOTAL_UPDATES',
label: 'Total Updates'
}
,
{
field: 'LAST_ACTION_DATE',
label: 'Last Action Date'
}
];

had the same problem so i looked it up and here i am. You just need to return "options" which contains the parameter map as it is, if you stringify it will become a json object which cannot be defined in a url.
Hope i'm not too late!

Related

Kendo UI Inline grid not receiving Date Fields but other fields value getting in controller

I have used Kendo UI grid with inline editing, all filed received in controller but date field not receiving why?
This is my code, please help me
Grid---
$(document).ready(function() {
$("#orders-grid").kendoGrid({
dataSource: {
type: "json",
transport: {
read: {
url: "#Html.Raw(Url.Action("CustomerList", "Customer"))",
type: "POST",
dataType: "json",
},
create: {
url: "#Html.Raw(Url.Action("CustomerAdd", "Customer"))",
type: "POST",
dataType: "json"
},
update: {
url:"#Html.Raw(Url.Action("CustomerUpdate", "Customer"))",
type: "POST",
dataType: "json"
},
destroy: {
url: "#Html.Raw(Url.Action("CustomerDelete", "Customer"))",
type: "POST",
dataType: "json"
},
},
schema: {
data: "Data",
total: "Total",
errors: "Errors",
model: {
id: "Id",
fields: {
stfName: { editable: true, type: "string", validation: { required: true } },
Id: { editable: false, type: "number" },
stmName: { editable: true, type: "string", validation: { required: true } },
dtdob: { editable: true, type: "Date",format : "dd/MMM/yyyy", validation: { required: true } },
strefName: { editable: true, type: "string", validation: { required: true } },
}
}
},
requestEnd: function (e) {
if (e.type == "create" || e.type == "update") {
this.read();
}
},
error: function(e) {
//display_kendoui_grid_error(e);
// Cancel the changes
this.cancelChanges();
},
pageSize: 10,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
pageable: {
refresh: true,
pageSizes: [10]
}, //scrollable: false,
// dataBound: onDataBound,
sortable: true,
scrollable: {
virtual: true
},
toolbar: ["create"],
editable: {
confirmation: false,
mode: "inline"
},
columns: [
{
field: "Id",
title: "ID",
width: 50
},{
field: "stfName",
title: "First Name",
//attributes: { "class": "upper" },
width: 200
},
{
field: "dtdob",
title: "D.O.B.",
//editor: customDateEditor,
type: "Date",
template: "#=kendo.toString(dtdob,'dd/MMM/yyyy')#",
//template: '<input type="date" name="dtdob" />',
width: 200,
//parseFormats: ["yyyy-MM-dd'T'HH:mm:ss.zz"]
},
{
field: "strefName",
title: "Reference",
width: 200
},
{
command: [{
name: "edit",
text: "Edit"
}, {
name: "destroy",
text: "Delete"
}],
width: 200,
filterable: true
}]
});
var customDateEditor = function (container, options) {
$('<input />')
.appendTo(container)
.kendoDatePicker({
format: "dd/MMM/yyyy"
});
};
});
--model
public partial class tblCustomer
{
public int Id { get; set; }
public string stfName { get; set; }
public DateTime dtdob { get; set; }
}
}
Controller----
public ActionResult CustomerUpdate(tblCustomer model) <-All Value receive in model except date field dtdob
{
}
I have check in firebug there is ajax call and all fields pass properly event date too, but not receiving in controller why?
Regards,
Vinit Patel
Please go through the link given below. It does have couple of solutions for the issue you are fixing. Please revert if the issue persists.
Passing dates from Kendo UI to ASP.NET MVC

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)

Passing KENDO Grid data view to MVC controller

I have an issue sending Telerik Kendo Grid viewdata to MVC Controller. I've tried to make ViewModel etc but i just can't figure this one out.
Here is my code to populate grid:
var grid = $("#grid").kendoGrid({
dataSource: {
data: kontdata.Data,
schema: {
model: {
fields: {
Id: { type: "number", editable: false },
Name: { type: "string" },
Number: { type: "string" },
Info: { type: "string" },
Email: { type: "string" },
Category: { type: "string" },
MarketingAllowed: { type: "number", editable: false },
AddedDate: { type: "date", editable: false }
}
}
},
pageSize: 20
},
height: 500,
scrollable: true,
toolbar: kendo.template($("#template").html()),
serveroperation: false,
sortable: true,
editable: { mode: "incell", confirmation: false },
selectable: "row",
filterable: true,
pageable: true,
columns: [
{
field: "Name",
title: "Nimi"
},
{
field: "Number",
title: "Numero"
},
{
field: "Info",
title: "Info"
},
{
field: "Email",
title: "Email"
},
{
field: "Category",
title: "Kategoria"
},
{
field: "MarketingAllowed",
title: "Markkinointikielto",
width: "160px"
},
{
field: "AddedDate",
title: "LisÀttyPvm",
format: "{0:dd/MM/yyyy HH:mm:ss}"
},
{
command: [
{ name: "destroy", text: "Poista", width: "70px" }
]
}
]
}).data("kendoGrid");
And here is the code to post grid view data:
function tallennagridi() {
var griddata = $("#grid").data("kendoGrid");
$.ajax(
{
type: 'POST',
url: '/Contactlist/Savegriditems/',
dataType: 'json',
contentType: "application/json; charset=utf-8",
data: JSON.stringify({ griditems: griddata.dataSource.view() }),
success: function (result) {
alert('success');
}
});
};
And here is the controller:
public JsonResult Savegriditems([DataSourceRequest] DataSourceRequest request, CustomerViewModel griditems)
{
var joku = griditems;
return Json(joku, "Content-type: text/x-json; charset=utf-8", JsonRequestBehavior.AllowGet);
}
Any help would be appreciated.
Br. Eero
My mistake, CustomerViewModel gridItems should have been:
CustomerViewModel[] gridItems;

Kendo grid - Posted Edit is null at Controller

Using kendo grid with Popup edit. I verified the data is posted from the view (I can see it in the Network Tab, here is a look at it:
{"LetterId":12,"BodyText":"This is a test","CreatedDate":"07/31/2013","CreatedBy":"Grace Rodgers","ModifiedDate":"07/31/2013","ModifiedBy":"Grace Rodgers","PersonId":18,"FirstName":"Jason","LastName":"Bigby"}:
However, I have a breakpoint at the json method in the controller, and when hovering over the model parameter, in shows all fields are null. Here is the first couple lines of the controller code:
[HttpPost]
public JsonResult JsonEditLetter(LetterViewModel model)
{
and the kendo code in the view:
var PersId = $("#PersonId").val();
var ds_LettersGrid = new kendo.data.DataSource({
transport: {
read: {
url: '#Url.Action("JsonGetLetterList", "Letter")/' + PersId,
dataType: 'json'
},
update: {
url: '#Url.Action("JsonEditLetter", "Letter")',
dataType: 'json',
type: "POST"
},
parameterMap: function (data, type) {
if (type == "update") {
data.models[0].CreatedDate = kendo.toString(new Date(data.models[0].CreatedDate), "MM/dd/yyyy");
data.models[0].ModifiedDate = kendo.toString(new Date(data.models[0].ModifiedDate), "MM/dd/yyyy");
return kendo.stringify(data.models[0]);
}
},
},
batch: true,
schema: {
model: {
id: "LetterId",
fields: {
BodyText: { editable: true },
CreatedDate: { editable: false, type: "date"},
ModifiedDate: { editable: false, type: "date" },
CreatedBy: { editable: false},
ModifiedBy: { editable: false },
PersonId: { defaultValue: PersId }
}
}
},
pageSize: 10
});
$(document).ready(function () {
$("#letter-list").kendoGrid({
dataSource: ds_LettersGrid,
sortable: true,
filterable: { extra: false, operators: {
string: { startswith: "Starts with", eq: "Is equal to" }
}
},
pageable: true,
columns: [{
field: "BodyText", title: "Letter Content", width: 400, filterable: false
}, {
field: "CreatedBy", title: "Author", filterable: false
}, {
field: "CreatedDate", title: "Original Date", format: "{0:g}", filterable: { ui: "datetimepicker" }
}, {
field: "ModifiedBy", title: "Edited By", filterable: false
}, {
field: "ModifiedDate", title: "Editted On", format: "{0:g}", filterable: { ui: "datetimepicker" }
}, {
command: [ "edit" ], title: "", width: "110px"
}],
height: "300px",
resizable: true,
editable: "popup"
});
});
You need to add default value to your id field , becouse the client side generates new id value, what you already have in server autoincrement generated id value and its shooting error
schema: {
model: {
id: "LetterId",
fields: {
LetterId: {defaultValue: 16000}
BodyText: { editable: true },
CreatedDate: { editable: false, type: "date"},
ModifiedDate: { editable: false, type: "date" },
CreatedBy: { editable: false},
ModifiedBy: { editable: false },
PersonId: { defaultValue: PersId }
}
}
}
I figured it out, it wanted a specific content type. The type being passed was a form, but the controller wanted json. So the Transport now looks like:
update: {
url: '#Url.Action("JsonEditLetter", "Letter")',
dataType: 'json',
>>>>>>>> contentType: "application/json",
type: "POST"
},

Detecting server-side error when editing or creating Kendo Grid entries

I have an editable Kendo Grid to manage (create/modify) user accounts. Editing is done in a popup (versus inline or batch). I have client-side validation to help ensure that valid data is provided to the server, however I cannot figure out how to handle the response from the server in the event that the create/update fails server-side. I'm not talking 'failed' as in the request failed with a HTTP 404 or 500, for example; I'm talking failed as in the script on the server didn't like something about the data and refuses to oblige.
Can someone please show me how I can accomplish this? What I would like to be able to do is after the update is sent to the server, wait for the response. If the response says everything is OK, then great. If the response says something didn't go so well, I'd like to be able to (A) keep the popup editing window open and populated and (B) provide feedback to the user regarding the reason for the rejection. The data should not be committed to the grid unless the response says everything is OK. Likewise, the edit popup should remain open until the server says OK.
I'm flexible with how the server's response should be formatted, as long as I can accomplish what I want.
Before you direct me to the Kendo official API documentation, I am already well aware of it and refer to it daily. However, to say the least, it is incomplete and I cannot find anything relating to this topic. If you have found something in the documentation that you think could help me then by all means point me to the documentation =)
As requested, below is the code I have for creating the grid.
$("#kendo_user_grid").kendoGrid({
columns: [{
title: "Last name",
field: "lName"
},{
title: "First name",
field: "fName"
},{
title: "Business unit",
field: "businessUnit"
},{
title: "Username",
field: "loginId"
},{
title: "Email address",
field: "email"
},{
title: "Phone",
field: "phone"
},{
title: "Address",
field: "address"
},{
title: "City",
field: "city"
},{
title: "State",
field: "state"
},{
title: "Zip code",
field: "zipcode"
},{
title: "Country",
field: "country"
},{
title: "Time zone",
field: "timezone"
},{
title: "Privileges",
field: "privs"
},{
command: ["edit","destroy"],
title: " "
}],
scrollable: false,
dataSource: {
transport: {
read: {
url: "manageUsers.phtml",
data: { mode: "fetch" },
dataType: "json",
type: "POST"
},
update: {
url: "manageUsers.phtml",
data: { mode: "update" },
type: "POST"
},
destroy: {
url: "manageUsers.phtml",
data: { mode: "destroy" },
type: "POST"
},
create: {
url: "manageUsers.phtml",
data: { mode: "create" },
type: "POST"
},
batch: false
},
schema: {
data: "records",
total: "total",
model: {
id: "userId",
fields: {
userId: { editable: false, nullable: true },
lName: { type: "string", editable: true, validation: { required: true } },
fName: { type: "string", editable: true, validation: { required: true } },
businessUnit: { type: "string", editable: true, validation: { required: true } },
loginId: { type: "string", validation: { required: true } },
email: { type: "string", validation: { required: true } },
phone: { type: "string" },
address: { type: "string" },
city: { type: "string" },
state: { type: "string" },
zipcode: { type: "string" },
country: { type: "string" },
timezone: { type: "string" },
privs: { type: "string" }
}
}
},
pageSize: 20,
serverPaging: false,
serverFiltering: false,
serverSorting: false
},
filterable: true,
sortable: true,
pageable: true,
editable: {
mode: "popup",
template: kendo.template($("#kendo_edit_user_template").html())
},
toolbar: ["create","save","cancel"]
});
There are two point to keep in mind:
Schema.errors The field from the server response which contains server-side errors.
error is an event that will be fired if there was an error.
Basically you need to:
add to your schema an errors definition that provides access to the status sent back from the server.
Implement error event handler that, for example, restore previous value.
If your server returns the error message in a field called myError then you would have something like:
schema: {
errors: "myError",
data: "records",
total: "total",
model: {
id: "userId",
fields: {
userId: { editable: false, nullable: true },
lName: { type: "string", editable: true, validation: { required: true } },
fName: { type: "string", editable: true, validation: { required: true } },
...
or:
schema: {
errors: function(response) {
if (response.myError && response.myError !== "OK") {
return response.myError;
}
return false;
},
data: "records",
total: "total",
model: {
id: "userId",
fields: {
userId: { editable: false, nullable: true },
lName: { type: "string", editable: true, validation: { required: true } },
fName: { type: "string", editable: true, validation: { required: true } },
...
and the event would be:
dataSource: {
error : function (e) {
if (e.errors !== false) {
alert("Error: " + e.errors);
// This will cancel any change done
this.cancelChanges();
}
},
transport: {
read: {
url: "manageUsers.phtml",
data: { mode: "fetch" },
dataType: "json",
type: "POST"
},
EDIT : If what you want is to keep the popup open you should do:
dataSource: {
error : function (e) {
if (e.errors !== false) {
alert("Error: " + e.errors);
// This will keep the popup open
grid.one("dataBinding", function (e) {
e.preventDefault(); // cancel grid rebind
});
}
},
transport: {
read: {
url: "manageUsers.phtml",
data: { mode: "fetch" },
dataType: "json",
type: "POST"
},
Where I bind to databinding event just once using jQuery.one

Resources