Updating my grid from DDL

[Nick]

public ActionResult AgentIndex([DataSourceRequest] DataSourceRequest request, string agencyNum)
    {

        using (var CB = new CentralBillingEntities())
        {
            var result = CB.GetAgentViewInfo(agencyNum).ToList();
            return Json(result.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
        }

    }

 

When I set a breakpoint I actually see the value for my GetAgentViewInfo coming through. But, the grid just flashes and the data never comes back. What am I doing wrong?

Here's the rest of my code:

 

@model IEnumerable<CentralBilling.Models.CentralBillingEntities>
@{
    ViewBag.Title = "View";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="center">
    <h3><u>Agent View</u></h3>
 </div><br />

<div>
    @(Html.Kendo().DropDownList()
        .Name("ddlAgency")
        .Events(e => e.Change("agencyChange"))
        .BindTo(new List<SelectListItem>()
          {
                new SelectListItem() { Text = "" },
                new SelectListItem() { Text = "250-Louisville", Value = "U00250" },
                new SelectListItem() { Text = "590-OKC", Value = "U00590"},
          }

    ))
</div>
    <div>

@(Html.Kendo().Grid<CentralBilling.Models.GetAgentViewInfo_Result>()
         .Name("gridAgent")
         .DataSource(datasource => datasource
         .Ajax()
         .Read(read => read.Action("AgentIndex", "Agent")))
         .Columns(columns =>
                {

                columns.Bound(o => o.Req).Width("130px").Title("Request Submission").Template(
                    @<text>
                        @Html.ActionLink("GetAgentDetail", "Agent", new { controller = "Agent", id = item.Full_Order_Number })
                    </text>
                         ).ClientTemplate(@"<a href=/Agent/GetAgentDetail?id=#= Full_Order_Number #>#= Req #</a>");

                    columns.Bound(o => o.Master_OrderNum).Width("150px");
                    columns.Bound(o => o.Shipper).Width("175px");
                    columns.Bound(o => o.aom_shipment_type).Title("MoveType").Width("100px");
                    columns.Bound(o => o.AccountHeader).Width("150px");
                    columns.Bound(o => o.EarlyLoadDate).Format("{0:MM/dd/yyyy}").Width("135px");
                    columns.Bound(o => o.Date_Delv_Act).Format("{0:MM/dd/yyyy}").Width("135px");
                    columns.Bound(o => o.Book_Agent).Width("135px");
                    columns.Bound(o => o.Haul_Agent).Width("135px");
                    columns.Bound(o => o.Org_Agent).Width("135px");
                    columns.Bound(o => o.Dest_Agent).Width("135px");
                })

                .HtmlAttributes(new { style = "height: 550px" })
                .Resizable(resize => resize.Columns(true))
                .Sortable()
                .Scrollable()
                .Filterable()
        )


    </div>

<script type="text/javascript" language="javascript">

    function agencyChange() {
        var ddlAgency = $("#ddlAgency").val();
        alert("Drop down list value is: " + ddlAgency);
        $.get('/Agent/AgentIndex', { agencyNum: ddlAgency }, function (data) {
            onDataUpdated();
     });
}
function onDataUpdated() {
    var grid = $("#gridAgent").data("kendoGrid");
    grid.dataSource.read();
}
</script>

[Veselin Tsvetanov]

Hello Nick,

What happens with the discussed implementation is the following:

- On change of the selected value in the DropDownList, the agencyChange() function is executed;

- The above function makes an AJAX call to the AgentIndex controller action, sending the correct agencyNum as parameter;

- Then the onDataUpdated() function is called, which triggers the Grid DataSource Read() action (internally it calls the AgentIndex controller action again, but without a parameter);

- The data is returned to the grid, based on the last call, e.g. the agencyNum is null.

To update the data in the Grid, instead, a parameter should be sent along with the Read() action. This could be achieved with the following changes:

- Attach Data() function to the Read action of the Grid:

.Read(read => read.Action("AgentIndex", "Agent").Data("onGridRead"))

- Pass the agencyNum as additional parameter in the ​onGridRead function:

function onGridRead(e) {
    var ddlAgency = $("#ddlAgency").val();

    return {
        agencyNum: ddlAgency
    };
}

- Call the Grid dataSource Read() action in the DropDownList Change event handler:

function agencyChange() {
    var grid = $("#gridAgent").data("kendoGrid");
    grid.dataSource.read();
}

Regards,
Veselin Tsvetanov
Telerik by Progress

[Nick]

Thanks SO much, Veselin! That worked perfectly!!