How to handle an array of strings returned from a REST service in a Kendo UI Grid

[Bryan]

I have a rest service that returns one field as an array of strings:

 

"$9":"0071", "NAMES": ["Chris Bob","Jim Kuster","Rick Dill","David Scope","Bryan Tim" ]

 

My JS looks like this:

//Set URL of Rest Service
var loc = (location.href);
var url = loc.substring(0,loc.lastIndexOf("/")) + "/xpRest.xsp/xpRest1";

var dataSource = new kendo.data.DataSource({
transport: {
        read: {
            url: url,
            type: 'GET'
        },batch: false
},
pageSize: 15,
});


dataSource.read();


$("#grid").kendoGrid({
dataSource: dataSource,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
height: 543,
noRecords: true,
selectable : false,
columns : [{
field : "$9",
title : "Location",
width : 75
},{
field: "D_APPRNAME",
title : "Approvers"
  }],
}); 
});

The output in the column is [Object][Object]

Does someone have an example or a fiddle to help me with this?

[Stefan]

Hello Bryan,

The items from an array field of the Kendo UI Grid can be displayed using the columns.template property of the Grid:

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.template

I made a Dojo example to demonstrate this implementation:

http://dojo.telerik.com/AquNo

There are alternative ways to display array content, by using script expressions inside a Kendo UI string template:

http://docs.telerik.com/kendo-ui/framework/templates/overview#handle-external-templates-and-expressions

If the Grid will be editable, please check our example on how to use the Kendo UI MultiSelect as an editor for an array field in the Grid:

http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Editing/use-multiselect-as-custom-editor

I hope this is helpful.

Regards,
Stefan
Telerik by Progress

[Bryan]

Stefan,

That worked perfectly. Thanks a ton. Excellent resources.

Bryan