How To Create A Foreign Key Dropdown Using A Web API Instead Of The Viewbag

[danacon]

Hi,

I am looking to populate my grid using web api calls (webapiadapter) rather than the viewbag method and so i would like to also get the foreign key data for the dropdown as well using the web api method. The only sample i can find uses another property on the viewbag (e.g. viewbag.foreignkeydata in addition to viewbag.datasource).

Do you have any guidance or samples for achieving this?

Many Thanks

[Thavasianand Sankaranarayanan]

Hi danacon, 

 

Greetings from Syncfusion support. 

 

Query: I am looking to populate my grid using web api calls (webapiadapter) rather than the viewbag method and so i would like to also get the foreign key data for the dropdown as well using the web api method. The only sample i can find uses another property on the viewbag (e.g. viewbag.foreignkeydata in addition to viewbag.datasource). Do you have any guidance or samples for achieving this? 

 

We have validated your query and created sample based on your requirement. Here, we have bind both grid data source and foreign key column dataSource as remote data in WebApiAdaptor. Please find the below code example and sample for your reference. 

 

[code example] 

 

<ejs-grid id="Grid" allowPaging="true" enablePersistence="false" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel","Search" })"> 

    <e-data-manager id="myData" url="/api/Orders" adaptor="WebApiAdaptor" crossDomain="true"></e-data-manager> 

    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true"></e-grid-editSettings> 

    <e-grid-columns> 

        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column> 

        <e-grid-column field="EmployeeID" headerText="Employee Name" foreignKeyField="EmployeeID" foreignKeyValue="CustomerID" dataSource="@(new Syncfusion.EJ2.DataManager() { Url = "/api/Employee", Adaptor = "WebApiAdaptor"})" width="150"></e-grid-column> 

        <e-grid-column field="ShipCity" headerText="Ship City" width="170"></e-grid-column> 

        <e-grid-column field="ShipCountry" headerText="Ship Country" template="<a>${ShipCountry}</a>" width="150"></e-grid-column> 

    </e-grid-columns> 

</ejs-grid> 

 

[Route("api/Employee")] 

 

        public object Get() 

        { 

                var data1 = EmpoyeeDetails.GetAllRecords().ToList(); 

                return  new { Items = data1, Count = data1.Count() }; 

       } 

 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/TestSampleWebapi-527491028  

 

Please get back to us if you need further assistance. 

 

Regards, 

Thavasianand S.

[danacon]

Hi Thavasianand, many thanks for this! i didn't realise you could setup a new datasource at field level, that will be very useful :)

I will download your sample and test it out, then if i have any more questions i will reply here in this thread

cheers

dan

[Thavasianand Sankaranarayanan]

Hi Dan, 

Thanks for your update. 

We will wait to hear from you. 

Regards, 

Thavasianand S.