Binding kendo ui grid columns headers to a json file

Question

I'm using a kendo ui grid, and I want to bind the columns headers to a json file, instead of specifying it directly in the controller.

Is there a way to bind it as in the dataSource?

If not, then how?

This is what I tried, but it does not work:

$scope.options = {
            dataSource: {
                type: "json",
                transport: {
                    read: "myData.json"
                },
                pageSize: 10,
                schema  : {
                    data: "mySchema"
                }
            },
            sortable: true,
            pageable: true,
            resizable: true,
            columns:{
                type: "json",
                transport: {
                    read: "app/data/headers.json"
                }
            }

Answer 1

You can specify a function to get the headers as follows :

  function returnColumns(){
    var retVal;
    $.ajax({
          dataType: "json",
          url: "app/data/headers.json",
          data: data,
          success: success,
          async: false,
      success: function(data){
        retVal = $.parseJson(data);
      }
    });


    return retVal;
  }

Then, in your assignment of columns, you can simply do the following :

columns : returnColumns(),

We can test this further, if you provide the format of the json file you are loading.

Hope this helps!