CODEWITHSUNDEEP
asp.net-mvcfilterkendo-uiviewmodel
SYSMAN
SYSMAN

Reputation: 1

Kendo UI Filter is empty

I want to use Kendo UI grid with filter option in APS.NET MVC.

In my example I use database as datasource and a student table

When I use student class as 

public ActionResult Index()
    {
        var std = (from p in db.Students
                select p).ToList();
        return View("Student", std);
    }

everything is ok.

But when I want use ViewModel as datasource, in runtime when I click in filter icon filter window open but I can't see anything in dropdown list of filter.

I use automapper and value injecter.

Any suggestion to solve this problem?

Appended

PersonController.cs

public class PersonController : Controller
{

    Adventureworks2012DataContext db = new Adventureworks2012DataContext();

    public ActionResult Index()
    {
        /*var prs = (from p in db.Person
                   select p).ToList();*/
        return View(GetPersonViewModel());
    }

    public ActionResult PersonViewModel_Read([DataSourceRequest]DataSourceRequest request)
    {
        return Json(GetPersonViewModel().ToDataSourceResult(request));
    }

    private  IList<PersonViewModel> GetPersonViewModel()
    {
        return db.Person.Project().To<PersonViewModel>().ToList();
    }    
}

Index.cshtml

@model IList<DevartLinqTestMVC.ViewModel.PersonViewModel>
@{
ViewBag.Title = "Person List";}

<br />
@(Html.Kendo().Grid(Model)
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.Businessentityid);
        columns.Bound(p => p.Persontype);
        columns.Bound(p => p.Namestyle);
        columns.Bound(p => p.Title);
        columns.Bound(p => p.Firstname);
        columns.Bound(p => p.Middlename);
        columns.Bound(p => p.Lastname);
        columns.Bound(p => p.Emailpromotion);
    })
    .Groupable()
    .Pageable()
    .Sortable()
    .Scrollable()
    .Filterable()
    .Selectable()
    .DataSource(dataSource => dataSource
                                    .Ajax()
                                    .Model(m => m.Id(s => s.Businessentityid))
                                    .PageSize(20)
                                    .Read(read => read.Action("PersonViewModel_Read", "Person")))
)

everything is good also ajax work perfectly

but where is filter dropdown list?!!!

Upvotes: 0

Views: 2201

Answers (1)

Sam
Sam

Reputation: 1366

If you pass a list in your view it only works you want a static list that is loaded once. If you want server side paging or a toolbar, you need to load your data using a server side function that returns a JSON object and link it to your grid with .Read().

For example, in your controller (code not tested):

    public ActionResult StudentGrid_Read([DataSourceRequest] DataSourceRequest request)
    {
        return Json((from p in db.Students select p).ToDataSourceResult(request));
    }

And on your grid:

@(Html.Kendo()
    .[other stuff]
    .DataSource(dataSource => dataSource
        .[other stuff]
        .Read("StudentGrid_Read", "Controller")
    )
)

See the kendo ui grid with toolbar demo for the complete coding example: http://demos.kendoui.com/web/grid/toolbar-template.html

Edit: just noticed there is a filtering demo as well, but the idea is the same: http://demos.kendoui.com/web/grid/filter-menu-customization.html

Upvotes: 1

Related Questions