CODEWITHSUNDEEP
c#kendo-uitelerikkendo-grid
Kamau Malone
Kamau Malone

Reputation: 570

Kendo Grid Won't Bind via Ajax

I am following the instructions for doing Ajax databinding using the Kendo Controls for ASPNET-MVC. However the Grid will not bind the returned data. I can see in Chrome that data is being returned from the AJAX call; the problem is that it won't bind. I am also using .ToDataSourceRequest to format the returned data.

Any ideas?

In my View

@(Html.Kendo().DropDownList()
                .Name("MonthFilter")
                .BindTo(Model.MonthDropdownOptions())
                .DataTextField("Text")
                .DataValueField("Value")
                .Events(e => e.Change("onMonthFilterChange"))
                )

      @(Html.Kendo().Grid<PersonStatus>()
            .Name("measuresGrid")
            .Columns(columns =>
            {
                columns.Bound(c => c.PersonId).Width(100).Filterable(ftb => ftb.Cell(cell => cell.ShowOperators(false).SuggestionOperator(FilterType.Contains).Operator("contains"))).HtmlAttributes(new { title = "#=Measure.Name#" });
                columns.Bound(c => 
c.PersonName).ClientHeaderTemplate("Patient Name").Filterable(ftb => 
ftb.Cell(cell => cell.ShowOperators(false).SuggestionOperator(FilterType.Contains).Operator("contains"))).HtmlAttributes(new { patientName = "patientName" });
            })
            .DataSource(ds =>
                ds.Ajax()
                .PageSize(20)
                .ServerOperation(true)
                .Read(read => read.Action("PersonRead", "PersonList").Data("getPersonGridParameterData"))
                .Model(m => m.Id(p=>p.PersonId))
            )
        )

    var getPersonGridParameterData = function (e) {
        console.log("Gettting parameter Data....");
        var monthFilterValue = $("#MonthFilter").val();
        return { "yearMonth": monthFilterValue };
    }

In my Controller`

public IActionResult Index()
    {
        var viewModel = new PersonViewModel
        {
            People = new List<Person>()
        };

        viewModel.PeopleStatuses = GetPersonStatus();
        return View(viewModel);
    }

    [HttpPost]
    public ActionResult PersonRead([DataSourceRequest]DataSourceRequest request, string yearMonth)
    {
        return Json(GetPersonStatus(yearMonth).ToDataSourceResult(request));
    }        


    private List<PersonStatus> GetPersonStatus(string yearMonth = "")
    {
        var aQuery = new PersonListQuery(yearMonth);
        var aResult = _queryDispatcher.Dispatch<PersonListQuery, PersonListQueryResult>(aQuery);

        return aResult.PeopleStatuses;
    }

Upvotes: 1

Views: 1228

Answers (2)

dimodi
dimodi

Reputation: 4139

JSON serialization in ASP.NET Core uses lowercase keys by default, so the Grid data will be served with keys "data" and "total". On the other hand, the Kendo UI MVC Grid expects uppercase keys for historical reasons and compatibility with ASP.NET MVC ("Data", "Total"). In order to revert to uppercase keys, please follow the approach at

http://www.telerik.com/forums/json-serialization-breaks-grid#1N43h6vKUEmdhFLmYQd3yg

or

http://docs.telerik.com/aspnet-core/getting-started/getting-started (point 4)

Upvotes: 1

univ
univ

Reputation: 737

Take a look at this blog post: https://coderulez.wordpress.com/2017/05/12/asp-net-core-and-kendo-grid/

In ASP MVC what you did would have been enough. However in ASP.NET Core you need to take an additional step for the kendo grid to be able to read the data (see Startup.cs code below).

This is because ASP.NET Core incorporated Newtonsoft’s JSON Serializer and for some reason decided to set the default behavior to change the casing of our properties to camelCase (using CamelCasePropertyNamesContractResolver). In order to force it to use the same property names that we defined in our view models we need to use add the following line to Startup.cs: Startup.cs Config

For more info about who is to blame for the decision of making camelCase the default :P take a look at:

https://github.com/aspnet/Mvc/issues/4283

https://github.com/aspnet/Mvc/issues/4842

Upvotes: 0

Related Questions