.NET中Syncfusion GridView无法随Dropdownlist选择更新问题

你的代码无法正常实现筛选功能，核心问题有两个：

• 使用了addParams方法，它仅用于给远程数据源传递参数，而你的Grid绑定的是本地数据（@ViewBag.dataSource），需要用filter方法实现本地数据筛选。
• 设置查询条件后未调用Grid的refresh()方法，导致Grid不会重新渲染数据。

以下是修正后的完整代码：

修正后的视图代码 #

<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 carGrid = document.getElementById("carGrid").ej2_instances[0];
    if (e.value === "0") {
        // 选择默认值时显示全部数据
        carGrid.query = new ej.data.Query();
    } else {
        // 根据选中的Model筛选Grid数据
        carGrid.query = new ej.data.Query().filter(new ej.data.Filter("Model", "equal", e.value));
    }
    // 刷新Grid以应用筛选结果
    carGrid.refresh();
}
</script>

关键修正点说明 #

1. 替换筛选逻辑：用filter方法替代addParams，通过ej.data.Filter构造函数创建匹配Model字段的筛选条件。
2. 添加Grid刷新：调用carGrid.refresh()触发Grid重新渲染，确保筛选结果立即生效。
3. 处理默认值：当选中初始值"0"时，重置查询条件以恢复显示所有数据。

另外，请确保已正确引入Syncfusion的必要脚本（如ej2-base.js、ej2-grids.js、ej2-dropdowns.js），否则ej.data等命名空间可能无法正常使用。

内容的提问来源于stack exchange，提问作者mZC