Develop Reference

Editable hierarchical grid in Kendo UI

I wish to create a grid that each row has grid inside it.
Both grids need to be editable and I managed to do so. However, when I try to add a new row to the outer grid, all the data inside it gone.
You can find the demo here: http://dojo.telerik.com/UqURE
Can you please help with this issue?
Thanks!
var outerDataSource= new kendo.data.DataSource({
schema: {
model: {
field1: { type: "string", validation: { required: true } },
field2: { type: "boolean", validation: { required: true } },
field3: { type: "string", validation: { required: true } }
}
}
});
$("#outerGrid").kendoGrid({
dataSource: outerDataSource,
detailInit: onExpansion,
toolbar: ["create"],
columns: [
{ field: "field1", title: "field1" },
{ field: "field2", title: "field2" },
{ field: "field3", title: "field3" },
{ command: ["destroy"], title: " " }],
editable: true
});
function onExpansion(e) {
var insideDataSource= new kendo.data.DataSource({
schema: {
model: {
in1: { type: "string", validation: { required: true } },
in2: { type: "string", validation: { required: true } }
}
},
data: [{
in1: "Click to edit",
in2: "Click to edit"
}]
});
var headers = $("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: insideDataSource,
width: 90,
toolbar: ["create"],
editable: true,
columns: [
{ field: "in1" },
{ field: "in2" },
{ command: ["destroy"], title: " " }]
});
};

Answer from Telerik:
Please note that operations like paging, sorting, filtering and
editing cause the Grid to rebind and reevaluate all templates inside
it (including the details). That why in order to preserve the child
Grid data between rebinds you should either save it to remove service
(link to documentation here) or add it as navigation property
collection to the parent Grid model (demo is available here).
http://www.telerik.com/forums/hirarchialy-editable-grids

Kendo UI Grid Checkbox Column Field Not Defined

I am trying to add a kendo checkbox column. I have done this successfully in another grid. However, when I tried to do the same thing in another grid, I am getting a "IsSimple is undefined" error, where IsSimple is a simple boolean model field.
Model for my kendo data source:
schema: {
data: function (data) { //specify the array that contains the data
console.log("DATA RETURN TEST");
console.log(data);
return data || [];
},
model: {
id: "Id",
fields: {
Id: { editable: false,
nullable: false,
type: "number"
},
DesignatorName: { type: "string" },
TXFreq: { type: "string" },
RXFreq: { type: "string" },
IsSpecial: { type: "bool" },
IsCommand: { type: "bool" },
}
}
Here is my column definition for my kendoGrid.
$("#DesignatorFreqGrid").kendoGrid({
dataSource: DesignatorDS,
columns: [
{ field: "DesignatorName", title: "Frequency", format: "{0:c}", width: "120px" },
{ field: "TXFreq", editor: TXFreqEditor, title: "TX Frequency", format: "{0:c}", width: "120px" },
{ field: "RXFreq", editor: TXFreqEditor, title: "RX Frequency", format: "{0:c}", width: "120px" },
{ field: "IsSpecial", template: '<input type="checkbox" #= IsSpecial ? checked="checked" : "" # disabled="disabled" ></input>', title: "Is Special", format: "{0:c}", width: "120px" },
{ field: "IsCommand", template: '<input type="checkbox" #= IsCommand ? checked="checked" : "" # disabled="disabled" ></input>', title: "Is Command", format: "{0:c}", width: "120px" },
{ command: ["edit", "destroy"], title: " ", width: "250px" }
],
toolbar: ["create"],
editable: "inline",
pageable: true
});
Here is my JSON object:
"other fields........DesignatorName: "11"
EQUIPMENT: ObjectId: 2
IsCommand: true
IsSpecial: true
RXFreq: "55"
TXFreq: "22"
As you can see, IsSpecial is defined. The binding works when I load data into the grid. The checkboxes are indeed checked. But if I try to add a new record with the "Add New Record" button in the grid, I will get the error "Uncaught ReferenceError: IsSpecial is not defined".
If I change the binding to this.IsSpecial, I don't get the error anymore, and can add a new row to my database, but then the binding won't work and the boxes aren't checked when loading the grid,
It seems like it should work, and I do not know where else to look. Any ideas? Thanks.

You need to use boolean, instead of bool.
IsSpecial: { type: "boolean" },
IsCommand: { type: "boolean" }

KendoUI - Read edited data from grid cells using underlying model

below i have a kendoUI grid that fetches data from a server. The user can then edit two columns in the grid. I have a separate button that will post the data back to the server and i do not use the kendo grid's UPDATE transport for this. The problem i am having is that if i fetch the data from the grid, it does not reflect the user inputs. For example, to get to the underlying data for the grid i do the following:
products= $("#Grid").data("kendoGrid").dataSource.data()
But when i iterate over products and check the NewPrice or Comment property, it's always blank. Here is how the grid's data source is defined:
dataSource: {
transport: {
read: function (options) {
$.ajax({
url: "/Portal/API/GetProductPrices?id=" + pId,
dataType: "json",
success: function (data) {
localModel.userId = data.userId;
localModel.products = data.Products;
return options.success(model.products);
},
});
}
},
},
scrollable: false,
selectable: true,
schema: {
model: {
id: 'Id',
fields: {
Item: { type: 'string', editable: false },
Price: { type: 'number', editable: false },
NewPrice: { type: 'number', editable: true },
Comment: { type: 'string', editable: true, validation: { required: true } },
}
}
},
columns: [
{ field: "Price", title:"Price"},
{
field: "NewPrice", title: "<span class='editMode'>Proposed Value</span>", format: "{0:p}", attributes: { style: "text-align:center;" }, headerAttributes: { style: "text-align:center;" }, width: "50px",
template: "#=NewValueTemplate(data)#",
},
{ field: "Comment", title: "<span class='editMode viewWorkflowMode'>Notes</span>", width: "210px", template: "#=NotesTemplate(data)#" },
]
Any advice in resolving would be appreciated

You haven't specified the editing type that you are using.
Which type are you using: inline, batch or popup ?
Is only this the datasource ? I see no update function.
I suggest you take a look at the three demos.
Batch
Inline
Popup
The worst thing is that you haven't specified the value of the property editable.
By default it is false, that means the kendoGrid is not editable, even if you have specified editable: true over your model fields.
Shortcut to "Editable" configuration
update #2 :
As already said here
If the data source is bound to a remote service (via the transport option) the data method will return the service response.
So, when you use dataSource.data() method on your grid, if you haven't updated correctly your datasource, you should receive all "old" data. (I found strange that you get blank value over those properties, maybe a cache problem)
As I already said, your dataSource doens't provide no update function.
Here you are an example about the configuration of the update function in kendo dataSource, with request to remote service.
Suggest you to look on both examples:
Example - specify update as a string and Example - specify update as a function

Please implement the logic from the following example:
var _roleDataSource = new kendo.data.DataSource({
data: [
{ id: 1, title: "Software Engineer" },
{ id: 2, title: "Quality Assurance Engineer" },
{ id: 3, title: "Team Lead" },
{ id: 4, title: "Manager" }
]
});
var _peopleDataSource = new kendo.data.DataSource({
data: [
{ id: 1, name: "John", roleId: 1, roleTitle: "Software Engineer" },
{ id: 2, name: "Dave", roleId: 2, roleTitle: "Quality Assurance Engineer" },
{ id: 3, name: "Aaron", roleId: 3, roleTitle: "Team Lead" },
{ id: 4, name: "Russell", roleId: 4, roleTitle: "Manager" }
]
});
var _grid = $("#grid").kendoGrid({
dataSource: _peopleDataSource,
columns: [
{
field: "name",
title: "Name"
},{
field: "roleTitle",
title: "Role",
editor: function(container, options) {
$("<input data-bind='value:roleTitle' />")
.attr("id", "ddl_roleTitle")
.appendTo(container)
.kendoDropDownList({
dataSource: _roleDataSource,
dataTextField: "title",
dataValueField: "title",
template: "<span data-id='${data.id}'>${data.title}</span>",
select: function(e) {
var id = e.item.find("span").attr("data-id");
var person =_grid.dataItem($(e.sender.element).closest("tr"));
person.roleId = id;
setTimeout(function() {
$("#log")
.prepend($("<div/>")
.text(
JSON.stringify(_grid.dataSource.data().toJSON())
).append("<br/><br/>")
);
});
}
});
}
}
],
editable: true
}).data("kendoGrid");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="grid"></div>
<br/>
<div id="log"></div>
You may view the demo here: http://jsfiddle.net/khNsE/175/

In this case, i needed to allow some rows based on data rules to enter 'edit mode' at the same time, so specifying inline, popup, etc was not an option. What i did instead was use a custom template function when defining the grid columns. the custom template function returned html, but in the html i used the data-bind attribute to bind to my model. Finally on the DataBound event of the grid, i bind my model to the rows.
field: "NewPrice", title: "New", format: "{0:p}", template: "#=newValueTemplate(d)#",
....
....
function newValueTemplate(d){
if (d.IsEditable)
return "<input type='number' data-bind='value:NewPrice' />"
else
return "<span />"
}
function gridDataBound(e){
var items = this.dataSource.view();
var gridRows = this.tbody.children();
for (var i = 0; i < items.length; i++)
kendo.bind(gridRows[i], items[i]);
}

kendo grid title change

I am trying to change the title of the kendo grid.
However when i do the below on change event the filtering doesn't work for that column.
I have a sample code here to replicate the issue in jsfiddle: http://jsfiddle.net/nLn5b/4/
$("#change").on("click", function() {
$("#grid th[data-field=FirstName]").html("<a tabindex='-1' class='k-grid-filter' href='#'><span class='k-icon k-filter'></span></a>MiddleName")
})
var grid = $("#grid").kendoGrid({
dataSource: {
data : createRandomData(10),
pageSize: 5,
schema : {
model: {
fields: {
Id : { type: 'number' },
FirstName: { type: 'string' },
LastName : { type: 'string' },
City : { type: 'string' }
}
}
}
},
editable : false,
pageable : true,
filterable: true,
columns : [
{ field: "FirstName", width: 90, title: "First Name" },
{ field: "LastName", width: 90, title: "Last Name" },
{ field: "City", width: 100 }
]
}).data("kendoGrid");
Thanks for any help.

Why do you want to change the title in runtime instead of while creating it? Anyhow, you can do it using:
$("#change").on("click", function() {
$("#grid th[data-field=FirstName]").contents().last().replaceWith("MiddleName");
});
Your JSFiddle modified here: http://jsfiddle.net/OnaBai/nLn5b/5/

I believe it is more clear this way:
$("#grid th[data-field=FirstName]").html("MiddleName");

Kendo UI Grid not reaching Post on Controller

I have looked at an example Kendo grid here, and another one on Codeproject and a thread on this site, but I don't seem to find the error. I'm not very knowledgeable with javascript or HTML, so I expect it to be a simple mistake on my part.
Here is the code I have so far:
$(document).ready(function () {
var baseURL = "/api/LeaveTypes",
leaveTypes = new kendo.data.DataSource({
autoSync: true,
transport: {
read: {
url: baseURL + "?getAll=true",
dataType: "jsonp",
type: "GET"
},
update: {
url: baseURL,
dataType: "jsonp",
type: "POST"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
},
schema: {
model: {
id: "Id",
fields: {
Id: {type: "number", editable: false, validation: { required: true } },
Description: { type: "string", editable: false, validation: { required: true } },
IsEssLeaveType: { type: "boolean", editable: true, },
ColourRGB: {type: "string", editable: true, nullable: true }
}
}
}
});
$(".leavetypesgrid").kendoGrid({
dataSource: leaveTypes,
toolbar: ["save"],
columns: [{
field: "Id",
title: "Leave Type ID"
}, {
field: "Description",
title: "Leave Type"
}, {
field: "IsESSLeaveType",
template: '<input type="checkbox" #= IsESSLeaveType ? "checked=checked" : "" # ></input>',
title: "Flagged for ESS",
}, {
field: "ColourRGB",
title: "Colour"
}
],
scrollable: false,
editable: {
update: true
}
});
});
I am trying to get it to work in JSFiddle, but since I'm quite new to it, I'm still struggling to get the data source disconnected from the Controller that I'm currently using to populate the grid with, and connecting it to sample data.
Here is the Controller's Post method:
public SimpleResult Post(List<LeaveCalendarLeaveType> leaveTypesList)
{
return ESSLeaveDataManager.SaveLeaveTypes(leaveTypesList);
}
Any help will be much appreciated! :)

The first thing that I noticed is that you have two data sources defined. One called dataSource and another called leaveTypes. You are only setting the datasource on your grid to leaveTypes.

Did you configure your MVC route so that it goes to the action named Post() when /api/LeaveTypes is called? Otherwise, the url for the update config should be /api/LeaveTypes/Post