We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Bounding Foreign Key Column to remote DataSource via UrlAdaptor

from documentation I know that we can bound  foreign key column in grid to remote DataSource (in doc used OData remote service). I tried to connect to my Web API via URL Adapter, but have got error:

 ej.web.all.min.js:10 Uncaught TypeError: s.filter is not a function
    at _foreignKeyBinding (ej.web.all.min.js:10)
    at r (jsrender.js:371)
    at Function.eval [as fn] (eval at P (jsrender.js:2103), <anonymous>:11:29)
    at N (jsrender.js:1454)
    at Function.E [as render] (jsrender.js:1323)
    at Object.dgDevices_JSONTemplate (jsrender.js:905)
    at Object.sendDataRenderingRequest (ej.web.all.min.js:10)
    at Object._renderGridContent (ej.web.all.min.js:10)
    at Object.render (ej.web.all.min.js:10)
    at Object._initGridRender (ej.web.all.min.js:10)

While local datasource binding for foreign key column is working as expected. Is UrlAdaptor can be used to implement the required task?

Below are excerpts from my code. My entities are DeviceType (DeviceTypeID [pk]) and Device (DeviceID [pk], DeviceTypeID [fk]).
1. Device.cshtml
          .Datasource(ds => ds.URL("/api/device/datasource")
          .EditSettings(edit => { edit.AllowAdding().AllowEditing().AllowDeleting().AllowEditOnDblClick().EditMode(EditMode.Normal); })
          .ToolbarSettings(toolbar =>
              toolbar.ShowToolbar().ToolbarItems(items =>
          .Columns(col =>
                @*.DataSource((IEnumerable<object>)ViewBag.dsDeviceTypes)*@ @* <--this works *@
                .DataSource(ds =>

2. DeviceController.cs
// GET: Device
public ActionResult Device([FromServices] IDeviceTypeService pService)
   // preparing local data source
   var ds = pService.Get(0, 12).ToList();
   ViewBag.dsDeviceTypes = ds;
   return View();

3. DeviceTypeApiController.cs
public ActionResult DataSource([FromServices] IDeviceTypeService pService, [FromBody] DataManager dm)
    var data = pService.Get(dm.Skip, dm.Take,
        pInclude: dm.Select);
    return Json(new { result = data, count = data.Count() });

Attachment: Screenshots_ea6e709f.zip

1 Reply

SA Saravanan Arunachalam Syncfusion Team March 3, 2017 12:43 PM UTC

Hi Gerasimov, 
Thanks for contacting Syncfusion’s support. 
We are able to reproduce the reported issue and the cause of the issue is that we have returned the data to the client as object (result and count) while using the UrlAdaptor but the foreignkey column accepts dataSource as JSON array formatted data. 
So, we suggest you to use the customAdaptor feature for the column’s dataSource which is extending the processResponse method of UrlAdaptor. In the processResponse method, we have formatted that returned object as json data and return to the Grid control. Please refer to the below code example and online document links. 
        . . . 
        .Columns(col => 
            col.Field("EmployeeID").HeaderText("Employee ID").ForeignKeyField("EmployeeID").ForeignKeyValue("FirstName") 
            .DataSource(ds=> ds.URL("ColumnData")).TextAlign(TextAlign.Right).Width(90).Add(); 
            . . . 
<script type="text/javascript"> 
    function onLoad(args) { 
        var len = this.model.columns.length; 
        for (var i = 0; i < len; i++) { 
            if (this.model.columns[i].field == "EmployeeID") 
                this.model.columns[i].dataSource.adaptor = new customAdaptor(); //define the custom adaptor in load event  
    var customAdaptor = new ej.UrlAdaptor().extend({ 
        processResponse: function (data, ds, query, xhr, request, changes) { 
            return data.result; 
And also we have created a sample that can be downloaded from the below link. 
Saravanan A. 

Live Chat Icon For mobile
Up arrow icon