how to trigger validation on the row manually?

6 posts, 2 answers
  1. Vadim
    Vadim avatar
    16 posts
    Member since:
    Jul 2013

    Posted 28 Nov Link to this post

    I have a grid with inline editing. Each row has few required fields - text boxes, drop downs e.t.c.
    When I click on edit button the row turns to in "edit" mode. Validation is working as expected, especially if I click on "update" button.

    Here is a situation. I have another custom command button "Confirm" which call javascript function onItemConfirm
    columns: [
                    {
                        command: [{ name: "edit", text: { edit: " ", update: " ", cancel: " " } },
                          { name: "confirmButton", text: " ", template: "<a class='k-button k-grid-confirmButton' onclick ='onItemConfirm(this)'><span class='k-icon k-i-checkbox'></span></a>" },
                        ], title: "Edit / Confirm", width: "120px", locked: true
                    }

    function onItemConfirm(e) {

                var row = $(e).closest("tr"),
                grid = gridElement.data("kendoGrid"),
                model = grid.dataItem(row);
                // validate
                if(model.Field! == "" || model.Field1 == null){
                    grid.editRow(row);

                   // I need to display validation messages
                }
        }

    By my design it should turn a row into "edit" mode, which is does, but then I want to display validation messages (tool tips) for columns with invalid data immediately without forcing user to click on Update button. Is it possible?

    thanks

  2. Answer
    Stefan
    Admin
    Stefan avatar
    1394 posts

    Posted 30 Nov Link to this post

    Hello, Vadim,

    The desired result can be achieved by programmatically calling the validate method of the Grid row validator:

    https://docs.telerik.com/kendo-ui/api/javascript/ui/validator#methods-validate

    I made an example demonstrating this:

    http://dojo.telerik.com/iLaXI

    I hope this is helpful.

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Vadim
    Vadim avatar
    16 posts
    Member since:
    Jul 2013

    Posted 30 Nov in reply to Stefan Link to this post

    Hi Stefan,
    thank you for a quick reply. 
    Your example was very helpful and now I know why my validation was not working.
    The problem wast hat my confirm button is on the part of the grid that is locked (k-grid-content-locked)
    so my reference to row was for lockedTable TR  :-)

     var tr = $(e.target).closest("tr");I fixed the code:
    click: function(e) {
                                    e.preventDefault();
                                    var grid = $("#grid").data("kendoGrid");
                                    var id = $(e.target).closest("tr").attr('data-uid');
                                    var row = grid.table.find("tr[data-uid='" + id + "']");
                               
                                    this.editRow(row)
                                    var validator = $(row).kendoValidator().data("kendoValidator");
                                    validator.validate()
                                }

     

    Thank you again,
    solved!

  4. Vadim
    Vadim avatar
    16 posts
    Member since:
    Jul 2013

    Posted 30 Nov in reply to Stefan Link to this post

    Sorry Stefan,
    One more thing...
    when I click on Update button, grid validator place a nice message and doesn't shift below input box(image 1)
    but using validator inside Confirm Click() event place message below input box increasing the width of the row (image 2).
    Can I do something with it?

    Thank you again
  5. Answer
    Stefan
    Admin
    Stefan avatar
    1394 posts

    Posted 04 Dec Link to this post

    Hello, Vadim,

    In general, there should not be a difference when calling the validate manually and from the update button.

    Based on the picture and the other tickets I found that this occurs for DropDown editors and I was able to reproduce it in a Dojo example. I noticed that the automatically shown message is a DIV element and the one from programmatically calling the validate method is a span. This occurs because in our automatic validations we are using a different errorTemplate. Changing this will involve overriding the errorTemplate variable before calling the validate method:

    validator._errorTemplate =  kendo.template('<div class="k-widget k-tooltip k-tooltip-validation" style="margin:0.5em"><span class="k-icon k-i-warning"> </span>' +
             '#=message#<div class="k-callout k-callout-n"></div></div>');
     
    validator.validate()

    http://dojo.telerik.com/ilikO/3

    Please have in mind that this is a private variable and modifying it should be used with caution.

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  6. Vadim
    Vadim avatar
    16 posts
    Member since:
    Jul 2013

    Posted 04 Dec in reply to Stefan Link to this post

    Hi Stefan,

     

    thank you again for your help,

    It works!

Back to Top