[object object] in column

[Steve]

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

[Radoslav]

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

 

 

[Steve]

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

 

[Steve]

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.

[Radoslav]

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

 

 

[Steve]

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

[Radoslav]

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

 

 

[Developer]

Thank you Radoslav.

Have same issue and solved it using your sample code