Kendo Grid binding to the List of string

Question

I have external web service, so my controller action just returns the view with Kendo grid inside.

The service return me such structure:

{"Form":"xxx","Fields":["xxx","xxx","xxx"]}

I'm interested only in showing Fields values. The problem is that Fields is basically List<string> not a KeyValuePair collection, so I have some troubles to bind it to the grid.

I tried to use parse event and somehow change data, but with no success.

So far I have such code in my view:

<div id="alias-list-view" class="k-content">
    <div id="alias-list-grid" style="width: 400px"></div>
</div>

var aliasListDataSource = new kendo.data.DataSource({
   transport: {
       read: {
           url: "some_url",
           dataType: "json"
       }
   },
    schema: {
        data: "Fields",
        parse: function (data) {
            $.each(data, function (index, item) {
                // not sure what to do
            });
        }
    },
   pageSize: 10
});


$("#alias-list-grid").kendoGrid({
    autoBind: false,
    dataSource: aliasListDataSource,
    pageable: true
});

Answer 1

You might define the parse function as follow:

parse: function (data) {
    var fields = data.Fields;
    var result = [];
    $.each(fields, function (index, item) {
        result.push({field: item })
    });
    return result;
}

And then the Grid :

$("#alias-list-grid").kendoGrid({
    dataSource: aliasListDataSource,
    pageable  : true
});

Ie The grid has one column that we called field and in the parse function we iterate (as you were already doing) and composing the pairs key-value of field : value .

Example : http://jsfiddle.net/OnaBai/BEM3S/

Answer 2

You need to make the data property of schema return a function which does the manipualtion. Check this fiddle: http://jsfiddle.net/whizkid747/9NsLR/3/

var dataFromService = {"Form":"xxx","Fields":["xxx1","xxx2","xxx3"]}
var aliasListDataSource = new kendo.data.DataSource({ 
    //data:movies,

schema:{
     data: function(response){
        var dataForDS = [];


         var len = dataFromService.Fields.length;

       for (var i = 0; i < len; i++) {                     
           var obj  = {
               title : dataFromService.Fields[i]
           };            
          dataForDS.push(obj);     
       }             
     return dataForDS;   
}    
}
});