how to trigger validation on the row manually?

[Vadim]

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

[Stefan]

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

[Vadim]

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!

[Vadim]

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

[Stefan]

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

[Vadim]

Hi Stefan,

 

thank you again for your help,

It works!