gridview - kendoui: How to display foreign key from remote datasource in grid -

gridview - kendoui: How to display foreign key from remote datasource in grid -

i have kendoui grid list claims. 1 of columns lenders foreign key reference lenders table. want able display lender name in grid instead of id reference.

ive setup lenders datasource follows

var dslenders = new kendo.data.datasource({ transport: { read: { url: "../data/lenders/", datatype: "jsonp" }, parametermap: function(options, operation) { if (operation === "read") { homecoming options; } } } });

and grid looks this

$("#gridclaims").kendogrid({ datasource: claimdata, autosync:true, batch: true, pageable: { refresh: true, pagesizes: true }, filterable: true, sortable: true, selectable: "true", editable: { mode: "popup", confirmation: "are sure want delete record?", template: $("#claimformpopup").html() }, navigable: true, // enables keyboard navigation in grid toolbar: ["create"], // adds insert buttons columns: [ { field:"id_clm", title:"ref", width: "80px;" }, { field:"status_clm", title:"status", width: "80px;" }, { field:"idldr_clm", title:"lender", values: dslenders }, { field:"type_clm", title:"claim type"}, { field:"value_clm", title:"value", width: "80px;", format:"{0:c2}", attributes:{style:"text-align:right;"}}, { field:"created", title:"created", width: "80px;", format: "{0:dd/mm/yyyy}"}, { field:"updated", title:"updated", width: "80px;", format: "{0:dd/mm/yyyy}"}, { field:"user", title:"user" , width: "100px;"}, { command: [ {text: "details", classname: "claim-details"}, "destroy" ], title: " ", width: "160px" } ] });

however still displaying id in lenders column. ive tried creating local datasource , works fine me using remote datasource.

any help great

thanks

short reply can't. not straight anyway. see here , here.

you can (as response in above linked post mentions) pre-load info var, can used info column definition.

i utilize this:-

function getlookupdata(type, callback) { homecoming $.ajax({ datatype: 'json', url: '/lookup/' + type, success: function (data) { callback(data); } }); }

which utilize this:-

var countrylookupdata; getlookupdata('country', function (data) { countrylookupdata = data; });

i utilize in jquery deferred ensure lookups loaded before bind grid:-

$.when( getlookupdata('country', function (data) { countrylookupdata = data; }), getlookupdata('state', function (data) { statelookupdata = data; }), getlookupdata('company', function (data) { companylookupdata = data; }) ) .then(function () { bindgrid(); }).fail(function () { alert('error loading lookup data'); });

you can utilize countrylookupdata values.

you utilize custom grid editor, you'll find still need load info var (as opposed using datasource dropdownlist) , ensure info loaded before grid, because you'll need have lookup column template you're newly selected value displayed in grid.

i couldn't quite foreignkey working in useful way, ended using custom editors have much more command on them.

one more gotcha: create sure have loaded lookup info before define column. using column array defined in variable attaching grid definition... if lookup info loaded before utilize grid, if it's defined after column definition not work.

gridview foreign-keys kendo-ui