0

I am using requiredFieldValidator for my TextEditor. Using the onValidationError event as given below, i set the title attribute of my cell to the error message so that a tooltip will be displayed as 'This is a required field'.

var handleValidationError = function(e, args) {
var validationResult = args.validationResults;
var activeCellNode = args.cellNode;
var editor = args.editor;
var errorMessage = validationResult.msg
$(activeCellNode).live('mouseover mouseout', function(event) {
if (event.type == 'mouseover') {
    $(activeCellNode).attr("title", errorMessage);
} else {
    $(activeCellNode).attr("title", "");
}
});
grid.onValidationError.subscribe(handleValidationError);

Successfully, the tooltip is displayed when there is some validation error. But the problem is When the same cell is given a correct value and validation succeeds, the previous tooltip appears again.

How do I remove that tooltip on successful validation?

durron597
  • 31,968
  • 17
  • 99
  • 158
Sowmmea
  • 56
  • 1
  • 6

4 Answers4

0

I have found a solution for this issue and it works fine.

By going through the slick.grid.js code, i understood that OnValidationError event will be triggered only when the 'valid' value from the validator is false.

My idea was to fire the onValidationError event whenever validator is called i.e on both validation success and failure, and to check for 'valid' value and handle the tooltip according to that value.

STEPS:

  1. In slick.grid.js, I added the trigger for onValidationError event when 'valid' from validator is true also.

(i.e) add the below given code before return statement in if(validationResults.valid) in slick.grid.js

trigger(self.onValidationError, {
          editor: currentEditor,
          cellNode: activeCellNode,
          validationResults: validationResults,
          row: activeRow,
          cell: activeCell,
          column: column
        });

2. In the onValidationError event handler of your slickgrid,get the value of the parameter 'valid'. If true, it means validation is success and remove tooltip i.e remove title attribute for that node. If 'valid' is false, it means validation has failed and add tooltip.i.e set the title attribute to error message. By doing this, the tooltip of the previous onValidationError will not appear on the same node. The code goes as follows:

grid.onValidationError.subscribe(function(e, args) {
        var validationResult = args.validationResults;
        var activeCellNode = args.cellNode;
        var editor = args.editor;
        var errorMessage = validationResult.msg;
        var valid_result = validationResult.valid;
        if (!valid_result) {
           $(activeCellNode).attr("title", errorMessage);
            }
        else {
           $(activeCellNode).attr("title", "");
        }

    });

Hope this solution will help others for this issue.

HAPPY LEARNING!!!

Sowmmea
  • 56
  • 1
  • 6
0

Rather than editing the slick grid js - I've submitted a request for this change - in the meantime you can subscribe to the following events to remove the previous validation display: 

       grid.OnCellChange.Subscribe(delegate(EventData e, object a)
        {
            // Hide tooltip
        });
        grid.OnActiveCellChanged.Subscribe(delegate(EventData e, object a)
        {
            // Hide tooltip
        });
        grid.OnBeforeCellEditorDestroy.Subscribe(delegate(EventData e, object a)
        {
            // Hide tooltip
        });
Scott Durow
  • 557
  • 4
  • 10
0

A much more appropriate way to implement this is to subscribe to the onBeforeCellEditorDestroy event and clean up the state (i.e. clear the tooltip) there.

Tin
  • 9,082
  • 2
  • 34
  • 32
0

I wasn't able to determine the current cell in OnBeforeCellEditorDestroy, so I just cleared the title in onCellChange, which fires before onValidationError. For example:

grid.onCellChange.subscribe(function (e, args) {
    $(grid.getCellNode(args.row, args.cell)).children("input").attr( "title", "");
});
J. Russell
  • 21
  • 3