Update read.Action() from jQuery

3 posts, 0 answers
  1. Nick
    Nick avatar
    7 posts
    Member since:
    Aug 2016

    Posted 27 Jan Link to this post

    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);
    }

    }

     

  2. Nick
    Nick avatar
    7 posts
    Member since:
    Aug 2016

    Posted 27 Jan in reply to Nick Link to this post

    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>
  3. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2067 posts

    Posted 31 Jan Link to this post

    Hello Nick,

    Please refer to the following section from our documentation for passing additional data to the Action method:
    You can retrieve the selected ID from the DropDownList and pass it to the action method.


    Best Regards,
    Konstantin Dikov
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top