[EN] Kendo grid does (not always) work well

We use Kendo-UI in a project we are developing at work and it’s great if you don’t have to customize it a lot. Otherwise I’m pretty sure you will encounter many strange problems, like me. My current tasks connected with UI layer of the application so I’m struggling with many different problems. Today I’ll describe one of them and present my own solution.

The problem I had is related to Kendo Grid control. Grids are present in almost every business application. Needless to say, it’s possible that you will encounter it once if you will have to use Kendo as well. Let’s go to the details then.

Assume we are building ASP.NET MVC application to manage people. Our data context contains a collection of people. Each person (person is our only entity)  has two properties: first name and last name. Now we had been given a task to prepare a grid which will present people from data context. One of the requirements is to list them in one column called Full Name in a form: “last name first name”, like this: Kęstowicz Tymoteusz.

Task described above seems to be pretty easy and that is true. Unfortunately, there is a problem under cover but I’ll prepare backend of the application first and point the problem afterwards.

Model and DataContext:

ViewModel:

Query object:

People Controller:

View:

I put only the most important parts of the application above. Full example is available on my github account. You can get it from here: https://github.com/tkestowicz/KendoHelpers.

Working example

When you run the code you should see the result above. The grid should be populated with data. It looks fine so where is the problem? The problem is with built-in functionalities provided by Kendo when you use LINQ to Entities. The current example uses LINQ to Objects but if you will try to use grouping, sorting or filtering then the following exception will be thrown:

Exception

Screenshot is taken from the project I’m working at.

It’s because of the difference between model and view model. Kendo uses the property from ViewModel, FullName in this case, to build specific transformations of the data. However FullName property is not present in the model and Kendo engine can’t figure how to map selected view-model property to the model so it throws an exception.

The problem is recognized, so good so far. Now we need to solve it by changing default mapping generated by Kendo engine. I’ve implemented three generic helpers, one per functionality:

Sorts mapping helper:

Groups mapping helper:

Filters mapping helper:

People controller:

Query object:

View:

And the result (grouping example):

Result after changes

It’s not complex but two things have to be pointed. When you look at grouping helper you will see that I had to add a slight modification into the view as well. I don’ know why Kendo is losing label of the column being used for grouping and it displays name of the property by default. Hidden column is a simple workaround for this.

Second thing is related with filters helper. As you may see sort and group helpers allow to replace one field with multiple fields. It’s reasonable because we often use more than one column to group or sort the data. In other side when you look at filters helpers you will see that it is forbidden to use multiple columns as a new mapping. It is not a mistake, it is a conscious decision. Filters from the collection are applied by Kendo with AND condition instead of OR. In this case ability of using multiple columns wasn’t a good choice because operators like StartWith or EndWith were useless. I know that filter helper is not perfect and it does not work well in specific cases but I’ve tried my best.

It had taken me some time before I found and implemented the solution. I’ve tested it and it works on my machine. Feel free to use it in your projects if you need to. If know better solution for the problem described here just let me know in comments.

5 comments on “[EN] Kendo grid does (not always) work well
  1. Don’t use kendo helpers. They a totally useless. They have bugs and they’re not 100% compatible with js version. We’ve been struggling with it a long time and after moving to js is a different story

  2. So much code for so simple problem :). Add DTO classe to your solution – for example
    class PersionDTO{public string FirstName { get; set; }public string LastName { get; set; } public string FullName{get;set;}}. Add helper method to your data context which return DTO object and as next step use automapper to map model to dto.
    Btw it is not kendo problem – every grid will have exactly the same problem…

    • The particular case I presented is simple but the solution is generic and works with more complex scenarios as well (e.g. more columns). I don’t get your point, I have separation like DTO within ViewModel class and instead of automapper I map the data manually and it is ok. Internal behaviour of KendoUI grid control is the problem. I know that other grids might also have this issue but… clients pay a lot of money for Kendo and in my opinion that feature should be implemented out of the box. I’m sure I’m not the only one who had to deal with the decribed problem.

Say something

Your email address will not be published. Required fields are marked with a grey bar.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">