.NET, Gridview not updating on Dropdownlist Selection

Question

I have a syncfusion grid with data from a DB, i also have a synfusion dropdownlist, im trying to make the Grid to display/ or filter only the value that im selecting from the dropdown list.

but its not working,

Please see attached images for reference

index code index script code

<div class="panel-container show">
    <div class="panel-content">
        <div class="row row-posoffset">
            <ul class="list-group col-xs-4">
                <li class="list-group-item right-margin-10">
                    <h3>DropDown</h3>

                    <ejs-dropdownlist id="filterDropDown" dataSource="@ViewBag.dataSource" value="0" placeholder="Select Model" width="300" change="change" popupHeight="220px">
                      
                        <e-dropdownlist-fields text="Model" value="Model"></e-dropdownlist-fields>
                    </ejs-dropdownlist>
                    <ejs-grid id="carGrid" dataSource="@ViewBag.dataSource" allowPaging="true" allowFiltering="false">
          
                            <e-grid-columns>
                            <e-grid-column field="Id" isPrimaryKey="true" allowEditing="true" headerText="Id" visible="false" textAlign="Left"></e-grid-column>
                            <e-grid-column field="Make" headerText="Make" visible="true"></e-grid-column>
                            <e-grid-column field="Model" headerText="Model" visible="true"></e-grid-column>
                            <e-grid-column field="Color" headerText="Color" visible="true"></e-grid-column>
                            <e-grid-column field="MaxSpeed" headerText="MaxSpeed" visible="true" textAlign="Center"></e-grid-column>
                            <e-grid-column type="dateTime" field="BuildDate" headerText="BuilDDate" visible="true"  customFormat="@(new {type = "datetime", format = "M/d/y" })" width="160"></e-grid-column>
                            </e-grid-columns>
                     </ejs-grid>
                </li>
            </ul>
        </div>
    </div>
</div>



<script>

 function change(e) {
            var value = e.value
            var carGrid = document.getElementById("carGrid").ej2_instances[0];
carGrid.query = new ej.data.Query().addParams('Model', e.itemData.Model);

</script>

Please provide enough code so others can better understand or reproduce the problem. — Community, Dec 12 '22 at 16:20
i just added my index code, im sorry im new, please let me know if more code is needed. thank you all for helping me out — Miguel Zacaula, Dec 12 '22 at 16:32
Are you setting the same data source for both dropdown and datagrid? — Mauricio Atanache, Dec 12 '22 at 16:58
@MauricioAtanache, hi Mauricio, yes i am setting the same datasource — Miguel Zacaula, Dec 12 '22 at 17:19
Hi Miguel, I don't get why are you doing it, if your dropdown is supposed to act as a filter to your grid when something is selected, how come you use the same data source for both? If you see in the answer provided, different data sources are used for each control. — Mauricio Atanache, Dec 13 '22 at 14:19

score 0 · Accepted Answer · answered Dec 13 '22 at 09:31

Here is a working simple demo:

OrdersDetails:

public class OrdersDetails {
        public int Id { get; set; }
        public string Name { get; set; }
        public OrdersDetails() { 
        
        }
        public OrdersDetails(int id,string name)
        {
            Id = id;
            Name = name;
        }
    }

view:

@{
    var data = new string[] { "Badminton", "Basketball", "Cricket", "Football", "Golf"};
    List<OrdersDetails> order = new List<OrdersDetails>();
    if (order.Count() == 0)
    {
        int code = 10000;
        for (int i = 1; i < 5; i++)
        {
            order.Add(new OrdersDetails(code + 1, "Badminton"));
            order.Add(new OrdersDetails(code + 2, "Basketball"));
            order.Add(new OrdersDetails(code + 3, "Cricket"));
            order.Add(new OrdersDetails(code + 4, "Football"));
            order.Add(new OrdersDetails(code + 5, "Golf"));
            code += 5;
        }
    }
}

<ejs-dropdownlist id="filterDropDown" dataSource="@data" value="0" placeholder="Select Model" width="300" change="change" popupHeight="220px">

    <e-dropdownlist-fields text="Model" value="Model"></e-dropdownlist-fields>
</ejs-dropdownlist>
<ejs-grid id="carGrid" dataSource="@order" allowPaging="true" allowFiltering="false">
    <e-grid-columns>
        <e-grid-column field="Id" isPrimaryKey="true" allowEditing="true" headerText="Id" visible="true" textAlign="Left"></e-grid-column>
        <e-grid-column field="Name" headerText="Name" visible="true"></e-grid-column>

    </e-grid-columns>
</ejs-grid>

js:

 function change(e) {
            var value = e.value
            var carGrid = document.getElementById("carGrid").ej2_instances[0];
            carGrid.search(value);
        }

result:

Hello, thank you so much for your help, i follow your sample, just with a little modifications on my end, and i was able to get the result that i was looking for. — Miguel Zacaula, Dec 14 '22 at 14:00

.NET, Gridview not updating on Dropdownlist Selection

1 Answers1