Telerik Grid UI – Display validation errors in the cell of the grid 11


image First it was decided to use the Telerik Grid control known as Kendo UI for MVC. After using the Grid control we started to add the validation error messeges but the errors were not displayed in the When I started to use Telerik control in the Bobyclock project for web time and attendance, we realized that the errors defined in the MVC model.

 

This article is going to explain how to add custom error validation into the cell directly rather than displaying the message into a popup window.

 

It is very useful for the end user to have the exact location of the error in order to take immediate action.

 

The following solution code is going to be explained:

 

Fist the JQuery is used to take the proper Kendo Grid element and then the data (‘kendoGrid’) is used to the proper data binding. Then the editable element is used to set the proper error when necessary.

Then on the CSHTML for the MVC part there is necessary to have the following settings:

 

 

 

This is very straight forward. Simply the Kendo Grid will follow up all the errors from the grid into the function named “error_handler”.

In the MVC model the following has to be done:

 

 

All the errors from the MVC model are automatically translated to the KENDO UI grid. This is great since it is completely integrated with ASP.NET MVC.
Note: This article was writen based on Kendo MVC version 2014.3.1506.


About Ionut Afloarei

Senior .Net Developer with 14+ years of experience in Microsoft Technologies (ASP.net/C#, MVC, MSSQL, Entity Framework, Visual Studio, TFS, IIS, Azure Cloud, Microsfot Dynamics).


11 thoughts on “Telerik Grid UI – Display validation errors in the cell of the grid

  • sravani

    Hi,
    I have tried the same code.
    but it is throwing a javascript exception when retrieving grid editable element in above code.
    var grid = $(‘#GrdKendo’).data(‘kendoGrid’);
    var gridElement = grid.editable.element;

    Please let me know how to go about this.

    Thanks a lot,
    Sravani

    • mike Post author

      Hello Sravani,

      You have the opportunity to try the live demo of the cell validation error in the free online BobyClock product.

      Please follow the following steps to be able to run the demo:

      1) Open: https://bobyclock.com
      2) Create a free account. Press “Free Register Now” button from the main page.
      3) Fill the required fields then create a new company for free.
      4) After a new company is created you can navigate to employee menu.
      5) Click on “Add a new record” button to add a new employee.
      6) You have the grid of employee displayed like in the image of this blog.
      7) Leave the First Name and Last Name blank for the purpose of validation errors to be displayed and press ENTER.
      8) The validation errors are displayed.

      Since you have the live example you can debug it either by F12 in Internet Explorer or FireBug in FireFox and place a breack point on line 158 of the HTML version of the page.
      It was double checked and it is working successfully.

      Good luck!

    • Iyyappan Amirthalingam

      Hi Sarvani,

      You have use your grid name in the javascript declaration.
      var grid = $(‘#yourgridname’).data(‘kendoGrid’);

      Thanks,
      Iyyappan Amirthalingam

  • Mozell

    I blog often and I genuinely thank you for your
    content. The article has really peaked my interest.
    I will take a note of your website and keep checking for
    new details about once a week. I subscribed to your Feed too.

  • WilberHRous

    Hi there to every one, as I am really eager of reading this blog’s post
    to be updated regularly. It consists of nice information.

  • CelenaKLamberti

    It’s amazing designed for me to have a web page, which is good in support of my experience.
    thanks admin

  • BarryNBarick

    Your style is very unique compared to other people I have read stuff
    from. Thank you for posting when you have the opportunity, Guess I’ll just bookmark this web
    site.

  • FredrickPBournes

    Pretty nice post. I simply stumbled upon your blog and wanted to
    mention that I’ve truly enjoyed browsing your blog posts.
    After all I will be subscribing on your rss feed and I am hoping you write once more soon!

  • Ed Eaglehouse

    Where does e.errors get populated from? No such field shows up in my error handler function parameter.

    • mike Post author

      Hi Ed,
      The parameter function ‘e.errors’ gets populated by the Telerik Rad Grid control via the server error response. You can see how it works in https://bobyclock.com in the employee screen. Check the second comment from top.
      For this article Kendo MVC version 2014.3.1506 was used.
      Please inform what version are you using and we will try to reproduce the scenario.

      Thanks,
      Bobylog Team

Comments are closed.