Hi All,
I am working on grid filter and I meet such a problem. The type of field "status" is string and it will return 0 for Female and 1 for Male. I use a template to show "Male" or "Female" instead of "0" or "1" respectively in grid. However, the filter doesn't work because it only receives "0" or "1" and "Female" or "Male" will show nothing in grid. The code is below.
{ 'field': 'status' , 'title': 'Gender', 'width': 110, 'template': "#= status === '1' ? 'Male' : 'Female' #", }
I wanna use filter to accept "Male" or "Female", or create a multiple selection, how should I make it? Thanks for your help.
James
I want to use pagination to display data, but it won't be in a grid form, I would just show some documents in a div, but still want to be able to paginate - i.e. request html for n-th page.
Is this possible?
Hi,
I spent days about that without finding any solution.
The case is simple :
I have a Grid using virtual scrolling and a "nav toolbar" with buttons : "First, Previous, Next, Last".
The nav toolbar purpose is to navigate through the records contained in the grid.
Note that the grid itself is in a kendo TabStrip but at this point, I use the nav toolbar only when the grid is visible. Later, I'll need to resync the grid if the user use the toolbar when the tab ontaining the grid is hidden, but it's another story.
I tried several approaches, here is the last.
Working code for "First" button : In any case, I get the first record selected at the top of the grid
first : function () {
if(oTab.oGrid.dataSource.page() != 1){
gotoFirstRow=true; // => the select will occur in dataBound event
oTab.oGrid.dataSource.page(1);
}
else {
oTab.oGrid.select("tr:eq('0')");
}
}
In databound this code works, simple :
...
if (gotoFirstRow){
gotoFirstRow=false;
oTab.oGrid.select("tr:eq('0')");
}...
The same kind of code works for the "Last" button.
For the "Next" (and "Prev") button, it works untill the grid needs to load data :
next : function () {
// The uidNext is set in change event : When a record is selected, I populate
// uidCurrent/idproCurrent for the current record
// uidNext/idproNext for the next record if any (or null if no more record)
// uidPrev/idproPrev for the previous record if any (or null if no more record)
// idpro is a unique field idnetifier all records have
if (typeof uidNext == "undefined"){ // For example when the current selected record is the last one
return;
}
idproToSelect=idproNext; // => So the select will occur in dataBound event.
oTab.oGrid.select("tr[data-uid='"+uidNext+"']");
// Now trying to put the selected record at the top of the grid. The goal is that if user use the nav bar, the grid always presents the
// record at the top
var scrollContentOffset = oTab.oGrid.element.find("tbody").offset().top;
var selectContentOffset = oTab.oGrid.select().offset().top;
var distance = selectContentOffset - scrollContentOffset;
oTab.oGrid.wrapper.find(".k-scrollbar-vertical").scrollTop(distance);
}
When I use scrollTop, if Kendo needs more records, it loads them. So I continue the process in dataBound event :
A this point, nothing works at all. This this the code in databound event:
if (idproToSelect != null){
oTab.oGrid.element.find("td[data-field='idpro']").each(function(i, item) {
if($(item).html() == idproToSelect) {
// When I found it, I get the uid in order to select the row
uidToSelect=$(item).parent().attr('data-uid');
}
});
// The row is selected
oTab.oGrid.select("tr[data-uid='"+uidToSelect+"']");
// RAZ
uidToSelect=null;
idproToSelect=null;
// Now trying to put selected row at the top of the grid : not working
var scrollContentOffset = oTab.oGrid.element.find("tbody").offset().top;
var selectContentOffset = oTab.oGrid.select().offset().top;
var distance = selectContentOffset - scrollContentOffset;
oTab.oGrid.wrapper.find(".k-scrollbar-vertical").scrollTop(distance);
}
The problem i that grid nehavior becomes erratic, the scroll position is not right, so most of the time, I think the right record is selected, but it isn't showed. I suspect a problem with scrollTop when used form databound event.
I have a check box and kendo switch,i want the switch to be disabled by check the checkbox and enabled by un-check the checkbox,i think 4 years back this was a question and as it was answered at the time,should be able to do so,any way here is the code:
<input type="checkbox" id="eq1" class="k-checkbox">
<label>Crew Present:</label><input type="checkbox" id="notifications-switch" aria-label="Notifications Switch" disabled="disabled" />
<label>Grid Loss:</label><input type="checkbox" id="notifications-Grid" aria-label="Notifications Switch" disabled="disabled" />
here is the JS:
$(function () {
$("#notifications-switch").kendoMobileSwitch();
//$("#notifications-Grid").kendoMobileSwitch();
});
$("#eq1").change(function () {
debugger;
$("#notifications-Grid").prop("disabled", !$(this).is(":checked"));
});
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 )
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
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.
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() )