Using inline/incell kendo validation tooltips with popup edit mode

[Edward]

 

Would like to use kendo validation error tooltips for a cell on a grid.  But the grid uses popup editing mode.  The cell in question is a clienttemplate with checkbox input.

Is it possible to activate the kendo validation tooltip for a cell even when the grid as a whole uses popup editing mode, or does it have to be incell or inline?

 

[Edward]

Or is it possible to attach a custom kendo validation to a cell in a grid arbitrarily without relying on model attributes and activate it manually on user action on the cell, such as onclick event..?

[Alex Hajigeorgieva]

Hi, Edward,

It is possible to add a Kendo UI Validator widget for each cell or row if required. This can be done when the Kendo UI Grid is initialized in its dataBound event, for example:

dataBound: function(e){
  var grid = this;
  var rows = grid.items();
  $.each(rows, function(i, row){
    var dataItem = grid.dataItem(row);
    $(row).kendoValidator({
      rules: {
        foundvalidation: function (input) {
          if(!input.prop("checked")){
            input.attr("data-foundvalidation-msg", "Found should be checked");
          }
          return input.prop("checked");
        }
      }
    });
  });
}

In addition to that, you would need to handle to change event of the checkbox so the validate() method of the Kendo UI Validator can be called:

$(".chkbox").on("change", function(e){
  var validator = $(this).closest("tr").data("kendoValidator");
  validator.validate();
});

Here is a sample implementation, let me know in case the desired outcome is different than the one in the Dojo so I can propose a different course of action.

https://dojo.telerik.com/@bubblemaster/eGAqifUl

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Edward]

Have: (using it for another functionality first, also on grid)

function approval_grid_databound(e) {
    var grid = getApprovalGrid();
    var rows = grid.items();
    $.each(rows, function (i, row) {
        var dataItem = grid.dataItem(row);
        $(row).kendoValidator({
            rules: {
                uploadvalidation: function (input) {
                    if (!input.hasClass("nep-upload-error")) {
                        input.attr("data-uploadvalidation-msg", "Error uploading file");
                        return false;
                    }
                    return true;
                }
            }
        });
    });
}

 

 

then activating it:

$(e).find('span.k-i-upload').addClass('nep-upload-error');
let tr = $(e).closest("tr");
var validator = tr.data("kendoValidator");
validator.validate();

 

But uploadvalidation rule above never gets activated...
Also concern: does grid.items() above attach a kendoValidator multiple times to a given row (have infinite scrolling on the grid).

 

 

 

[Edward]

(Moving onto another requirement for now due to time...)

[Edward]

Works now... was trying to attach the validator to a hyperlink <a>.  Added a hidden input next to it and validation event gets triggered...

[Alex Hajigeorgieva]

Hi, Edward,

I am glad that the issue is now sorted.

The Kendo UI Validator is built around the HTML5 validation attributes so it only works on form elements:

https://docs.telerik.com/kendo-ui/controls/editors/validator/overview#validator-overview

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Edward]

One question had remaining afterward... if I iterate through grid.items() after grid's databound event, would the validator be added multiple times?  Have infinite virtual scrolling/paging on the grid, not page to page...

Should one check for existence of the validator per row before adding or would it not hurt to add multiple times or is there some other way..?

Thnks.

[Edward]

In addition would virtual/endless scrolling would grid.items() return increasingly bigger dataset as user scrolls down?

[Alex Hajigeorgieva]

Hi, Edward,

Virtualization and endless scrolling are very different from one another.

In light of the current topic, virtualization creates as many rows as the page size of the grid and when the user scrolls, the content of the rows is replaced so there is always a page size worth of rows. You can observe this by opening the developer tools, locating the tbody of the grid and scrolling.

On the other hand, endless scrolling works by appending a new row for each data item so the more you scroll, the more rows are appended to the body, the more items will be returned by the grid items() method.

Finally, to answer your question, yes, it is always better to avoid duplicate initialization of widgets over the same HTML element so I would definitely check for the existence of the validator

Kind Regards,
Alex Hajigeorgieva
Progress Telerik