CODEWITHSUNDEEP
asp.net-mvckendo-ui
Kar
Kar

Reputation: 321

Binding Kendo grid data after selecting from a field

I have a screen where I have a Kendo grid. I have a dropdown with years, and if I select a year the grid should refresh with corresponding data.

enter image description here

But after I select a date the returned result is the JSon result

enter image description here

What am I missing here?

This is the grid:

@(Html.Kendo().Grid<GGISServices.Models.District.LotAutorizationSentDocumentsViewModel>()
    .Name("districtGrid")
    .HtmlAttributes(new { @class = "newGrid" })
    .Columns(columns =>
    {
        ....     
    })
    .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
    .Events(e => e.FilterMenuInit("filterMenuInit"))
    .ColumnMenu(f => f.Enabled(true))
    .Pageable(pageable => pageable
        .Refresh(true)
        .Info(true)
        .PageSizes(new int[] { 5, 10, 25, 50, 100, 1000 })
        .ButtonCount(5)
        )
    .DataSource(dataSource => dataSource
        .Ajax()
        .Sort(sort => sort.Add(c => c.Id).Descending()) // <-- initial sort expression
        .Read(read => read.Action("GetData", "SentDocument", new { Area = GGISWeb.AreaModules.District }))
        .PageSize(25)
    )
    )

This is the GetData method from controller :

public ActionResult GetData([DataSourceRequest]DataSourceRequest request, int year = 0)
    {
        var list = dsService.GetSentDocumentsAsQueryable(year);
        DataSourceResult result = list.ToDataSourceResult(request, x => x.ToViewModel());
        return new LargeJsonResult() { Data = result , JsonRequestBehavior = JsonRequestBehavior.AllowGet };
    }

and this is the onChange event of the year dropdown:

$(document).ready(function () {
       $("#Year").on("change", function (e) {
           $("#gridDiv").load("@VirtualPathUtility.ToAbsolute("~/")District/SentDocument/GetData/?year=" + $(this).val(), function () {
              });
        });
    });

When I choose another date, the GetData method is invoked with the selected year, but I don't know how to bind to the grid.

Upvotes: 0

Views: 168

Answers (2)

David Shorthose
David Shorthose

Reputation: 4497

Using @Mark_Fitzpatrick approach will work but the problem is with the way your controller is sending back the information from experiencing similar issues. The grid is expecting to see a DataSourceResult request back and you are changing the expected schema. so changing your controller from: 

public ActionResult GetData([DataSourceRequest]DataSourceRequest request, int year = 0)
    {
        var list = dsService.GetSentDocumentsAsQueryable(year);
        DataSourceResult result = list.ToDataSourceResult(request, x => x.ToViewModel());
        return new LargeJsonResult() { Data = result , JsonRequestBehavior = JsonRequestBehavior.AllowGet };
    }


    public ActionResult GetData([DataSourceRequest]DataSourceRequest request, int year = 0)
        {
            var list = dsService.GetSentDocumentsAsQueryable(year);


            return Json(list.ToDataSourceResult(request, ModelState),JsonRequestBehavior.AllowGet);


        }

This should return the data in the format the grid is expecting. If the data is large and assuming the LargeJsonResult is a custom return object you can simply just return the JsonResult with a max length setting assigned.

Upvotes: 1

Mark Fitzpatrick
Mark Fitzpatrick

Reputation: 1624

Try a different approach. Use the .Data() method to denote a javascript function that will return additional fields to send back to the server. Add this onto your read action on the controller and you can conditionally determine if this should be obeyed.

<script>
function myFunc(){
return {selectedDate: $("#myDatePicker").data("kendoDatePicker").value()};
}</script>

Then the read call looks like:

.Read(read => read.Action("GetData", "SentDocument", new { Area = GGISWeb.AreaModules.District }).Data("myFunc"))

Then add the DateTime? selectedDate parameter onto your controller.

Your grid has the ability to gather all the information it needs to grab it's data. You don't have to worry about swapping the data source around. When your datepicker is changed (or any other field you may want to add for grid criteria), simply call the grid's dataSource.read() method to get fresh.

Upvotes: 1

Related Questions