CODEWITHSUNDEEP
javascriptasp.net-web-apikendo-uikendo-grid
John Edwards
John Edwards

Reputation: 1546

Kendo UI Grid - Binding to navigation properties

I am using the Kendo UI grid and am display a role of models. Each model has a navigation property, and I am trying to display a field that exists in this navigation property.

  //schema for my kendo data source
  schema: {
                data: function (data) {                         
                    return data || [];
                }                   
            }
 ......................................................
   $("#FAAFreqGrid").kendoGrid({
            dataSource: FAADS,

            columns: [
                   { field: "Id", title: "Freq ID", format: "{0:c}", width: "120px" },
                 { field: "Frequency", title: "Frequency Test" format: "{0:c}", width: "120px" }, 
                  { field: "FREQ_POOL", title: "FAATEST", format: "{0:c}", width: "120px" },
                { command: ["edit", "destroy"], title: " ", width: "250px" }
            ],
            toolbar: ["create"],
            editable: "inline",
            pageable: true

        });

If I go to my Web API Url, I get a json response of:

[{"$id":"1","Frequency":"164.1375","FREQ_POOL":{"$id":"2","IsAM":true,......etc}

FREQ_POOL is my navigation property, and it has the data I want. Frequency exists and displays in my grid properly. But my FREQ_POOL field says [object Object], and if I try to say "FREQ_POOL.IsAM", it says IsAM is not defined. I cannot get it to bind to any property I can bind to any other non-navigation field. How do I make this work? The data exists in the JSON object that is returned, but the binding just isn't working correctly. Thanks.

Upvotes: 0

Views: 941

Answers (1)

Icepickle
Icepickle

Reputation: 12796

You could set a template for the column in question, like this:

$("#grid").kendoGrid({
  columns: [ {
    field: "name",
    template: "<strong>#: name.first#, #: name.last# </strong>"
  }],
  dataSource: [ { name: { first: 'Jane', last: 'Doe' } }, { name: { first: "John", last: 'Doe' } } ]
});

the template can then be used to show object in the dataset

more info, you could find here

For the editing, you could then also define the cell editor, with an extra template or function, more info about that, you could find here.

Upvotes: 1

Related Questions