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

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

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

3 Replies

TS Thavasianand Sankaranarayanan Syncfusion Team May 16, 2019 02:25 AM

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() }; 
       } 
 
 
Please get back to us if you need further assistance. 
 
Regards, 
Thavasianand S.


DA danacon May 16, 2019 08:05 AM

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



TS Thavasianand Sankaranarayanan Syncfusion Team May 16, 2019 09:50 PM

Hi Dan, 

Thanks for your update. 

We will wait to hear from you. 

Regards, 
Thavasianand S. 


Loader.
Live Chat Icon For mobile
Up arrow icon