Telerik Kendo MVC Multiple Columns With One DataSource

[Dominika]

I have got a problem where my grid columns expect a detailed name ("CityFrom" and "CityTo" - those are strings), but a method returns "Name" property. How can I map the result to the columns without duplicating the code?

Here is grid:

@(Html.Kendo().Grid<RouteDto>()
.Name("route-grid")
.Columns(cfg =>
{
    cfg.Bound(m => m.CityFrom)
    .Title("City From")
    .Width(150)
    .Filterable(f =>
        f.Multi(true).DataSource(ds =>
            ds.Read(r =>
                r.Action("GetCities", "City")
            )
        )
    );
    cfg.Bound(m => m.CityTo)
    .Title("City To")
    .Width(150)
    .Filterable(f =>
        f.Multi(true).DataSource(ds =>
            ds.Read(r =>
                r.Action("GetCities", "City")
            )
        )
    );
}))

 

Here is method:

public ActionResult GetCities()
{
    var cities = _cityService.GetCities().Select(c => new { c.Name }).ToList();
    return Json(cities, JsonRequestBehavior.AllowGet);
}

Error I am getting is in console:

Uncaught ReferenceError: CityFrom is not defined
Uncaught ReferenceError: CityTo is not defined

 

On grid I could use .DataTextField("Name"), but I don't have this option here. Both filters have got the same set of values - cities from database. Any ideas what can I do elegantly here?

[Georgi]

Hi Mateus,

The dataSource of the multi filter expects objects with the same field names as the data items of the grid. A pssible solution is to map the response to an anonymous objects with CityFrom and CityTo properties.

e.g.

public ActionResult GetCities()
{
    var cities = _cityService.GetCities().Select(c => new { CityFrom = c.Name, CityTo = c.Name }).ToList();
    return Json(cities, JsonRequestBehavior.AllowGet);
}

Please try the above approach and let me know how it works for you.

I look forward to your reply.


Regards,
Georgi
Progress Telerik