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.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Bounding Foreign Key Column to remote DataSource via UrlAdaptor

Thread ID:

Created:

Updated:

Platform:

Replies:

129148 Mar 1,2017 12:13 AM UTC Mar 3,2017 12:43 PM UTC ASP.NET Core 1
loading
Tags: Grid
Iurii Gerasimov
Asked On March 1, 2017 12:13 AM UTC

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 [Syncfusion]
Replied On 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. 
@(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> 
 
And also we have created a sample that can be downloaded from the below link. 
Regards, 
Saravanan A. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;