Bounding Foreign Key Column to remote DataSource via UrlAdaptor

[Iurii Gerasimov]

Hi,

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
@{Html.EJ().Grid<object>("dgDevices")
          .Datasource(ds => ds.URL("/api/device/datasource")
              .InsertURL("/api/device/insert")
              .UpdateURL("/api/device/update")
              .RemoveURL("/api/device/delete")
              .Adaptor(AdaptorType.UrlAdaptor))
          .EditSettings(edit => { edit.AllowAdding().AllowEditing().AllowDeleting().AllowEditOnDblClick().EditMode(EditMode.Normal); })
          .ToolbarSettings(toolbar =>
          {
              toolbar.ShowToolbar().ToolbarItems(items =>
              {
                  items.AddTool(ToolBarItems.Add);
                  items.AddTool(ToolBarItems.Edit);
                  items.AddTool(ToolBarItems.Delete);
                  items.AddTool(ToolBarItems.Update);
                  items.AddTool(ToolBarItems.Cancel);
              });
          })
          .AllowPaging()
          .AllowSorting()
          .Columns(col =>
          {
          col.Field("DeviceID").HeaderText("ID").Width(30).IsPrimaryKey(true).AllowEditing(true).Add();
          col.Field("DeviceTypeID").HeaderText("Type")
            .ForeignKeyField("DeviceTypeID").ForeignKeyValue("DeviceType1")
                @*.DataSource((IEnumerable<object>)ViewBag.dsDeviceTypes)*@ @* <--this works *@
                .DataSource(ds =>
                    ds.URL("/api/devicetype/datasource")
                    .Adaptor(AdaptorType.UrlAdaptor))
                .Width(150).Add();
          }).Render();

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
[HttpPost]
[EnableQuery]
[Route("datasource")]
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

[Saravanan Arunachalam]

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. 

@(Html.EJ().Grid<OrdersView>("Editing") 

        . . . 

        .ClientSideEvents(e=>e.Load("onLoad")) 

        .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; 

        }, 

    }); 

 

</script> 

 

https://help.syncfusion.com/aspnetmvc/datamanager/data-adaptors#custom-adaptor  

https://help.syncfusion.com/aspnetmvc/grid/data-adaptors#custom-adaptor  

And also we have created a sample that can be downloaded from the below link. 

http://www.syncfusion.com/downloads/support/forum/129148/ze/F129148-412068627  

Regards, 

Saravanan A.