DropDownList with ForeignKey in InlineFormTemplate

[CLAUDIO RICCARDI]

Hi, 

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:

<div>

    @(Html.EJ().Grid<SlimHub.Models.Equipment>("QuoteGrid")

          .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"); })

          .Locale("it-IT")

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

              });

          })

          .EnableAltRow()

          .AllowResizing()

          .AllowTextWrap(false)

          .EnableHeaderHover()

          .AllowFiltering()

          .AllowPaging()

          .FilterSettings(filter => { filter.FilterType(FilterType.Excel); })

          .Columns(col =>

          {

              col.Field("CustomerId").HeaderText("Cliente").ForeignKeyField("CustomerId").ForeignKeyValue("CustomerName").DataSource((IEnumerable<object>)ViewBag.Customers).HeaderTextAlign(TextAlign.Center).Width(5).Add();

              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("QuoteCode").HeaderText("Codice").HeaderTextAlign(TextAlign.Center).Width(2).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"); })

          )

</div>

@section ScriptSection{

    <script id="inlineQuoteTemplate" type="text/template">

        <b>Dettagli Offerta</b>

        <table cellspacing="10">

            <tr>

...

                <td style="text-align: left">

                    @Html.DropDownList("CustomerId", new SelectList(ViewBag.CustList, "CustomerId", "CustomerName"))  ???HOW CAN I SET DEFAULT SELECTED CUSTOMER ID???

                </td>

            </tr

...

        </table>

    </script>

}

Can anybody help me? Thanks in advance!

[Venkatesh Ayothi Raman]

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: 

<Grid> 

@(Html.EJ().Grid<InlineFormtemplate.OrdersView>("ForeignKey") 

        .Datasource((IEnumerable<object>)ViewBag.dataSource1) 

         . . . 

        .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing().EditMode(EditMode.InlineFormTemplate).InlineFormTemplateID("#Inlineform"); }) 

        . . . 

        .Columns(col => 

        { 

            . . . 

            col.Field("EmployeeID").HeaderText("Employee Name").ForeignKeyField("EmployeeID") 

               .ForeignKeyValue("FirstName").DataSource((IEnumerable<object>)ViewBag.dataSource2) 

               .TextAlign(TextAlign.Left).Width(90).Add(); 

            

            . . . 

        }).ClientSideEvents(eve => 

        { 

            eve.ActionComplete("actionComplete"); 

        }) 

) 

<InlineForm template> 

 

<script id="Inlineform" type="text/template"> 

    <b>Order Details</b> 

    <table cellspacing="10"> 

         

        <tr> 

            <td style="text-align: right;"> 

                EmployeeID 

            </td> 

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

                </select> 

            </td> 

        </tr> 

 

    </table> 

</script> 

 

<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' }); 

        } 

    } 

</script> 

Sample:http://www.syncfusion.com/downloads/support/directtrac/general/7z/InlineFormtemplate1457519291 

Regards, 

Venkatesh Ayothiraman. 

[CLAUDIO RICCARDI]

Thank you very much!

Problem solved!

Claudio

[Venkatesh Ayothi Raman]

Hi Claudio, 

Thank you for your feedback. 

We are happy to hear that your requirement is achieved. 

Regards, 

Venkatesh Ayothiraman. 

[Leon]

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-columns>

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

    </e-columns>

</ej-grid>

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:

https://help.syncfusion.com/aspnet-core/grid/columns?cs-save-lang=1&cs-lang=razor#foreign-key-column

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

[Venkatesh Ayothi Raman]

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-columns> 

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

    </e-columns> 

</ej-grid> 

  

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,  

Help documentation: https://help.syncfusion.com/aspnet-core/grid/columns#foreign-key-column 

Regards, 

Venkatesh Ayothiraman.