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

[object object] in column

7 Answers 992 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Steve
Top achievements
Rank 1
Steve asked on 26 Jan 2016, 04:46 PM

Hi All,

My grid displayed all data except for one column and it's showing as [object object] and I can't figured out where the problem is.  Below is my code

results return from JSON

...

var data = { data: gridData, total: gridData.length };
options.success(data);

 var data = { data: kendoViewModel.BatchGridData, total: kendoViewModel.BatchGridData.length };
                            options.success(data);

 }

            },
            serverPaging: true,
            pageSize: 20,
            schema: {                
                data: "data",
                total: "total",
                model: {
                    fields: {
                         ReportList: { type: "object", editable: true },                                    
                    }
                }
...

...

columns: [
    {
        width: 50,
        headerTemplate: '<input type="checkbox" id="checkAll" />',
        template: '<input type="checkbox" class="checkbox" />'
    },   
    {
        field: 'ReportList.Description',
        title: 'In Reports',
        width: 135,
        template: '#=ReportList#',      //[object object]
        editor: function invoiceReportsDropDown(container, options) {
            if (options.model.ReportList.length <= 1)
                return;
            $('<input data-text-field="Description" data-value-field="Id" data-bind="value:' + options.field + '"/>')
                  .appendTo(container)
                  .kendoDropDownList({
                      dataSource: options.model.ReportList,
                      dataTextField: "Description",
                      dataValueField: "Id",
                  });
        }

 

if I replace  template: '#=ReportList.Description#',  I get undefined.  Any help is appreciated.

 

TIA

7 Answers, 1 is accepted

Sort by
0
Radoslav
Telerik team
answered on 28 Jan 2016, 09:22 AM
Hi Steve,

The described behavior is expected because the field to which the column is bound is an array. In this case you can use column template and attach function which returns formatted string from the underlying array objects. For example:
...
 
columns: [
        { field: "ReportList", template: "#=generateTemplate(ReportList)#" }
    ],
 
...
 
function generateTemplate(ReportList) {
    var template = "<ul>";
    for (var i = 0; i < ReportList.length; i++) {
        template = template + "<li>" + ReportList[i].Description+ "</li>";
    }
  
    return template + "</ul>";
}
On the following link you can find a simple example which demonstrates this approach:
http://dojo.telerik.com/iZOQo

I hope this helps.

Regards,
Radoslav
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Steve
Top achievements
Rank 1
answered on 28 Jan 2016, 03:59 PM

Hi Radoslav,

Thanks for your reply.  Using template function sort of get me what I wanted.  All I am trying to achieve is following (please see the attachment)  and so far the problem is displaying the text of the dropdown list.

Steve

 

0
Steve
Top achievements
Rank 1
answered on 28 Jan 2016, 04:03 PM

I forgot to add the code

        {
                    field: 'ReportList.Description',
                    title: 'In Reports',
                    width: 135,
                    template: "#=ReportList.Description#",
                    editor: function invoiceReportsDropDown(container, options) {
                        if (options.model.ReportList.length <= 1)
                            return;
                            $('<input data-text-field="Description" data-value-field="Id" data-bind="value:' + options.field + '"/>')
                                   .appendTo(container)
                                  .kendoDropDownList({
                                      dataSource: options.model.ReportList,
                                      dataTextField: "Description",
                                      dataValueField: "Id",
                                      //select: onSelect
                                  });            
                    }
                }

and select the only item if there is one item.

0
Radoslav
Telerik team
answered on 01 Feb 2016, 09:32 AM
Hi Steve,

I am not sure that I completely understand the desired functionality. Could you please elaborate a bit more on the desired functionality? Additionally on my side the text in the drop down is shown as expected. You can check the modified version of the example here:
http://dojo.telerik.com/iZOQo/2

Looking forward for your reply.

Regards,
Radoslav
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Steve
Top achievements
Rank 1
answered on 01 Feb 2016, 08:02 PM

Hi Radoslav,

This is exactly what I am looking for, but the only problem is regardless of what item I selected, it's always showing the first item.  How do I fix this? and Thanks again for you help

0
Accepted
Radoslav
Telerik team
answered on 02 Feb 2016, 09:18 AM
Hello Steve,

In a standard way you need to have another field in your data source which keeps the selected value. Then the column needs to be bound to this field. Like in the following example:
http://demos.telerik.com/kendo-ui/grid/editing-custom (category field)

However if you do not want to have another fields in the data source you can use following approach as a workaround:
Handle the drop down change event and store in temporary variable the selevted value. Then in the template function based on it you can show the corresponding description. I updated the previous example which this functionality:
http://dojo.telerik.com/iZOQo/5

Additionally please note that the approach is used just for visualization of the selected value. The underlying data source will not change and when the page is refreshed the selected description will be lost.

I hope this helps.

Regards,
Radoslav
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Developer
Top achievements
Rank 1
answered on 23 Jan 2019, 06:47 PM

Thank you Radoslav.

Have same issue and solved it using your sample code

Tags
Grid
Asked by
Steve
Top achievements
Rank 1
Answers by
Radoslav
Telerik team
Steve
Top achievements
Rank 1
Developer
Top achievements
Rank 1
Share this question
or