Get all updated and newly created models together in a single url in server side - kendo-ui

I am Using Kendo grid with batch edit. I want to get all Modified and newly created models together in a single url.
Say I have created 3 new row and also updated/edited 2 existing row in grid. Data source makes a HTTP request for every CRUD operation . The changed data items are sent by default as models and hit URL as I declared in “create” and update (transport) section of transport in datasource.I am getting models those are Modified (updated) in URL declared for ‘update’ in server side. And also find models those are newly created in URL declared for ‘create’….But I want to get all Modified and newly created models together in a single url.Is it possible to get all of the (both all modified and newly created) in a single URL?
Here is my Code for better understand.
$("#grid").kendoGrid({
dataSource: {
transport: {
read: {
url: "LoadPerMeterCostsGridData",
type: "POST",
contentType: "application/json",
dataType: "json"
},
update: {
url: "UpdatePerMeterCostsData",
contentType: "application/json",
type: "POST",
dataType: "json"
},
create: {
url: "CreatePerMeterCostsData",
contentType: "application/json",
type: "POST",
dataType: "json",
},
parameterMap: function (data, operation) {
if (operation != "read") {
return kendo.stringify(data.models);
}
}
},
serverPaging: false,
pageSize: 10,
batch: true,
schema: {
model: {
id: "PerMeterCostID",
fields: {
PerMeterCostID: { editable: false },
DrillBitSizeID: { editable: true },
Form: { editable: true },
To: { editable: true },
PerMeterCost: { editable: true },
ContractID: { editable: false }
}
},
errors: "Errors"
},
error: function (e) {
alert(e.errors + "grid");
}
},
editable: true,
pageable: {
refresh: true,
pageSizes: true
},
toolbar: ["create",
"save",
"cancel"
],
sortable: true,
autoBind: false,
columns:
[
{ field: "PerMeterCostID", width: 50, hidden: true, title: "ID" },
{ field: "DrillBitSizeID", width: 100, hidden: true, title: "Consumable" },
{ field: "Form", width: 100, title: " Form " },
{ field: "To", width: 50, title: "To" },
{ field: "PerMeterCost", width: 100, title: "Per Meter Cost" },
{ field: "ContractID", width: 100, hidden: true, title: "ContractID" },
{ command: ["destroy"], title: "Action", width: "175px" }
]
});
$("#grid ").data("kendoGrid").dataSource.read();

You can set each CRUD action to use the same url, but using the same url: property for both Create and Update. However you will still minimally get TWO requests (albeit to the same url)
update: {
url: "UpdateOrCreateAction",
},
create: {
url: "UpdateOrCreateAction",
},
this is because internally the dataSource pushes all "new" items as defined by "items an Id Field set to the default value for the field" in an array, and all items with dirty set to true into a different array. Kendo then sends both arrays back to the server according to the url for the action. (something like this i'd imagine)
if ( model.isNew())
createdPile.push(model)
else if ( model.dirty === true)
updatedPile.push(model)
//send both piles to the server
The "easiest" way to avoid this is to make sure your new objects explicitly set their id fields to something other then the default, and set the models dirty prob to true.
you could do this by using the edit event to override the actions
grid.bind('edit', function(e){
if ( e.model.isNew() ) {
e.model.id = -1; //
e.dirty = true;
console.log(e.model.isNew()) // should be false
}
})
this is probably an extreme amount of overkill to avoid one additional request, and prone to error. I would advise that you use the same url for both actions, and just accept that you will get the created items in one batch, and the updated in another.

Related

kendu ui grid after server update cells stay marked as "dirty"

i based this code on kendu grid ui code demo.
when ever i add a new record, it gets sent to the server side (c# handler)
and from there i convert json to object.. and so on.
the operation is successful and the request that kendu made is done with status code 200.
but for some reason the cells that were changed are still marked as "dirty" .
as a result of this any new row is sent with the first attempt since it thinks it needs to be sent again. here is my code:
jQuery("#getallDataBTN").click(
function () {
$("#grid").kendoGrid({
dataSource: {
transport: {
read: {
url: "/WallEHandler.ashx?command=getallPermissions",
dataType: "json"
},
create: {
url: "/WallEHandler.ashx?command=addPermission",
dataType: "json",
type:"post"
},
update: {
// url: "/WallEHandler.ashx?command=editPermission",
// dataType: "jsonp"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
},
schema: {
model: {
id:"Method",
fields: {
Method: { type: "string" , validation: { required: true }},
ServiceType: { type: "string" ,validation: { required: true }},
Role: { type: "string" ,validation: { required: true }},
Permission: { type: "string" ,validation: { required: true }},
ExtendedData: { type: "string" }
}
}
},
pageSize: 100,
batch: true,
},
height:850,
scrollable: true,
sortable: true,
filterable: true,
pageable: {
input: true,
numeric: false
},
columns: [
"Method",
"ServiceType",
"Role",
{ field: "Permission", editor: categoryDropDownEditor },
"ExtendedData"
],
navigatable: true,
toolbar: ["create", "save", "cancel"],
editable: true
//selectable: "row",
//save: function(e)
// {
//alert("Save");
// }
});
}
);
is there maybe somthing i need to return from the server to tell the grid that it was successful?
thanks for any help
i figured it out, it seems that the response of a successful request must return the same object as sent. (must be some sort of inside validation by kendu).
c#:
Response.Write(context.Request.Form["models"]);

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)

Kendo UI validator fails in grid (message doesn't disappear)

I have to validate some data in kendoUI grid widget.
Seems there is a bug in validator component.
Steps to reproduce:
0. Open and run http://jsfiddle.net/Upw9j/2/
here's the code (some part is missing here due to SO limitations):
$(document).ready(function () {
var crudServiceBaseUrl = "http://demos.telerik.com/kendo-ui/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/Products/Update",
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl + "/Products/Destroy",
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl + "/Products/Create",
dataType: "jsonp"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
},
batch: true,
pageSize: 20,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: {
validation: {
required: true,
productnamevalidation: function (input) {
if (input.is("[name='ProductName']") && input.val() != "") {
input.attr("data-productnamevalidation-msg", "/^\d{1,}$/");
return /^\d{1,}$/.test(input.val());
}
return true;
}
}
},
UnitPrice: { type: "number", validation: { required: true, min: 1} },
Discontinued: { type: "boolean" },
UnitsInStock: { type: "number", validation: { min: 0, required: true} }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 430,
toolbar: ["create"],
columns: [
"ProductName",
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "100px" },
{ field: "UnitsInStock", title: "Units In Stock", width: "100px" },
{ field: "Discontinued", width: "100px" },
{ command: ["edit", "destroy"], title: " ", width: "172px"}],
editable: "inline"
});
});
Click Edit at any row
Set the cursor on ProductName field, input "2s" (without quotes), press Tab
The tooltip will appear, saying "/^d{1,}$/" (it's a RE, which is matched against field value)
Press Shift+Tab, input "2" (w/o quotes), press Tab, message will disappear.
Repeat steps 3-4 several times. After 2-3 iterations you'll find that message doesn't disappear when field contains valid value. "Update" button behaves correctly.
Is it really a bug or am I doing something wrong? How to work it around?
Yes, this is a bug. I don't know where the official bug tracking page is, but this is a forum thread that details more precisely what's happening: Kendo UI Error on Grid Custom Validation
Basically, when the custom validation fails the input, the datasource model is not updated. So when you re-enter the same (and correct input), it checks against the last correct value, and because it's the same, the validation doesn't fire. In your case, you can verify that if you change the numbers everytime, it still works (2s -> 2 -> 2s -> 3 -> 2s -> 4 etc... this works)
You can also reproduce the custom validation bug right on their demo page. Change Chai to chai to Chai again and the message will still show.
Telerik hasn't fixed it yet and I'm not sure of any easy fixes. You can try to update the data model yourself in the validator function, but this is potentially bad as it gives the user the ability to save bad input into your back end.
Personally (and unfortunately), I just avoided custom validation altogether and ended up using server side validation.

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' }

Kendo UI Grid Repeat the request to the server error

I do not know how to describe the specifics, you can see an error in this video:
http://www.youtube.com/watch?v=D6NPd-j2erg&feature=youtu.be
And this is the code I use:
$(document).ready(function () {
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "/customer/get",
dataType: "json",
type: "POST"
},
update: {
url: "/customer/edit",
dataType: "json",
type: "POST"
},
destroy: {
url: "/customer/delete/",
dataType: "json",
type: "POST"
},
create: {
url: "/customer/add",
dataType: "json",
type: "POST"
}
},
batch: false,
pageSize: 20,
serverPaging: true,
serverFiltering: true,
serverSorting: true,
schema: {
data: "Data",
total: "Total",
model: {
id: "CustomerId",
fields: {
CustomerId: { editable: false, nullable: true },
Name: { validation: { required: true } },
Code: { type: "string", editable: false }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
height: 430,
filterable: true,
sortable: true,
pageable: {
refresh: true,
pageSizes: [10, 20, 30],
buttonCount: 10
},
toolbar: ["create"],
columns: [
{ field: "Name", title: "Name" },
{ field: "Code", title: "CODE", width: "100px" },
{ command: ["edit", "destroy"], title: " ", width: "200px" }],
editable: "popup"
});
});
Do I have made any mistake?
I have added the Kendo Ui library following:
<script src="/Scripts/kendo/2013.1.319/jquery.min.js"></script>
<script src="/Scripts/kendo/2013.1.319/kendo.all.min.js"></script>
<script src="/Scripts/kendo/2013.1.319/kendo.aspnetmvc.min.js"></script>
<script src="/Scripts/kendo.modernizr.custom.js"></script>
Indeed there is a breaking change with the new version of jQuery which affects the Kendo Q1 2013 version 2013.1.319
http://jquery.com/upgrade-guide/1.9/#jquery-ajax-returning-a-json-result-of-an-empty-string
Since the empty result returned from the server in case everything is executed properly on the server side - the error event is rised because the empty result is not valid json.
To work-around this I would suggest you to return empty array from the server.
For the ASP.NET users which use the Extensions they can use:
return Json(new object[0].ToDataSourceResult(request,ModelState));
Basically a valid result from the server after update/delete operations should be similar to this one:
{"Data":[],"Total":0,"AggregateResults":null,"Errors":null}
This will be resolved internally by the ToDataSourceResult extension for ASP.NET MVC users with the next internal build (we will most likely add it tomorrow) and it will also be added to the breaking changes/troubleshooting sections of the documentation.

Resources