Updating my grid from DDL

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

    Posted 27 Jan Link to this post

    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 proc 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>
  2. Answer
    Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    418 posts

    Posted 31 Jan Link to this post

    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
    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.
  3. Nick
    Nick avatar
    7 posts
    Member since:
    Aug 2016

    Posted 09 Feb in reply to Veselin Tsvetanov Link to this post

    Thanks SO much, Veselin! That worked perfectly!!
Back to Top