Adding a custom validator to a grid that is using GridEditMode.InCell

6 posts, 0 answers
  1. Andrew
    Andrew avatar
    12 posts
    Member since:
    Jan 2017

    Posted 31 Jan Link to this post

    Hello,

    I'm trying to create a custom validator in a grid (which is using GridEditMode.InCell) but when the validation fail it shows the validation error just for a few milliseconds and then hide it. However when I left the field empty the default error "The xxxxx filed is required." is showed and do not disappear.

    What should I do to achieve the same result with my custom validator?

    The custom validator is the same I used in this question

    http://www.telerik.com/forums/need-help-creating-two-kendo-validators-in-the-same-view#pzfZKgPe7UqXkPnRyN4grg

    Thank you.

    PS: I've attached a screenshot displaying the default required validator.
  2. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1960 posts

    Posted 02 Feb Link to this post

    Hello Andrew,

    As you can see in the following online demo, the custom validation message is displayed correctly:
    You can try to replicate the issue in a dojo example, so we can inspect it locally:

    Best Regards,
    Konstantin Dikov
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Andrew
    Andrew avatar
    12 posts
    Member since:
    Jan 2017

    Posted 03 Feb in reply to Konstantin Dikov Link to this post

    Hello Konstantin,

    I saw that demo before asking the question. In that demo what you're doing is extending the global validator and what I need is to create a local (custom) validator for the grid.

    I need it in that way because I've a form and a grid in the same view and if I extend the global validator when I validate the form the rules defined in the global validator will be applied to the form validator as well.

    Here's a snippet of what I'm doing

    01.<div>
    02.   <form id="form1">
    03.   </form>
    04.</div>
    05. 
    06.<div>
    07.    @(Html.Kendo().Grid<ProductsModel>()
    08.       .Name("grid")
    09.       .....
    10.    )
    11.</div>
    12. 
    13.<script type="text/javascript">
    14.    $("#form1").kendoValidator({
    15.        rules: {
    16.            custom: function (input) {
    17.                console.log("Custom rules for the form");
    18.                return true;
    19.            }
    20.        }
    21.    })
    22.</script>

     

    As you can see in line 14 I'm creating a local validator for the form now what I need is to create another local validator for the grid would you please tell me how to create that validator? The grid is using .Editable(x => x.Mode(GridEditMode.InCell)).

    Thank you.

  4. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1960 posts

    Posted 07 Feb Link to this post

    Hi Andrew,

    You can initialize the validator over the wrapping element of the Grid, using its ID:
    $("#grid").kendoValidator({...

    Hope this helps.


    Regards,
    Konstantin Dikov
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Andrew
    Andrew avatar
    12 posts
    Member since:
    Jan 2017

    Posted 09 Feb in reply to Konstantin Dikov Link to this post

    Hi Konstantin,

    I tried what you suggested me

    $("#grid").kendoValidator({...

    and the validator does the validation but when the validation fail the message isn't shown in the grid. The only message that is shown is "The field xxx is required" and this message is added automatically by the grid.

    Any idea why is this happening?

    Thank you.

  6. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1960 posts

    Posted 13 Feb Link to this post

    Hi Andrew,

    After some further tests it seems that the approach with the initialization of the validator over a particular element will work with the other edit modes, but not with the InCell mode. With the InCell mode the error message is displayed correctly, but the cell is closing even if the validation fails (at least this is the behavior in my local tests).

    With that limitation in mind I would recommend switching to the approach with the extending of the validator as shown in our online demo and check the field names before applied the validation (which will prevent the validation for the fields in the form):

    Best Regards,
    Konstantin Dikov
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top