I'm having quite a few small issues with implementing a remote transport using Kendo Grid, with Node/Express backend. I basically want to build a simple backend catering to Kendo. I made a simple table on the server called Todo, with two fields: TodoID and TodoItem. I'm using this just to try and create a REST based CRUD using Kendo Grid.
Here's my datasource and grid definition:
var dataSource = new kendo.data.DataSource({
autoSync: true,
batch: true,
schema: {
model: {
id: "TodoID",
TodoID: {editable: false, nullable: true}
}
},
transport: {
create: {
url: "http://localhost:3000/todo/create",
contentType: 'application/json',
dataType: "json"
},
read: {
url: "http://localhost:3000/todo/read",
contentType: 'application/json',
dataType: "json"
},
update: {
url: "http://localhost:3000/todo/update",
contentType: 'application/json',
dataType: "json"
},
destroy: {
url: "http://localhost:3000/todo/delete",
contentType: 'application/json',
dataType: "json"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
}
});
And here's the grid:
$("#grid").kendoGrid({
dataSource: dataSource,
height: 550,
filterable: true,
sortable: true,
pageable: true,
editable: "inline",
toolbar: ["create"],
columns: [{
field: "TodoID",
title: "ID",
filterable: false
}, {
field: "TodoItem",
title: "Item",
filterable: false
}, {
command: ["edit", "destroy"], title: " ", width: "250px"
}]
});
Read and Update are working fine on both client and server. Delete and Create are odd.
1. When I click delete button, the REST method on server is called twice. Why?
I searched and looked into bath, auto sync, results I'm returning, etc. but can't figure out why. Here is the code on the server:
router.get('/delete', function(req, res, next) {
var models = JSON.parse(req.query.models);
connection.query('DELETE from Todo WHERE TodoID =' + models[0].TodoID + ';', function(err, results){
if(err){
console.log(err);
}
else{
console.log(results);
res.status(200).json(models);
}
});
});
And here is the server logged messages (two of them one after another):
OkPacket {
fieldCount: 0,
affectedRows: 1,
insertId: 0,
serverStatus: 2,
warningCount: 0,
message: '',
protocol41: true,
changedRows: 0 }
GET /todo/delete?models=%5B%7B%22TodoID%22%3A1%2C%22TodoItem%22%3A%22Item+1%22%7D%5D 200 2793.546 ms - 34
OkPacket {
fieldCount: 0,
affectedRows: 0,
insertId: 0,
serverStatus: 2,
warningCount: 0,
message: '',
protocol41: true,
changedRows: 0 }
GET /todo/delete?models=%5B%7B%22TodoID%22%3A1%2C%22TodoItem%22%3A%22Item+1%22%7D%5D 304 1615.503 ms - -
2. The second issue is when I click "Add new record" in the grid, it immediately calls my server side Create route. I setup the ID and return that, and the Grid updates, but it's not in edit mode. What I want is click Add and then it let's me edit the row in the grid and then only calls create when done, does nothing if cancelled.
Here is the server side code for create (although I believe this should be called until after the record is added to the grid).
router.get('/create', function(req, res, next) {
connection.query('INSERT INTO Todo (TodoItem) VALUES ("New item");', function(err, results){
if(err){
console.log(err);
}
else{
res.status(200).json([{ TodoID: results.insertId }]);
}
});
});
What do I need to do on the client side to let the grid editing complete the new item before it calls create on server? Seems like if I disable auto sync it can work they way I want, but then the other operations are broken.
Thanks,
Brett
$("#grid").kendoGrid({ toolbar: ["excel"], excel: { fileName: "Kendo UI Grid Export.xlsx", proxyURL: "https://demos.telerik.com/kendo-ui/service/export", filterable: true}, dataSource: { type: "odata", transport: { read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"}, schema:{ model: { fields: {UnitsInStock: { type: "number" },ProductName: { type: "string" },UnitPrice: { type: "number" },UnitsOnOrder: { type: "number" },UnitsInStock: { type: "number" }}}}, pageSize: 7, group: { field: "UnitsInStock", aggregates: [{ field: "ProductName", aggregate: "count" },{ field: "UnitPrice", aggregate: "sum"},{ field: "UnitsOnOrder", aggregate: "average" },{ field: "UnitsInStock", aggregate: "count" }]}, aggregate: [{ field: "ProductName", aggregate: "count" },{ field: "UnitPrice", aggregate: "sum" },{ field: "UnitsOnOrder", aggregate: "average" },{ field: "UnitsInStock", aggregate: "min" },{ field: "UnitsInStock", aggregate: "max" }]}, sortable: true, pageable: true, groupable: true, filterable: true, columnMenu: true, reorderable: true, resizable: true, columns: [{ field: "ProductName", title: "Product Name", aggregates: ["count"], footerTemplate: "Total Count: #=count#", groupFooterTemplate: "Count: #=count#" },{ field: "UnitPrice", title: "Unit Price", aggregates: ["sum"] },{ field: "UnitsOnOrder", title: "Units On Order", aggregates: ["average"], footerTemplate: "Average: #=average#", groupFooterTemplate: "Average: #=average#" },{ field: "UnitsInStock", title: "Units In Stock", aggregates: ["min", "max", "count"], footerTemplate: "Min: #= min # Max: #= max #", groupHeaderTemplate: "Units In Stock: #= value # (Count: #= count#)" }]});
$('#grid').data('kendoGrid').dataSource.read({
"CusCode": $("#CusCode").val(), "FromDate": $("#FromDate").val(), "ToDate": $("#ToDate").val()
, "IsAllEquity": $("[name=rbStock]:checked").val(), "EquitySymbol": $("#EquitySymbol").val()
, "IsAllDerivative": $("[name=rbDerivative]:checked").val(), "Instrument": $("#Instrument").val()
});
$("#grid").data("kendoGrid").refresh();
}
Export Excel But data was lost when I called search() ( Use initialize parameter not in search() )
Hi you have a bug, in the chart i write label in Hebrew(RTL language) and it write the label text in reverse,
תפוח -> חופת
לימון -> ןומיל
It is write the label like mirror
Hi, I'm working with DialogFlow and Kendo UI for JQuery and ASP.NET to build a chatbot. I have an issue with the RenderAttachment method. No matter what value (carousel or list or anything else) I give to the AttachmentLayout parameter, the messages are displayed with a list format (Vertical aligned). Is it normal? If not, please can ou help me?
encl: my code
Hi
I'm using kendo stock chart to plot the temperature data of each device. Let's say If I want to plot 5 devices data, I push data to kendo DataSource Object (format of data point: {device_id: <temperature, date: <date>}) as soon as I get data from the device. Initially, I had a limit of 5 devices per a chart but again got a requirement of putting 128 devices. At any point, I used to maintain 10 data points on the chart by removing older data points. But I have increased the limit to 100 data points when plotting 128 device data. After making this change the browser was unresponsive and finally crashes.
1. Is this because of the continuous refreshing of the chart (after pushing the data point, I update the chart using the refresh method)?
2. Or stock chart could not handle more data points?
How to handle updating the chart with continuous data from device efficiently. Could someone provide me with the best practice to do this?
Hello,
We have a few grids on a page with "filterable: {mode: row}" enabled. This option causes to render a single grid ~700-1000 ms, without this option it takes 10-20 times faster.
Here is example that demonstrates the issue
https://dojo.telerik.com/ebavEhos
First grid filterable option enabled, the second grid option is not set.
Below the grid, you'll see the time to init each grid.
Are there any ways to improve that performance?
Thanks,
Max
Hi,
I want to make a cell editable on double click instead of single click. I know this can be achieved by jQuery. But still do we have any option in kendo grid.
Thanks in Advance,
Sam