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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

DropDownList with ForeignKey in InlineFormTemplate

Thread ID:





124983 Jul 12,2016 03:36 PM UTC Jun 19,2017 10:54 AM UTC ASP.NET MVC 5
Tags: Grid
Asked On July 12, 2016 03:36 PM UTC


I'm tying to use InlineFormTemplate for Grid Editing.

In the Grid there is a ForeignKey Column which is correctly rendered in InlineForm Editing as a dropdownlist with selected value.

If I use InlineFormTemplate I'm not able to render the dropdownlist correctly: the dropdownlist is populated correctly  but the default selected vaalue is not set.

This is an excerpt of the code:

          .Datasource(ds => ds.Json((IEnumerable<object>) ViewBag.dataSource).UpdateURL("NormalUpdate").InsertURL("NormalInsert").RemoveURL("NormalDelete").Adaptor(AdaptorType.RemoteSaveAdaptor))
          .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing().EditMode(EditMode.InlineFormTemplate).InlineFormTemplateID("#inlineQuoteTemplate"); })
          .ToolbarSettings(toolbar =>
              toolbar.ShowToolbar().ToolbarItems(items =>
          .FilterSettings(filter => { filter.FilterType(FilterType.Excel); })
          .Columns(col =>
              col.Field("QuoteId").HeaderText("ID").HeaderTextAlign(TextAlign.Center).IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(5).Visible(false).ValidationRules(v => v.AddRule("required", true).AddRule("number", true)).Add();
              col.Field("InsertDate").HeaderText("Data Inserimento").EditType(EditingType.Datepicker).Width(0).Add();
              col.Field("StartDate").HeaderText("Data Inizio Validità").EditType(EditingType.Datepicker).Width(10).Add();
              col.Field("EndDate").HeaderText("Data Fine Validità").EditType(EditingType.Datepicker).Width(10).Add();
              col.Field("NumInt").HeaderText("Numero Interventi").HeaderTextAlign(TextAlign.Right).Width(5).Add();
              col.Field("NumIntGrat").HeaderText("Numero Interventi Gratuiti").HeaderTextAlign(TextAlign.Right).Width(5).Add();
              col.Field("UnitPrice").Format("{0:c2}").HeaderText("Prezzo Unitario").HeaderTextAlign(TextAlign.Center).TextAlign(TextAlign.Right).Width(5).Add();
          .ClientSideEvents(eve => { eve.ActionComplete("complete"); })

@section ScriptSection{
    <script id="inlineQuoteTemplate" type="text/template">
        <b>Dettagli Offerta</b>
        <table cellspacing="10">
                <td style="text-align: left">
                    @Html.DropDownList("CustomerId", new SelectList(ViewBag.CustList, "CustomerId", "CustomerName"))  ???HOW CAN I SET DEFAULT SELECTED CUSTOMER ID???

Can anybody help me? Thanks in advance!

Venkatesh Ayothi Raman [Syncfusion]
Replied On July 13, 2016 10:34 AM UTC

Hi Claudio, 

Thank you for contacting Syncfusion support. 

We can manually set the default select value for Foreignkey column by using ActionComplete event when we use template form editing. For Foreign key column, we should give the ForeignkeyField value instead of ForeignkeyValue. Also we have created a sample for your requirement. Please refer to the code example and Sample, 
Code example: 
         . . . 
        .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing().EditMode(EditMode.InlineFormTemplate).InlineFormTemplateID("#Inlineform"); }) 
        . . . 
        .Columns(col => 
            . . . 
            col.Field("EmployeeID").HeaderText("Employee Name").ForeignKeyField("EmployeeID") 
            . . . 
        }).ClientSideEvents(eve => 
<InlineForm template> 
<script id="Inlineform" type="text/template"> 
    <b>Order Details</b> 
    <table cellspacing="10"> 
            <td style="text-align: right;"> 
            <td style="text-align: left"> 
                <select id="EmployeeID" name="EmployeeID"> 
                    <option value=1>Nancy</option> 
                    <option value=2>Andrew</option> 
                    <option value=3>Janet</option> 
                    <option value=4>Margaret</option> 
                    <option value=5>Robert</option> 
                    <option value=6>Michael</option> 
                    <option value=7>Steven</option> 
                    <option value=8>Laura</option> 
                    <option value=9>Anne</option> 
<ActionComplete event> 
<script type="text/javascript"> 
    function actionComplete(args) { 
        if ((args.requestType == "beginedit" || args.requestType == "add") && args.model.editSettings.editMode == "inlineformtemplate") { 
            $("#ShipCountry").ejDropDownList({ width: '116px' }); 
            $("#EmployeeID").ejDropDownList({ width: '116px' }); 
            if (args.requestType == "beginedit") { 
                $("#OrderID").attr("disabled", "disabled"); 
                var rowIndex = args.rowIndex; //Get the Row index 
 var ForeignKeyValue = args.model.currentViewData[rowIndex]["EmployeeID"]; // Get the EmployeeID value 
$("#ShipCountry").ejDropDownList("setSelectedValue",            args.row.children().eq(4).text()); 
                $("#EmployeeID").ejDropDownList("setSelectedValue", ForeignKeyValue); // Set the Foreignkey value for dropdown list 
     $(".e-field").css({ 'width': '116px', 'text-align': 'left' }); 

Venkatesh Ayothiraman. 

Replied On July 13, 2016 03:28 PM UTC

Thank you very much!

Problem solved!


Venkatesh Ayothi Raman [Syncfusion]
Replied On July 14, 2016 03:59 AM UTC

Hi Claudio, 

Thank you for your feedback. 

We are happy to hear that your requirement is achieved. 

Venkatesh Ayothiraman. 

Replied On June 16, 2017 03:50 PM UTC

I am working on ASP.Net core and I want to stay in Razor as much as possible.... Is all the JScript required? 

in my test I have 

<ej-grid id="FlatGrid" allow-paging="true" allow-reordering="true"  datasource="ViewBag.DataSource1">
     <e-edit-settings allow-editing="true" allow-adding="true" />
        <e-column field="Name" header-text="Name" text-align="Left" width="70"></e-column>
        <e-column field="LastName" header-text="Last Name" text-align="Left" width="80"></e-column>
        <e-column field="DOB" header-text="Birth Date" text-align="Left" width="80" format="{0:dd/MM/yyyy}"></e-column>
        <e-column field="DepartmentID" header-text="Department" foreign-key-field="ID" foreign-key-value="Name" text-align="Left" width="80"></e-column>

In the server side I have:

        public async Task<IActionResult> Index()
            //return View(await _context.Employees.ToListAsync());

            ViewBag.DataSource1 = await _context.Employees.ToListAsync();
            ViewBag.DataSource2 = await _context.Departments.ToListAsync();
            return View();

But when the grid renders it only show the ID of the department not the Name. What am I doing wrong? 

I am looking at your sample at:


But what does not make sense id the code : <ej-grid id="FlatGrid" allow-paging="true" datasource="ViewBag.DataSource">

Venkatesh Ayothi Raman [Syncfusion]
Replied On June 19, 2017 10:54 AM UTC

Hi Juan, 

Sorry for the inconvenience caused. 

We have wrongly mentioned the foreign key column in that “https://help.syncfusion.com/aspnet-core/grid/columns?cs-save-lang=1&cs-lang=razor#foreign-key-column” UG documentation. Please refer to the following code example for get the foreignkey value, 
Code example: 
<ej-grid id="FlatGrid" allow-paging="true" datasource="@ViewBag.DataSource1"> 
    <e-edit-settings allow-editing="true" allow-adding="true" allow-editing="true" /> 
        <e-column field="OrderID" is-primary-key="true"></e-column> 
        <e-column field="EmployeeID" header-text="first Name" foreign-key-field="EmployeeID" foreign-key-value="FirstName" datasource="@ViewBag.DataSource2"></e-column> 
        <e-column field="CustomerID"></e-column> 
        <e-column field="Freight"></e-column> 
        <e-column field="ShipCity"></e-column> 
Note: We should define the foreign key data source for foreign key column. 
We have also made changes in UG documentation and modification was refreshed in live. Please refer to the following Help documentation,  

Venkatesh Ayothiraman. 


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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

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