Update read.Action() from jQuery

[Nick]

Hello,

I have a grid showing information for an agency and everything works fine! Now, the user would like to change the grid from a drop down list. Essentially, I would like to call my stored proc, using jQuery, and pass the parameter selected from the drop down to update the grid. I may be going at this all wrong. Please help! 

View:

@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(""))
        .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"))) //, new { controller = "Agent", id = }
                .Columns(columns =>
                {

                //columns.Bound(o => o.Order_Number).Width("150px").Template(@<text></text>).ClientTemplate("<a href='" + Url.Action("GetOrderDetail", "Detail") + "/#= Full_Order_Number #'" + ">#= Full_Order_Number #</a>");

                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">
$(document).ready(function () {
    $("#AgentIndex").click(function () {
        var ddlAgency = $("#ddlAgency").val();
        $.post('/Proposals/AddFundingSource', { id: ddlAgency }, function (data) {
            onDataUpdated();
        });
    });
});
function onDataUpdated() {
    var grid = $("#gridAgent").data("kendoGrid");
    grid.dataSource.read();
}
</script>

This is where the proc is called:

public ActionResult AgentIndex([DataSourceRequest] DataSourceRequest request) //Add a string var and remove hardcoded agency number
{

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

}

 

[Nick]

Updated jQuery:
<script type="text/javascript">
$(document).ready(function () {
    $("#AgentIndex").click(function () {
        var ddlAgency = $("#ddlAgency").val();
        $.get('/Agent/AgentIndex', { id: ddlAgency }, function (data) {
            onDataUpdated();
        });
    });
});
function onDataUpdated() {
    var grid = $("#gridAgent").data("kendoGrid");
    grid.dataSource.read();
}
</script>

[Konstantin Dikov]

Hello Nick,

Please refer to the following section from our documentation for passing additional data to the Action method:

• http://docs.telerik.com/aspnet-mvc/helpers/grid/binding/ajax-binding#pass-additional-data-to-action-methods

You can retrieve the selected ID from the DropDownList and pass it to the action method.


Best Regards,
Konstantin Dikov
Telerik by Progress