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

Answer 1

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: