根据下拉更改绑定/重新绑定 Kendo Grid

Posted 2023-05-07

【中文标题】根据下拉更改绑定/重新绑定 Kendo Grid

【英文标题】：Bind/Rebind Kendo Grid based on dropdown change

【发布时间】：2014-05-05 17:46:22

【问题描述】：

我有一个剑道网格，我需要根据不在网格中的下拉列表的值在初始页面加载时绑定它。我需要根据该下拉列表中的用户选择重新绑定网格。我很接近，但我不知道该怎么做，也找不到一个例子。我不确定我需要在我需要为下拉列表编写的 onchange 事件中添加什么（它当前是一个空字符串，这当然是错误的）。

欢迎任何帮助！

这是标记：

        <div class="editor-label">
        @html.Label("Storeroom List")
    </div>
    <div class="editor-field">
        @Html.DropDownList("StoreroomID", new SelectList(ViewBag.storeroomNames, "RoomID", "RoomID"), "-- Select Storeroom --", new  @onchange = "" )
    </div>
<br />

@(Html.Kendo().Grid(Model)
.Name("BatchGrid")
.Pageable()
.Sortable()
.Scrollable()
.HtmlAttributes(new  style = "height:675px; width:1200px" )
.Columns(columns =>
            
                columns.Bound(b => b.BatchID)
                                    .Width("300px")
                                    .Title("Batch ID");
                columns.Bound(b => b.HasErrorTransaction)
                                    .Width("50px")
                                    .Title("Err");
                columns.Command(c => c.Custom("Post Batch").Click("onClickPostBatch").HtmlAttributes(new  style = "width:100px;" ));
                columns.Bound(b => b.Created_Emp_Name)
                                    .Width("200px")
                                    .Title("Created Employee");
                columns.Bound(b => b.Transmitted_DateTime)
                                    .Width("175px")
                                    .Format("0:MM/dd/yyyy hh:mm tt")
                                    .Title("Transmitted");
                columns.Bound(b => b.Completed_DateTime)
                                    .Width("175px")
                                    .Format("0:MM/dd/yyyy hh:mm tt")
                                    .Title("Completed");
                columns.Command(c => c.Custom("Delete Batch").Click("onClickDeleteBatch").HtmlAttributes(new  style = "width:100px;" ));
            
        )
    .DataSource(dataSource => dataSource
        .Ajax()
        .Sort(sort => sort.Add("HasErrorTransaction").Ascending()) // <-- initial sort
        .PageSize(40)
        .Read(read => read.Action("FetchBatchCollection", "Home").Data("addlDataStoreroom"))
        .ServerOperation(false)
    )
    .ClientDetailTemplateId("transactions")
    //.Events(events => events.DataBound("dataBound"))
)

这是我用于网格的附加数据子句的 javascript

    function addlDataStoreroom() 
    var selsectedStoreRoomId = $("#StoreRoomID").val();
    if (selsectedStoreRoomId == '-- Select Storeroom --')
        selsectedStoreRoomId = null;

    return  storeroomId: selsectedStoreRoomId ;

【参考方案1】：

在Reloading/refreshing Kendo Grid 找到了我正在寻找的答案（必须正确地提出问题！）。在这里说明一下，答案如下（为了清楚起见，我显示了完整的代码：

当从下拉列表中选择一个值时，将调用 refreshGrid 方法，该方法又调用在网格的 Read 属性上定义的 addlDataStoreroom。然后 refreshGrid 的第二行使网格调用控制器代码并重新绑定到结果数据集。

这是javascript：

    function addlDataStoreroom() 
    var selsectedStoreRoomId = $("#StoreroomID").val();
    if (selsectedStoreRoomId == '-- Select Storeroom --')
        selsectedStoreRoomId = null;

    return  storeroomId: selsectedStoreRoomId ;


function refreshGrid()

    $("#BatchGrid").data('kendoGrid').dataSource.read();
    $("#BatchGrid").data('kendoGrid').refresh();

这是标记：

        <div class="editor-label">
        @Html.Label("Storeroom List")
    </div>
    <div class="editor-field">
        @Html.DropDownList("StoreroomID", new SelectList(ViewBag.storeroomNames, "RoomID", "RoomID"), "-- Select Storeroom --", new  onchange = "refreshGrid();" )
    </div>
<br />

@(Html.Kendo().Grid(Model)
.Name("BatchGrid")
.Pageable()
.Sortable()
.Scrollable()
.HtmlAttributes(new  style = "height:675px; width:1200px" )
.Columns(columns =>
            
                columns.Bound(b => b.BatchID)
                                    .Width("300px")
                                    .Title("Batch ID");
                columns.Bound(b => b.HasErrorTransaction)
                                    .Width("50px")
                                    .Title("Err");
                columns.Command(c => c.Custom("Post Batch").Click("onClickPostBatch").HtmlAttributes(new  style = "width:100px;" ));
                columns.Bound(b => b.Created_Emp_Name)
                                    .Width("200px")
                                    .Title("Created Employee");
                columns.Bound(b => b.Transmitted_DateTime)
                                    .Width("175px")
                                    .Format("0:MM/dd/yyyy hh:mm tt")
                                    .Title("Transmitted");
                columns.Bound(b => b.Completed_DateTime)
                                    .Width("175px")
                                    .Format("0:MM/dd/yyyy hh:mm tt")
                                    .Title("Completed");
                columns.Command(c => c.Custom("Delete Batch").Click("onClickDeleteBatch").HtmlAttributes(new  style = "width:100px;" ));
            
        )
    .DataSource(dataSource => dataSource
        .Ajax()
        .Sort(sort => sort.Add("HasErrorTransaction").Ascending()) // <-- initial sort
        .PageSize(40)
        .Read(read => read.Action("FetchBatchCollection", "Home").Data("addlDataStoreroom"))
        .ServerOperation(false)
    )
    .ClientDetailTemplateId("transactions")
    //.Events(events => events.DataBound("dataBound"))
)