Confirming the data in every cell across each row of SlickGrid

How can I validate all cells in a SlickGrid? Is there a way to use JavaScript to trigger validation for each cell, ensuring that the user has provided something other than the default value?

We have a use case where every cell must be edited by the user with a non-default value, and we want to enforce this requirement by triggering validation for each cell. If a cell does not meet the validation criteria, we want to display the default validation error message.

It seems that currently validation only occurs on fields that are explicitly edited.

Answer №1

Upon observation, it is evident that the default validation mechanism of Slickgrid is confined to the validate function of an editor. This function primarily checks for the presence of a validator and passes only the value as a parameter. To incorporate additional context-specific information, a custom editor or, more precisely, a custom validation function becomes necessary.

this.validate = function() {
   if (args.column.validator) {
       args.newValue = $input.val()
       var validationResults = args.column.validator(args);

       if (!validationResults.valid) {
          return validationResults;
       }
   }

  return { valid: true, msg: null };
};

For each column, a validator must be implemented where the default value is compared against either a new input from the editor or the existing value in addition to other validation criteria required.

var Validator = function(args) {

  // Validate the existing value or the incoming editor value
  var value = args.newValue ? args.newValue : args.item[args.column.field]
  var result = value > 0 
  return {valid: result}
}

To validate the entire grid, a validation method should be created to iterate over every row and examine each column for a validator. Based on the validation outcomes, a mapping of

rowIndex -> collection of failures
is constructed to be forwarded to the native onValidationError event. This allows for monitoring errors and notifying users accordingly. Furthermore, the validation results can be utilized to apply specific styling to highlight failures by providing unique metadata to the grid.

var validateColumns = function(args){

 var failures=[];

 for (c in columns) {
   var column = columns[c]
   if (column.validator) {
      if(!column.validator({row: args.row, item: args.item, column: column}).valid){
         failures.push({columnIndex: c, column: column, rowIndex: args.row, item: args.item})
      }
   }
 }
 return failures;
}

grid.validate = function() {
   var rowFailures = {}
   for (r in data) {
     // Ignore the metadata provider (if applicable)
     if(r == 'getItemMetadata'){continue;}

     var failures = validateColumns({item: data[r], row: r})
     if(failures.length > 0){
       rowFailures[r] = failures;
     }
    }

    if(Object.keys(rowFailures).length > 0){
     grid.onValidationError.notify({"rowFailures": rowFailures}, new Slick.EventData())
    }
   }

Fiddle

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Fill the table according to the selected criteria

One issue I am facing is that the table does not get cleared when using the arrow keys to navigate through select options. As a result, the data from the JSON is populated in sequence and does not match the currently selected option. Does anyone have any ...

What are the best ways to utilize moment and lodash for grouping objects based on fields and counting by dates?

I'm facing a rather complex scenario where I'm looking for a way to manipulate data using lodash and moment. Let's say I have a date range and the following initial data: var startDate = "2018-02-21" var endDate = "2018-02-23" var data = [ ...

What is the best way to import my json information into an HTML table and customize the rows as radio buttons using only Javascript?

I am facing an issue with processing a JSON response: var jsondata = dojo.fromJson(response); There is also a string that I am working with: var jsonString = jsondata.items; The variable jsonString represents the JSON data in the file: jsonString="[ ...

Tips for passing the id using jQuery in an AJAX request to execute a delete action

How can I remove an element from a list by clicking the delete button? https://i.sstatic.net/dQuOu.png I have created an ajax call for this purpose: .ajax({ type : "GET", url : 'getVenueList&apo ...

What is the best way to capture the result of an arrow function within an object in JavaScript and store it in a variable?

I am currently implementing a piece of JavaScript code taken from a publicly available repository located at: https://github.com/base62/base62.js My goal is to capture the output for further manipulation, specifically for a date conversion process. Howev ...

The Javascript document refuses to load

I am currently working on a website with the main file named index.html: <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>Title</title> </head> ...

Tips for sending data from a JSP to a Servlet with Javascript

My code creates an array of circular buttons with dynamic values. When clicked, these buttons get deleted and their values are stored in a JavaScript object array. I need to send these deleted button values to a servlet once my task is complete. To do this ...

Emphasizing specific lines using an array

There is a block of text containing multiple lines, each wrapped within a span with an incremented value at the end (like line-1, line-2, line-3, and so on) to distinguish between them. <div id="textbody"> <span id="line-1">what is love< ...

The identifier "resolve" in the catch block has not been defined

Why is it not possible to call resolve in the catch block? I wanted to catch a failed request and attempt it again in the catch block, but I am encountering an issue where resolve is not defined. I am confused since I am inside of the promise, so why is i ...

Ways to verify the status within the DataTable?

Checking the condition inside column "data":"selectionAudit[0].assignFromDate" of a datatable to display content based on the conditions. var table4 = $('#auditAndNonAudit').DataTable({ "processing" : true, "scrollY": 100 ...

Images set as the og:image on the following 14 websites hosted on Vercel require authentication to be displayed

After deploying my Next.js 14 site on Vercel, I placed opengraph-image.png in the app folder alongside layout.tsx. Upon inspecting the meta tag, I noticed the following: <meta property="og:image" content="https://ns-website-6pnvd8ili-mare ...

Coffeescript does not allow setting the AngularJS controller property as the last line of code

Having an issue while using Coffeescript to define a controller with the "HomeController as homeCtrl" syntax. angular.module('myApp.controllers',[]).controller("HomeController", -> @someArray = [] # return ) Encountering a problem ...

Angular Promises - Going from the triumph to the disappointment callback?

It seems like I might be pushing the boundaries of what Promises were intended for, but nonetheless, here is what I am attempting to do: $http.get('/api/endpoint/PlanA.json').then( function success( response ) { if ( response.data.is ...

Using createStyles in TypeScript to align content with justifyContent

Within my toolbar, I have two icons positioned on the left end. At the moment, I am applying this specific styling approach: const useStyles = makeStyles((theme: Theme) => createStyles({ root: { display: 'flex', }, appBar: ...

Show all <p> lines in a .txt file in a horizontal format instead of vertical using javascript and jquery

I'm attempting to export the content from a div as a .txt file, but all the paragraphs are displaying side by side. For instance, within the div content, I have the following lines: <div id="content> <p>hello</p> <p>H ...

Implementing the dblclick event handler with jQuery on multiple elements

I am facing an issue while trying to bind a double click event to divs within a nodeList that I am looping through. Below is the code snippet: var elements = document.getElementsByClassName("click"); currentElement = elements[0].id; for (var i=0; i<ele ...

Steps for dynamically executing an Angular ng-include directive in real-time

Is there a way to dynamically insert an ng-include element into an HTML page and have it function properly? I am working on a Drag N Drop application where users can drag an element onto the page, and upon dropping it in the designated zone, the original ...

Tips for customizing video layout using HTML

I currently have a basic video displayed on my website <video width="100%" class="posted_vid"> <source src="uploaded_videos/<?php echo $Video; ?>"> </video> However, the video player appears as a default HTML video, simila ...

Mobile display exhibiting glitches in animation performance

I have implemented an animation in the provided code snippet. const logo = document.querySelector('.logo'); const buttons = document.querySelectorAll('.loadclass'); const html = document.querySelector('html') const cornerme ...

Unable to find the element using the text "selenium webdriver"

Currently, I am working with Selenium WebDriver using Java. Log.info("Clicking on To weekrange dropdown"); JavascriptExecutor executor25 = (JavascriptExecutor)driver; executor25.executeScript("document.getElementById('toWeekYear).style.display=' ...