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

3 posts, 0 answers
  1. Bryan
    Bryan avatar
    13 posts
    Member since:
    Feb 2016

    Posted 04 Aug Link to this post

    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?
  2. Stefan
    Admin
    Stefan avatar
    276 posts

    Posted 08 Aug Link to this post

    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
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
  3. Kendo UI is VS 2017 Ready
  4. Bryan
    Bryan avatar
    13 posts
    Member since:
    Feb 2016

    Posted 09 Aug in reply to Stefan Link to this post

    Stefan,

    That worked perfectly. Thanks a ton. Excellent resources.

    Bryan

Back to Top