Populate Grid based on Value Selected in Dropdown

[Danyelle]

I want to populate a grid based on the value selected in drop-down. I will be using a ViewModel

code:

testhistory.chtml

using IM.TestHistoryViewModel

When the user selects/enters a tool the gird will populate with the history of the tool.

[Danyelle]

I have pretty much figured this out using the submit button. How would I populate the grid automatically when the user enters/selects a value?

When I send the data to the home controller I am losing the tools list. How do I pass it to the home controller on post?

Code:

TestHistroy.cshtml

<form asp-action="TestHistory" method="post">

    <div class="row mt-2">

        <div class="col-sm-6 col-lg-6 col-md-6">

            <ejs-combobox id="toolID" name="ToolID" dataSource="@Model.Tools" value="@Model.ToolID" placeholder="Tool ID" floatLabelType="Always">

                <e-combobox-fields value="ToolID"></e-combobox-fields>

            </ejs-combobox>

        </div>

    </div>

    <div class="row mt-2">

        <div class="col-sm-6 col-lg-6 col-md-6">

            <div id="submitbutton">

                <ejs-button id="submitButton" content="Submit"></ejs-button>

            </div>

        </div>

    </div>

</form>

 <div class="row mt-2">

        <ejs-grid id="Grid" dataSource="@Model.TestHistory" height="510px" allowPaging="true" allowSorting="true" allowFiltering="true" allowGrouping="true" allowReordering="true" allowResizing="false" allowMultiSorting="true" allowPdfExport="true" allowExcelExport="true" toolbarClick="toolbarClick" toolbar="@(new List<string>() {"Print", "PdfExport", "ExcelExport", "Search"})">

            <e-grid-filterSettings type="Excel"></e-grid-filterSettings>

            <e-grid-pagesettings pageCount="6" pageSize="16" pageSizes="@(new string[] {"5", "10", "16", "20", "All"})"></e-grid-pagesettings>

            <e-grid-sortsettings columns="cols"></e-grid-sortsettings>

            <e-grid-columns>

                <e-grid-column field="Created" headerText="Testing Date" customFormat="@(new {type = "date", format = "MM/dd/yyyy"})"></e-grid-column>

                ...

            </e-grid-columns>

        </ejs-grid>

    </div>

Home.cs

 [HttpPost]

        public IActionResult TestHistory(TestHistoryViewModel toolTestHistory)

        {

            //Validate User selected tool value

    //Do stuff;

            return View(toolTestHistory);

        }

[Rajapandiyan Settu]

Hi Danyelle, 

Thanks for contacting Syncfusion support. 

 

Query: ​ When I send the data to the home controller I am losing the tools list. How do I pass it to the home controller on post? 

 

We have validated your requirement at our end. By default, When we submit the form it only send the input field value (with its id/name) to the controller side. So we need to define its field name with proper datatype in the controller to retrieve the value. This is the default behavior of Form submit action. Please find the below code example and screenshots for more information. 

 

[index.cshtml] 

 

@model filter_core.Models.data; 

@using Syncfusion.EJ2; 

 

<form asp-controller="Home" asp-action="Index" method="post"> 

    <div class="row mt-2"> 

        <div class="col-sm-6 col-lg-6 col-md-6"> 

            <ejs-combobox id="ToolID" name="ToolID" dataSource="@Model.Tools" value="@Model.ToolID" placeholder="Tool ID" floatLabelType="Always" width="200"> 

                <e-combobox-fields value="ToolID"></e-combobox-fields> 

            </ejs-combobox> 

        </div> 

    </div> 

 

    <div class="row mt-2"> 

        <div class="col-sm-6 col-lg-6 col-md-6"> 

            <div id="submitbutton"> 

                <ejs-button id="submitButton" content="Submit"></ejs-button> 

            </div> 

        </div> 

    </div> 

</form> 

 

<div class="container"> 

    <ejs-grid id="Grid" dataSource="@Model.orderData" ----> 

        ------- 

    </ejs-grid> 

</div> 

[Home.controller.cs] 

 

        public ActionResult Index(int ToolID) // use input field id with proper datatype (int) to retrieve data 

        { 

           // do your action 

            data data = new data(); 

            List<OrderDetail> orderData; 

            if (ToolID > 0) 

            { 

               orderData = data.GetAllRecords().Where(item => item.EmployeeID == ToolID).ToList(); 

 

                data.ToolID = ToolID; 

            } 

            else 

            { 

               orderData = data.GetAllRecords(); 

            } 

            data.orderData = orderData; 

            data.Tools = data.GetAllRecordsTools(); 

            return View(data); 

        } 

 

  

Screenshot #1: Submitting the form the sends the input value with its id/name to the controller side 

 

 

 

Screenshot #2: Use input field’s id/name with the proper datatype to retrieve the value. 

 

 

 

 

We have prepared a sample for your reference. You can get it from the below link, 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/core_modelBinding_formsubmit522971189.zip 

 

Please get back to us if you  need further assistance with this. 

 

Regards, 

Rajapandiyan S 

[Danyelle]

How would I populate the grid automatically when the user enters/selects a value?

The numeric text box is blank when it loads it the user were to select or enter 7 can I want to submit the form without having to have a button.

[Rajapandiyan Settu]

Hi Danyelle, 

Thanks for your update. 

 

Query: ​ How would I populate the grid automatically when the user enters/selects a value? 

We have validated your requirement at our end. You can achieve your requirement by using change event of combobox. It will be triggered when an item in a popup is selected or when the model value is changed by user.  

 

Change event of ComboBox: https://ej2.syncfusion.com/documentation/api/combo-box#change 

 

In that event, we get the form element by its id and submit() the form, it will populate the Grid based on the selected data. Refer to the below code example and sample for more information. 

 

[index.cshtml] 

 

@model filter_core.Models.data; 

@using Syncfusion.EJ2; 

 

<form id="formtoupdategrid" asp-controller="Home" asp-action="Index" method="post"> 

    <div class="row mt-2"> 

        <div class="col-sm-6 col-lg-6 col-md-6"> 

            <ejs-combobox id="ToolID" name="ToolID" dataSource="@Model.Tools" value="@Model.ToolID" placeholder="Tool ID" floatLabelType="Always" width="200" change="comboBoxChange"> 

                <e-combobox-fields value="ToolID"></e-combobox-fields> 

            </ejs-combobox> 

        </div> 

    </div> 

</form> 

 

<div class="container"> 

    <ejs-grid id="Grid" dataSource="@Model.orderData" ----> 

        ----- 

    </ejs-grid> 

</div> 

 

<script> 

 

    function comboBoxChange(args) { 

// get the form element 

        var form = document.getElementById('formtoupdategrid'); 

// submit the form 

        form.submit(); 

    } 

</script> 

 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/core_modelbinding_grid-1666274845.zip 

 

Please get back to us if you  need further assistance with this. 

 

Regards, 

Rajapandiyan S