I have made a nice grid. Everything was fine until I made it editable.
When clicking in a cell, Firebug showed this error:
model is undefined
In Chrome:
Uncaught TypeError: Cannot call method 'editable' of undefined
After some research, I found the cause of the problem, and its solution. I want to share it here. If someone else faces the same issue, may save a bit of time...
The problem happened because I had a rowTemplate configuration for the grid. When the row is generated by Kendo, it automatically adds a data-id attribute to the table-row (tr) element. To fix the issue, I had to add this to my row template. In my case, the whole row contents are generated by a JavaScript function. I manually added the missing data-id attribute in the tr like this:
Of course, the data-id attribute must have the proper "id" value for that row.
I hope this helps...
When clicking in a cell, Firebug showed this error:
model is undefined
In Chrome:
Uncaught TypeError: Cannot call method 'editable' of undefined
After some research, I found the cause of the problem, and its solution. I want to share it here. If someone else faces the same issue, may save a bit of time...
The problem happened because I had a rowTemplate configuration for the grid. When the row is generated by Kendo, it automatically adds a data-id attribute to the table-row (tr) element. To fix the issue, I had to add this to my row template. In my case, the whole row contents are generated by a JavaScript function. I manually added the missing data-id attribute in the tr like this:
function myRowBuilderFunction(data) { return '<tr data-id="' + data.my_id_field + '">' + table_cells + '</tr>';}Of course, the data-id attribute must have the proper "id" value for that row.
I hope this helps...
2 Answers, 1 is accepted
0
Ralph
Top achievements
Rank 1
Rank 1
answered on 09 Feb 2012, 11:37 PM
Could you please display your 'DataSource' object too? I am guessing the real reason is because you have not defined a 'model' like so:
var dataSource = new kendo.data.DataSource(
{
data: createMockValue(),
schema:
{
model:
{
id: "Id", // <-- This is your primary key definition
fields:
{
// Your field definitions go Here
}
}
}
});
But until I see your 'DataSource' object this is only a guess.
var dataSource = new kendo.data.DataSource(
{
data: createMockValue(),
schema:
{
model:
{
id: "Id", // <-- This is your primary key definition
fields:
{
// Your field definitions go Here
}
}
}
});
But until I see your 'DataSource' object this is only a guess.
0
João
Top achievements
Rank 1
Rank 1
answered on 10 Feb 2012, 10:22 AM
Hi, Robert. Your guess is wrong. Have you read my entire post? I already discovered the reason: I use a custom rowTemplate and I had to manually add the data-id attribute to the table-row (<tr>) element.
Anyway, I can share my DataSource code with you:
Anyway, I can share my DataSource code with you:
var lancamentoModel = kendo.data.Model.define({
id: 'id_lancamento',
fields: {
id_lancamento: { editable: false },
mes: {
type: 'date',
format: 'yyyy-MM',
validation: { required: true },
defaultValue: '2012-02-01',
parse: parseDate
},
projeto: { type: 'string', defaultValue: '' },
elemento: { type: 'string', defaultValue: '' },
descricao: { type: 'string', defaultValue: '' },
parceiro: { type: 'string', defaultValue: '' },
cnpj: { type: 'string' },
data_prevista: {
type: 'date',
format: 'yyyy-MM-dd',
defaultValue: '',
parse: parseDate
},
data_realizada: {
type: 'date',
format: 'yyyy-MM-dd',
defaultValue: '',
parse: parseDate
},
previsto: { type: 'number', parse: noChange },
realizado: { type: 'number', parse: noChange },
nota_fiscal: { type: 'string' },
documento: { type: 'string' },
conta: { type: 'string' }
}
});
var lancamentosDS = new kendo.data.DataSource({
schema: {
model: lancamentoModel,
data: function(result) {
return result.data;
},
total: function(result) {
return result.total;
}
},
transport: {
create: { url: '/lancamentos/create' },
update: { url: '/lancamentos/update' },
destroy: { url: '/lancamentos/destroy' },
read: { url: '/lancamentos/read' }
},
batch: true,
sendAllFields: false,
serverSorting: true,
serverFiltering: true,
serverPaging: true,
pageSize: 90
});