Get data based on dropdownlist

[Daniel]

Hi,

I am new in MVC, I have a requirement where I have to show data in two grids and a other controls (Textbox, datepicker and dropdownlist) based on dropdownlist value selected. I am stuck in how to display the data in each controls after select the value in dropdownlist.

Thanks,

[Ponmani Murugaiyan]

Hello Daniel, 

 

Greetings from Syncfusion support. 

We have validated your reported query. As per your requirement, you can load the data in other controls by using change event of Dropdownlist control. We have prepared sample for your reference. Please find the code snippet and test sample below. 

[Index.cshtml] 

 

  <div id="drodpown"> 

    @Html.EJS().DropDownList("games").Width("300px").Change("changeHandler").Placeholder("Select a game").PopupHeight("200px").PopupWidth("300px").DataSource((IEnumerable<object>)ViewBag.data).Render() 

</div> 

<div id="textbox"> 

    @Html.EJS().TextBox("firstname").Value("company").Placeholder("First Name").Render() 

</div> 

<div id="date"> 

    @Html.EJS().DatePicker("datepicker").Value(ViewBag.value).Render() 

</div> 

 

    <script type="text/javascript"> 

 

        function changeHandler(args) { 

            var textObj = document.getElementById('firstname').ej2_instances[0]; 

            var dateObj = document.getElementById('datepicker').ej2_instances[0]; 

            if (args.value == "Badminton") { 

                textObj.value = "Syncfusion"; 

                dateObj.value = new Date("12/10/2020"); 

            } 

            if (args.value == "Basketball") { 

                textObj.value = "Abc"; 

                dateObj.value = new Date("11/5/2020"); 

            } 

            if (args.value == "Gymnastics") { 

                textObj.value = "cfv"; 

                dateObj.value = new Date("03/04/2020"); 

            } 

        } 

    </script> 

 

 

 

 

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

Kindly check with the above sample. If you need further assistances, please get back us. 

 

Regards, 

Ponmani M 

[Daniel]

Hi Ponmani,

Thanks for assistance,

How can to do for retrieve the data from controller?

Thanks

[Ponmani Murugaiyan]

Hello Daniel, 

 

Good day to you. 

 

Based on your requirement we have modified the sample ‘While dynamically change DropDownList value, update value of datepicker and textbox from controller’. Please find the code example and sample for your reference. 

 

[Index.cshtml] 

 

<script type="text/javascript"> 

function changeHandler(args) { 

    var textObj = document.getElementById('firstname').ej2_instances[0]; 

    var dateObj = document.getElementById('datepicker').ej2_instances[0]; 

    if (args.value == "Badminton") { 

        textObj.value = '@Html.Raw(ViewBag.text1)'; 

        dateObj.value = '@Html.Raw(ViewBag.date1)'; 

    } 

    if (args.value == "Basketball") { 

        textObj.value = '@Html.Raw(ViewBag.text2)'; 

        dateObj.value = '@Html.Raw(ViewBag.date2)'; 

    } 

    if (args.value == "Gymnastics") { 

        textObj.value = '@Html.Raw(ViewBag.text3)'; 

        dateObj.value = '@Html.Raw(ViewBag.date3)'; 

    } 

} 

</script> 

 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication1-515425102 

Kindly check with the above provided sample. If you need further assistances, please get back us. 

 

Regards, 

Ponmani M 

[Daniel]

Hello Daniel, 

 

Good day to you. 

 

Based on your requirement we have modified the sample ‘While dynamically change DropDownList value, update value of datepicker and textbox from controller’. Please find the code example and sample for your reference. 

 

[Index.cshtml] 

 

<script type="text/javascript"> 

function changeHandler(args) { 

    var textObj = document.getElementById('firstname').ej2_instances[0]; 

    var dateObj = document.getElementById('datepicker').ej2_instances[0]; 

    if (args.value == "Badminton") { 

        textObj.value = '@Html.Raw(ViewBag.text1)'; 

        dateObj.value = '@Html.Raw(ViewBag.date1)'; 

    } 

    if (args.value == "Basketball") { 

        textObj.value = '@Html.Raw(ViewBag.text2)'; 

        dateObj.value = '@Html.Raw(ViewBag.date2)'; 

    } 

    if (args.value == "Gymnastics") { 

        textObj.value = '@Html.Raw(ViewBag.text3)'; 

        dateObj.value = '@Html.Raw(ViewBag.date3)'; 

    } 

} 

script> 

 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication1-515425102 

Kindly check with the above provided sample. If you need further assistances, please get back us. 

 

Regards, 

Ponmani M 

Hi Ponmani,

Thanks for the help.

I trying to populate a textbox and a grid but I cannot, I expected the controls show me values but it doesn't, I don't know if my function changeHandler is correct.

 function changeHandler(args) {
            var quoteObj = document.getElementById('ddlQuote').ej2_instances[0];
            var textObj = document.getElementById('PONumber').ej2_instances[0];
            $.ajax({
                url: "/Home/Dropdown",
                type: "POST",
                dataType: "json",
                data: { "quote": quoteObj.text },
                success: function (data) {
                    textObj.value = '@Html.Raw(ViewBag.text1)';
                    var grid = $("#Flat").ejGrid("instance");
                    grid.dataSource(data);
                }
            });

Controller

    public ActionResult Dropdown(string quote)
        {
            DevContext context = new DevContext();
            var customers = context.TBL_CUSTOMERS.ToList();
            ViewBag.text1 = "N24658";

            return Json(customers, JsonRequestBehavior.AllowGet);
        }

Thanks,

[Ponmani Murugaiyan]

Hi Daniel,  

   

Before we proceed, we would like to confirm the following details.  

   

1. Confirm whether are you using EJ1 or EJ2 grid. Because the shared screenshots are related with EJ2 grid and the shared code is related with EJ1 Grid.
2. Also, share the complete grid code example.

   

Regards,  

Ponmani M 

[Daniel]

Hi Ponmani,

     1. Confirm whether are you using EJ1 or EJ2 grid. Because the shared screenshots are related with EJ2 grid and the shared code is related with EJ1 Grid.

          I am using EJ2 Grid.

     2. Also, share the complete grid code example.

 @Html.EJS().Grid("Flat").DataSource((System.Data.DataTable)ViewBag.dataSource).Columns(col =>
          {
           col.Field("OrderID").HeaderText("Order ID").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("120").Add();
           col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("90").Add();
           col.Field("CustomerID").HeaderText("Customer Name").Width("70").Add();
           col.Field("Freight").HeaderText("Freight").Format("C2").Width("90").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
           col.Field("ShipCountry").HeaderText("Ship Country").Width("130").Add();
           col.Field("OrderDate").HeaderText("Order Date").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Add();

          }).AllowPaging().Render()

Thanks,

[Ponmani Murugaiyan]

Hi Daniel,  

   

Thanks for your update.  

   

Query : I trying to populate a textbox and a grid but I cannot, I expected the controls show me values but it doesn't, I don't know if my function changeHandler is correct.  

   

As per your requirement we have changed the grid dataSource while changing the dropDown value. Please refer the below code example and sample for more information.  

   

  

<div id="drodpown">  

    @Html.EJS().DropDownList("games").Width("300px").Change("changeHandler").Placeholder("Select a game").PopupHeight("200px").PopupWidth("300px").DataSource((IEnumerable<object>)ViewBag.data).Render()  

</div>  

<div id="textbox" style="width:100px">  

    @Html.EJS().TextBox("PONumber").Value("company").Placeholder("First Name").Render()  

</div>  

@Html.EJS().Grid("Flat").DataSource((IEnumerable<object>)ViewBag.DataSource1).Columns(col =>  

         {  

          col.Field("OrderID").HeaderText("Order ID").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("120").Add();  

          col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("90").Add();  

          col.Field("CustomerID").HeaderText("Customer Name").Width("70").Add();  

         }).AllowPaging().Render()  

<script type="text/javascript">  

  

    function changeHandler(args) {  

        var textObj = document.getElementById('PONumber').ej2_instances[0];  

// get the grid instances by element ID  

        var gridObj = document.getElementById("Flat").ej2_instances[0];  

        if (args.value == "Badminton" || args.value == "Basketball" || args.value == "Gymnastics") {  

// create the ajax  

            var ajax = new ej.base.Ajax({  

                url: "/Home/GridData1",  

                type: "POST",  

                contentType: "application/json"  

            });  

// send ajax post to the server & receive the data returned from the server  

            ajax.send().then(function (data) {  

              textObj.value = '@Html.Raw(ViewBag.text1)';  

// convert the JSON string into JSON object  

                var data = JSON.parse(data);  

                console.log(data.result);  

// bind the JSON object to the grid   

                gridObj.dataSource = data.result;  

            }).catch(function (xhr) {  

                console.log(xhr);  

            });  

        }  

    }  

</script>  

  

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

The EJ2 Grid only handles the dataSource of JSON objects. Please refer the below documentation.  

  

UG : https://ej2.syncfusion.com/aspnetmvc/documentation/grid/data-binding/#list-binding    

  

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

  

Regards,  

Ponmani M 

[Daniel]

Hi Ponmani,

Thanks for the support,

The grid already loading the data when the dropdownlist is changed, but I would like to filter the data in the controller with the value selected from dropdownlist, how can to do that?

Thanks,

[Ponmani Murugaiyan]

Hello Daniel, 

 

Good day to you. 

 

We have validated your reported query. As per your requirement, we have prepared sample with filter the data in controller. Please find the code snippet and test sample below for reference.  

 

[HomeController.cs] 

 

    if (dm.where != null) 

    { 

        Data = (from cust in Data 

                where cust.ShipCountry.ToLower().StartsWith(dm.@where[0].value.ToString()) 

                select cust).ToList(); 

    } 

    if (dm.take != 0) 

        Data = Data.Take(dm.take).ToList(); 

    return Json(Data); 

} 

 

 

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

Kindly check with the above provided sample. If you need further assistances, please get back us. 

 

Regards, 

Ponmani M 

[Daniel]

Hi Ponmani,

Thanks for the help!

Regards,

[Ponmani Murugaiyan]

Hello Daniel, 

  

Thanks for the update. 

  

Regards, 

Ponmani M