Questions on Kendo UI for jQuery Forum

3 answers

124 views

en-CA cultures was wrong at grid

Hi all, Please help me to fix issue. Data display in grid is not correctly. Time always is AM not PM

(Ex: 2018-08-14 1:00:00 PM
instead 2018-08-14 1:00:00 AM )

Globalization

answered on 22 Aug 2018

5 answers

224 views

[Solved] Slider on mobile (touch) devices

Hello, one would expect the slider to change when dragging the slider handle on a touch device. Does the widget not support touch/drag gestures in mobile devices?

Thanks,
Bernd

Slider

answered on 21 Aug 2018

2 answers

244 views

Template filter for boolean field not working

Hi,

I use the following code for all my boolean fields. Example :

{ field: "L_NEW", title: "Nouveau", template: kendo.template('#= L_NEW ? "Oui" : "Non" #'),

filterable: { messages: { isTrue: "Oui", isFalse: "Non" } }}

For one of them, it's definitly not working. I get standard behavior, see attachment.

I have other screens working perfectly with the same code. I checked all I can checked.

The only idea is a problem with the field name ? This is the only difference I can see with other cases.

Thanks.

Grid

answered on 21 Aug 2018

5 answers

675 views

Grid Row Reordering issue

Hi

I am working on reordering row using drag and drop functionality for that I have implemented the code from the jsFiddle (http://jsfiddle.net/UsCFK/) successfully but it seem work like swapping between two rows.

My requirement is different if user drop any specific row it should be place on that location and other location gets modified accordingly for example I have 6 rows,
1
2
3
4
5
6

dragged 2nd row and drop on between 5th and 6th row, now order become
1
3
4
5
2
6
Right now this is not working as per jsFiddle library.

There is a way to do this?

Thanks-
Atul K.
-------------------------------------------
Build Relationship Dynamically

Grid

answered on 21 Aug 2018

2 answers

227 views

Remote Transport CRUD Implementation Q&A

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

Data Source

answered on 21 Aug 2018

8 answers

429 views

Problem Export Excel

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

function search() {

$('#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() )

Grid

answered on 21 Aug 2018

1 answer

175 views

Text in reverse on rtl languages

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

Charts

answered on 21 Aug 2018

2 answers

163 views

[Solved] Problem with AttachmentLayout

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

Chat

answered on 21 Aug 2018

3 answers

187 views

Data source with lots of series data

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?

Charts

answered on 21 Aug 2018

3 answers

1.1K+ views

[Solved] FilterMenuInit Event Not Fired

I seem to be experiencing an issue with the FilterMenuInit event. I am building and initializing my Grid within a razor view and then binding the events to the grid after initialization.

The problem i am seeing is that the FilterMenuInit is never getting triggered if ColumnMenu(true) is set. If i remove ColumnMenu(true) or set it to false the event is triggered as expected.

I am unsure if this is a bug or if it is something i have configured wrongly.

Grid

answered on 21 Aug 2018