Validation in WijGrid

WijGrid provides you with an option to edit and validate the grid data. The data can be validated either at the cell level or at the row level. This blog discusses both the these approaches of cell level validation and row level validation. Cell Level Validation: You can add customer editors to WijGrid cells, and later perform the cell level validation using the beforeCellUpdate event of WijGrid. Kindly refer to the following demo sample that demonstrates the same. Row Level Validation: First of all, you need to change the editingMode option to row for enabling Row Editing. The data will be validated when the user clicks on the update button. If the data is valid, then the operation proceeds normally. However, if the data is not valid, the user is prompted an error message and the editing cursor would blink in the cell having invalid data. To start with, we would handle the click event of the Update command button using jQuery. In this event, you can validate the data as per your requirements. For example, in the following code snippet we verify that the "Country Name" cannot be more than 10 characters. Once the data is validated, and is found to be invalid, cancel the default operation of the event and call the editRow method of WijGrid to put the cell back into edit mode. Here is the code:

$(document).on("click", ".wijmo-wijgrid-commandbutton", function (e)  
{  
   var button = $(this);  
   if (button.val() === "Update")  
   {  
      var curcell = $("#demo").wijgrid("currentCell");  
      var data = $("#demo").wijgrid("option", "data");  
      currRowData = data[curcell._ri];  
      if (currRowData.Country.length > 10)  
      {  
         e.preventDefault();  
         $("#demo").wijgrid("editRow", curcell._ri);  
         var el = $(".wijgridinput:eq(" + (curcell._ci - 1) + ")");  
         alert('Invalid entry. Country Length - ' + currRowData.Country.length);  
         moveCursorToEnd(el);  
      }  
   }  
});

When we call the editRow method then it places the editing cursor at the start of the cell, however the cursor should display at the end of the text displayed in the cell. You can use the following code to display the cursor at the end:

function moveCursorToEnd(el)  
{  
   if (typeof el[0].selectionStart == "number")  
   {  
      el[0].selectionStart = el[0].selectionEnd = el[0].value.length;  
   }  
   else if (typeof el[0].createTextRange != "undefined")  
   {  
      el[0].focus();  
      var range = el[0].createTextRange();  
      range.collapse(false);  
      range.select();  
   }  
}

Here is the output: You may refer to the sample for complete implementation.