My kendo grid datasource contains a field "data", So the grid is displayed is blank. Here is telerik link
Can somebody tell me how to fix this? I don't have option to change column name as something else in the project I'm working
var data = [{data:"test",attribute:"my title"},{data:"test",attribute:"my title"}];
var grid = $("#grid").kendoGrid({
dataSource: data,
columns: [
{field: 'data', title: 'Data'},
{field: 'attribute', title: 'Attribute'}
]
}).data("kendoGrid");
});
Define it in schema model, something like this:
var data = [{data:"data 1",attribute:"my title"},{data:"data 2",attribute:"my title"}];
var grid = $("#grid").kendoGrid({
dataSource: {
data: data,
schema: {
model: {
fields: {
foo: { from: "data" }
}
}
},
},
columns: [
{field: 'foo', title: 'Data'},
{field: 'attribute', title: 'Attribute'}
]
}).data("kendoGrid");
Working example: Schema model
Related
I want to use 2 or more buttons in one field like Kendo Grid by using custom command in TreeList but I could not do that. Does anyone have a solution?
You just add an array of buttons to the column command property:
$("#treeList").kendoTreeList({
columns: [
{ field: "name" },
{
command: [
{
name: "Cust1",
text: "Custom1",
click: function(e) {
alert("Custom1");
}
},
{
name: "Cust2",
text: "Custom2",
click: function(e) {
alert("Custom2");
}
},
]
}
],
editable: true,
dataSource: dataSource
});
DEMO
I'm quite new using kendo grids.
So far I've managed to do a few stuff and got a workaround for all my problems.
I have a grid with 2 columns.
One column is a product code that the user should enter, and the other is product quantity that should be filled automatically after the user enter the product code. This should be done on change event.
The product quantity is obtained by a service.
So far I have the following code:
var dataSource = new kendo.data.DataSource({
batch: false,
autoSync: false,
data: [],
pageSize: 20,
schema: {
model: {
id: "ProductID",
fields: {
ProductCode: { type: "string", validation: { required: true } },
ProductQuantity: { type: "number", validation: { required: false, editable: false } }
}
}
},
edit: function (e) {
if (e.model.isNew() == false) {
$('[name="ProductQuantity"]').attr("readonly", true);
}
},
change: function (e) {
if (e.action == "itemchange") {
debugger;
apModel.getProductQuantities(e.items[0].ProductCode).ifFetched().then(function (data) {
var data = JSON.parse(data.Response);
})
//how to access next cell???
$("#ap-grid").data("kendoGrid").saveRow();
}
}
});
$("#ap-grid").kendoGrid({
dataSource: dataSource,
pageable: false,
height: 550,
toolbar: ["create"],
columns: [
{ field: "ProductCode", title: "Product Code" },
{ field: "ProductQuantity", title: "Quantity" },
{ command: ["edit", "destroy"], title: " ", width: "250px" }],
editable: "inline",
});
I can't find a way how to access the next cell to add the data to it.
Can you give me a hint?
thanks in advance,
André
When you set e.items[0].ProductQuantity in OnChange event handler grid cell should automatically update value if datasource bind correctly.
According to kendo docs:
e.items - The array of data items that were affected (or read).
That means it reference at original row of datasource.
I'm trying to implement some functionality in "onchange" of text box in telerik kendo grid. But it is not firing in change; instead it's firing on onBlur.
The code is here. demo
To track the changes in the editors inside the column templates you should use different approach. Please check the example below:
$("#grid").kendoGrid({
columns: [ {
field: "name",
template: kendo.template($("#name-template").html())
}],
dataSource: {
data: [ {id: 1, name: "Jane Doe" }, {id: 2, name: "John Doe" } ],
//schema is required for enabling valid CRUD operations
schema: {
model: {
id: "id",
fields: {
id: {type: "number"},
name: {type: "string"}
}
}
}
}
});
var grid = $("#grid").data("kendoGrid");
grid.table.on("change", "input", function(e) {
alert("change");
//optionally update the underlying model:
var editor = $(this);
var dataItem = grid.dataItem(editor.closest("tr"));
dataItem.set("name", editor.val());
});
Another option is to use the MVVM approach shown in the following demo:
http://dojo.telerik.com/Utino
I've used "onkeyup" event. It works :)
You should try "onkeypress" event. It will work as per your requirement.
I have a Kendo Grid, and instead of having a custom command:
$('#grid').kendoGrid({
dataSource: data,
columns:
[
...
{ command: { text: "Details", click: showDetails }, title: " " }
]
});
I'd like the same behavior to occur but on a standard link. Is it possible?
This is the functionality I'm looking for: http://jsfiddle.net/dmathisen/ERgkA/2/
But want it to behave like this: http://jsfiddle.net/dmathisen/qXAf6/4/
This is similar to what I use in my own projects. You can use whatever markup you desire and style it however you want to make it look functional.
function showDetails(e) {
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
document.getElementById('details').innerHTML = dataItem.quantity;
}
var data = [
{ name: "name1", quantity: 1 },
{ name: "name2", quantity: 4 },
{ name: "name3", quantity: 9 }
];
var grid = $('#grid').kendoGrid({
dataSource: data,
columns: [
{ field: 'name', template: '#= name #' },
{ field: 'quantity' }
]
}).data('kendoGrid');
grid.table.on('click', '.link', function(e) {
showDetails.call(grid, e);
});
JsFiddle
http://jsfiddle.net/qXAf6/7/
I am able to get the selected row in kendo grid ( master grid), But I am unable to get the selected row data in detail grid. Please provide me a code sample.
Thanks,
abhi
It is like for the main grid. Being childgrid the grid corresponding to details, do:
var row = childgrid.select();
var data = childgrid.dataItem(row);
console.log("row", row);
console.log("data", data);
Where I defined master grid as:
$("#grid").kendoGrid({
...
detailInit: detailInit,
...
});
And details grid is created using the following function when a row in master grid is expanded:
function detailInit(e) {
childgrid = $("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
},
serverPaging: true,
serverSorting: true,
serverFiltering: true,
pageSize: 5,
filter: { field: "EmployeeID", operator: "eq", value: e.data.EmployeeID }
},
scrollable: false,
sortable: false,
selectable: true,
pageable: true,
columns:
[
{ field: "OrderID", width: "70px" },
{ field: "ShipCountry", title: "Ship Country", width: "110px" },
{ field: "ShipAddress", title: "Ship Address" },
{ field: "ShipName", title: "Ship Name", width: "200px" }
]
}).data("kendoGrid");
}
Running example here : http://jsfiddle.net/OnaBai/2M86L/ (When you click on Show button, its displays in the console of your browser the selected row and its data).
Here a somewhat simpler example on how to get to the data of the clicked row: http://jsfiddle.net/Corne/AQqMH/5/
This is the code where the magic happens:
change: function (arg) {
var selectedData = this.dataItem(this.select());
// selectedData now points to the selected dataSource item!
alert("Clicked id: " + selectedData.id);
}