This is a migrated thread and some comments may be shown as answers.

[object object] add row combobox editor

6 Answers 321 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Daniel
Top achievements
Rank 1
Daniel asked on 07 Nov 2018, 08:15 PM

Ok

simple  create a new row  with null values, and add the editor as a ComboBox with the edit field.
Editable:inline

Click Combo show, populates, select, click away from the cell, cell shows [object object]

the data is {Id=1, ColumnName="blah", datatype="blah"}

I have tried all examples for the past two weeks and none seem to work.

 

Should be easy right?  OK I give up.

BTW, all the combobox behave the same.

Any help would be appreciated.

var grid = $("#grid").kendoGrid({
width: 500,
dataSource: {
transport: {
read: {
url: "Grid/GetSearches",
dataType: "json",
},
update: {
url: "Grid/UpdateSearches",
dataType: "json",
},
create: {
url: "Grid/CreateSearches",
dataType: "json",
},
destroy: {
url: "Grid/DeleteSearches",
dataType: "json",
}
},
schema: {
data: function (data) {
return data.data;
},
total: function (data) {
return data.total;
},
model: {
id: "Id",
fields: {
Id: { type: "number", editable: false },
field: {
ColumnName: { type: "string" },
Criteria: { type: "string" },
Value: { type: "string" },
Predicate: { type: "string" }
}
}
}
},
cancel: function (e) {
},
},
scrollable: false,
pageable: false,
editable: {

createAt:"bottom",
},
toolbar: ["create","save", "cancel"],
columns: [
{
field: "Id",
readonly: true,
width: 25,
},
{
field: "ColumnName",
width: 200,
editor: function (container, options) {
$('<input data-bind="value:' + options.field + '" />')
.appendTo(container)
.kendoComboBox({
dataTextField: "ColumnName",
dataValueField: "ColumnName",
autoBind: false,
dataSource: typesds
});
}
},
{ field: "Criteria", width: 200, editor: criteriaDropDownEditor},
{ field: "Value", width: 200, editor: textEditor },
{
field: "Predicate",
width: 200,
template: "#=generateTemplate(Id)#",
editor: function (container, options) {
$('<input required id="Id" style="width:200px;" Name="' + options.field + '" />')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataTextField: "Predicate",
dataValueField: "Id",
change: function(e)
{
selectedValue = this.text();
},
dataSource: {
data: [
{ Id: 1, Predicate: " " },
{ Id: 1, Predicate: "And" },
{ Id: 2, Predicate: "Or" },
]
},
});
}
},
{ command: [{ className: "bt-add", name: "addRow", text: "Add Row" }] },
{ command: [{ className: "bt-del", name: "delRow", text: "Delete Row" }] },
]
}).data("kendoGrid");

var typesds = new kendo.data.DataSource({
transport: {
read: {
url: "Grid/GetFieldList",
dataType: "json",
type: "POST",
},
},
schema: {
data: function (data) {
return data.data;
},
total: function (data) {
return data.total;
},
model: {
id: "Id",
fields: {
Id: { type: "number", readonly: true },
ColumnName: { type: "string" },
DataType: { type: "string" }
}
}
},
});

 

 

 

 

 

 

6 Answers, 1 is accepted

Sort by
0
Tsvetomir
Telerik team
answered on 09 Nov 2018, 03:45 PM
Hi Daniel,

Thank you for the provided Kendo UI Grid declaration. It helped me in troubleshooting the issue. 

I have noticed that in the schema.model object of the grid's data source, the specified type is "string". While the return type of the custom editor is an object. When the .toString() method is called over an object it returns the type - in this case [object] [object]. In order to overcome this issue, set the field property of the column to an object and set a template to visualize the data after clicking away from the cell.

The Grid / Editing custom editor live demo exposes how this could be done. Take into closer details the Category column of the grid which has a combo box for an editor:

https://demos.telerik.com/kendo-ui/grid/editing-custom

If you need assistance with implementing the aforementioned suggestion, feel free to get back to me.


Kind regards,
Tsvetomir
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Daniel
Top achievements
Rank 1
answered on 09 Nov 2018, 04:18 PM

Thanks for the review.  However, after this change over it is now coming as undefined. 

I can not find an event that allows for the validation of the data being passed in after the cell is updated.

Populating the ComboBox without the field.ColumnName causes a failure.

THanks

$(document).ready(function () {
var textEditor = function (container, options) {
$('<input data-value-update="input" style="width:200px;" data-bind="value:' + options.field + '"/>')
.appendTo(container);
};
var typesds = new kendo.data.DataSource({
transport: {
read: {
url: "Grid/GetFieldList",
dataType: "json",
type: "POST",
},
},
schema: {
data: function (data) {
return data.data;
},
total: function (data) {
return data.total;
},
model: {
id: "id",
fields: {
TableId: {type: "int"},
Id: { type: "number", readonly: true },
Column: { type: "string" },
DataType: { type: "string" }
}
}
},
});
function fieldDropDownEditor(container, options) {
$('<input required data-text-field="ColumnName" data-value-field="ColumnName" style="width:200px;" data-bind="value:' + options.field + '" />')
.appendTo(container)
.kendoComboBox({
dataTextField: ColumnName,
dataValueField: ColumnName,
autoBind: false,
dataSource:typeds,
});
}
function criteriaDropDownEditor(container, options) {
$('<input required data-text-field="Criteria" data-value-field="Id" style="width:200px;" data-bind="value:' + options.field + '" />')
.appendTo(container)
.kendoComboBox({
autoBind: false,
dataSource: {
data: [
{ Id: 1, Criteria: "Equal to" },
{ Id: 2, Criteria: "Greater than" },
{ Id: 3, Criteria: "Greater than Equal to" },
{ Id: 4, Criteria: "Less than" },
{ Id: 5, Criteria: "Less than Equal to" },
{ Id: 6, Criteria: "Starts With" },
{ Id: 7, Criteria: "Ends With" },
{ Id: 8, Criteria: "Contains" },
{ Id: 9, Criteria: "Is Empty" },
]
}
});
}
var grid = $("#grid").kendoGrid({
width: 500,
dataSource: {
transport: {
read: {
url: "Grid/GetSearches",
dataType: "json",
},
update: {
url: "Grid/UpdateSearches",
dataType: "json",
},
create: {
url: "Grid/CreateSearches",
dataType: "json",
},
destroy: {
url: "Grid/DeleteSearches",
dataType: "json",
}
},
schema: {
data: function (data) {
return data.data;
},
total: function (data) {
return data.total;
},
model: {
id: "Id",
fields: {
Id: { type: "number", editable: false },
field: {
Column: {
defaultValue: {Id:1, ColumnName:"DA Module"} },
Criteria: { type: "string" },
Value: { type: "string" },
Predicate: { type: "string" }
}
}
}
},
cancel: function (e) {
},
},
scrollable: false,
pageable: false,
editable: {

createAt:"bottom",
},
edit: function (e) {
},
toolbar: ["create","save", "cancel"],
columns: [
{
field: "Id",
readonly: true,
width: 25,
},
{
field: "Column",
width: 200,
template: "#=field.ColumnName#",
editor: function (container, options) {
$('<input Name="' + options.field + '" />')
.appendTo(container)
.kendoComboBox({
dataTextField: "field.ColumnName",
dataValueField: "field.Id",
autoBind: false,
dataSource: typesds
});
}
},
{ field: "Criteria", width: 200, editor: criteriaDropDownEditor},
{ field: "Value", width: 200, editor: textEditor },
{
field: "Predicate",
width: 200,
template: "#=generateTemplate(Id)#",
editor: function (container, options) {
$('<input required id="Id" style="width:200px;" Name="' + options.field + '" />')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataTextField: "Predicate",
dataValueField: "Id",
change: function(e)
{
selectedValue = this.text();
},
dataSource: {
data: [
{ Id: 1, Predicate: " " },
{ Id: 1, Predicate: "And" },
{ Id: 2, Predicate: "Or" },
]
},
});
}

 

},
{ command: [{ className: "bt-add", name: "addRow", text: "Add Row" }] },
{ command: [{ className: "bt-del", name: "delRow", text: "Delete Row" }] },
]
}).data("kendoGrid");

0
Tsvetomir
Telerik team
answered on 13 Nov 2018, 02:48 PM
Hi Daniel,

Based on the provided declaration of the modified grid, I have observed that the field definition for the "Column" set through the DataSource schema is configured as "string". Passing an object while the grid is configured to expect string might lead to unexpected behavior. Here is a sample Dojo project with a Kendo UI DropDownList widget as an editor.

https://dojo.telerik.com/EreXoDUL 

Take a look at the sample and find out what are the crucial differences compared to the project on your side. 

As for the validation that you want to perform, you can handle the "save" event of the Grid and use "e.preventDefault()" to prevent the change, but the cell will be closed even if the method is called, so it might not be what you need. What I could suggest is to implement custom validation rule as shown in the following online demo:
If further assistance is needed, feel free to contact us again.


Kind regards,
Tsvetomir
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Daniel
Top achievements
Rank 1
answered on 13 Nov 2018, 04:50 PM

I am even more confused now than before.

In the example, there is no data item, therefore no way to save, the category data.

the aim here is to simply be able to create a search using a set of column names (plus their IDs) with the criteria and predicates with a value to compare.

There is no simple example of just pulling this data and using the grid to select it.

Where in the example is the Category data saved if it is not part of the datasource?

Thank you.

 

0
Daniel
Top achievements
Rank 1
answered on 13 Nov 2018, 04:52 PM

var grid = $("#grid").kendoGrid({
width: 500,
autoBind:true,
dataSource: {
transport: {
read: {
url: "Grid/GetSearches",
dataType: "json",
},
update: {
url: "Grid/UpdateSearches",
dataType: "json",
},
create: {
url: "Grid/CreateSearches",
dataType: "json",
},
destroy: {
url: "Grid/DeleteSearches",
dataType: "json",
}
},
schema: {
data: function (data) {
return data.data;
},
total: function (data) {
return data.total;
},
model: {
id: "Id",
fields: {
Id: { type: "number", editable: false },
field: {
Column: {
defaultValue: {Id:312, ColumnName:"Bolted"} },
Criteria: { defaultValue: { Id: 1, ColumnName: "Equal To" } },
Value: { type: "string" },
Predicate: { defaultValue: { Id: 1, ColumnName: " " } }
}
}
}
},
cancel: function (e) {
},
},
scrollable: false,
pageable: false,
editable: {

createAt:"bottom",
},
edit: function (e) {
if (e.model.isNew()) {
e.dataItem = e.dataSource.pushCreate();
}
},
toolbar: ["create","save", "cancel"],
columns: [
{
field: "Id",
readonly: true,
width: 25,
},
{
field: "Column",
width: 200,
template: "#=generateTemplate(Id)#",
editor: function (container, options) {
$('<input Name="' + options.field + '" />')
.appendTo(container)
.kendoComboBox({
dataTextField: "field.ColumnName",
dataValueField: "field.Id",
change: function (e) {
selectedValue = this.text();
},
autoBind: false,
dataSource: typesds
});
}
},
{
field: "Criteria", width: 200, template: "#=generateTemplate(Id)#", editor: function(container, options) {
$('<input Name:"' + options.field + '" />')
.appendTo(container)
.kendoComboBox({
autoBind: false,
dataTextField: "Criteria",
dataValueField: "Id",
change: function (e) {
selectedValue = this.text();
},
dataSource: {
data: [
{ Id: 1, Criteria: "Equal to" },
{ Id: 2, Criteria: "Greater than" },
{ Id: 3, Criteria: "Greater than Equal to" },
{ Id: 4, Criteria: "Less than" },
{ Id: 5, Criteria: "Less than Equal to" },
{ Id: 6, Criteria: "Starts With" },
{ Id: 7, Criteria: "Ends With" },
{ Id: 8, Criteria: "Contains" },
{ Id: 9, Criteria: "Is Empty" },
]
}
});
}},
{ field: "Value", width: 200, editor: textEditor },
{
field: "Predicate",
width: 200,
template: "#=generateTemplate(Id)#",
editor: function (container, options) {
$('<input style="width:200px;" Name="' + options.field + '" />')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataTextField: "Predicate",
dataValueField: "Id",
change: function(e)
{
selectedValue = this.text();
},
dataSource: {
data: [
{ Id: 1, Predicate: " " },
{ Id: 1, Predicate: "And" },
{ Id: 2, Predicate: "Or" },
]
},
});
}
},
{ command: [{ className: "bt-add", name: "addRow", text: "Add Row" }] },
{ command: [{ className: "bt-del", name: "delRow", text: "Delete Row" }] },
]
}).data("kendoGrid");
grid.table.kendoSortable({
hint: hintElement,
cursor: "move",
placeholder: function (element) {
return element.clone().addClass("k-state-hover").css("opacity", 0.65);
},
container: "#grid tbody",
filter: ">tbody >tr",
cancel: function (e) {
alert();
},
change: function (e) {
var grid = $("#grid").data("kendoGrid"),
oldIndex = e.oldIndex, // The old position
newIndex = e.newIndex, // The new position
view = grid.dataSource.view(),
dataItem = grid.dataSource.getByUid(e.item.data("uid")); // Retrieve the moved dataItem
grid.dataSource.remove(dataItem);
grid.dataSource.insert(newIndex, dataItem);
//dataItem.Id = newIndex; // Update the order
//dataItem.dirty = true;
//// Shift the order of the records
//if (oldIndex < newIndex) {
// for (var i = oldIndex + 1; i <= newIndex; i++) {
// view[i].Order--;
// view[i].dirty = true;
// }
//} else {
// for (var i = oldIndex - 1; i >= newIndex; i--) {
// view[i].Order++;
// view[i].dirty = true;
// }
//}
//grid.dataSource.sync();
}
});
});

 

 

0
Tsvetomir
Telerik team
answered on 15 Nov 2018, 02:06 PM
Hi Daniel,

I have noticed that in the editors you have provided, the name attribute of the input elements are spelled with a capital "N" letter and are not consistent. Some of the attributes are followed by a "=" and others by a colon. The Kendo UI widgets highly depend on this attribute since they are bound by name. 

Furthermore, the undefined value comes from the generateTemplate() function. I am not aware of what does exactly the function consist of. Could you share the code of interest? 

Also, in order to make the communication more efficient and to provide a clear-cut answer, I recommend you to create a runnable sample in which the issue could be replicated. You can use dummy data, following the initial data you have on your side. This would allow me to debug the sample project locally and discover where does the issue stem from.

Ideally, share your code sample as a Dojo project:

https://dojo.telerik.com/IYeWOHak

Modify the name attribute and see if this would make a difference. I am looking forward to you sharing a sample project isolating the specific issue.


Kind regards,
Tsvetomir
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Daniel
Top achievements
Rank 1
Answers by
Tsvetomir
Telerik team
Daniel
Top achievements
Rank 1
Share this question
or