This is a migrated thread and some comments may be shown as answers.

Using inline/incell kendo validation tooltips with popup edit mode

9 Answers 217 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Edward
Top achievements
Rank 1
Edward asked on 21 Feb 2019, 05:52 PM

 

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?

 

9 Answers, 1 is accepted

Sort by
0
Edward
Top achievements
Rank 1
answered on 21 Feb 2019, 06:20 PM
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..?
0
Alex Hajigeorgieva
Telerik team
answered on 25 Feb 2019, 03:09 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Edward
Top achievements
Rank 1
answered on 04 Mar 2019, 06:06 PM

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).

 

 

 

0
Edward
Top achievements
Rank 1
answered on 04 Mar 2019, 06:07 PM
(Moving onto another requirement for now due to time...)
0
Edward
Top achievements
Rank 1
answered on 05 Mar 2019, 05:02 AM
Works now... was trying to attach the validator to a hyperlink <a>.  Added a hidden input next to it and validation event gets triggered...
0
Alex Hajigeorgieva
Telerik team
answered on 06 Mar 2019, 02:07 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Edward
Top achievements
Rank 1
answered on 06 Mar 2019, 03:35 PM

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.

0
Edward
Top achievements
Rank 1
answered on 06 Mar 2019, 03:48 PM
In addition would virtual/endless scrolling would grid.items() return increasingly bigger dataset as user scrolls down?
0
Alex Hajigeorgieva
Telerik team
answered on 08 Mar 2019, 01:25 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Edward
Top achievements
Rank 1
Answers by
Edward
Top achievements
Rank 1
Alex Hajigeorgieva
Telerik team
Share this question
or