Bind/Rebind Kendo Grid based on dropdown change

Question

I have a Kendo grid that I need to bind on initial page load based on the value of a dropdown list that's not in the grid. I need to rebind the grid based on user selections in that dropdown list. I'm close, but I can't figure out how to do it and can't find an example. I'm not sure what I need to put in the onchange event I need to write for the dropdown list (it's currently a null string, which is wrong of course).

Any help would be most welcome!

Here's the markup:

        <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"))
)

And here's the javascript I have for the additional data clause of the grid

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

    return { storeroomId: selsectedStoreRoomId };
}

score 6 · Accepted Answer · edited May 23 '17 at 12:10

Found the answer I was looking for (had to ask the question properly!) at Reloading/refreshing Kendo Grid. To state it here, the answer is as follows (I'm showing full code for clarity:

When a value is selected from the dropdownlist the refreshGrid method is called which in turn invokes addlDataStoreroom which is defined on the grid's Read property. The second line of refreshGrid then causes the grid to call the controller code and rebind to the resulting dataset.

Here's the 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();
}

And here's the markup:

        <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"))
)

Bind/Rebind Kendo Grid based on dropdown change

1 Answers1