SlickGrid checkbox formatter/editor experiencing issues with data consistency

Exploring the functionalities of SlickGrid'seditors/formatters, I delved into how these features could potentially alter the data object utilized for constructing the grid (as modifications within the table are usually reflected in the original data object).

While examining a specific example demonstrating how booleans can be edited and formatted as checkboxes instead of dealing with explicit true or false strings, I noticed inconsistencies in the values that were propagated to the data object.

To better illustrate my point, try editing the effortDriven column for the initial 4 rows according to the following:
-Task 0: leave unchanged
-Task 1: mark as checked
-Task 2: leave unchanged
-Task 3: toggle between check and uncheck

Subsequently, open your firebug console and alert the data object:

The resulting values for the effortDriven field will display as follows:
-Task 0: true
-Task 1: checked
-Task 2: false
-Task 3: (void 0)

Evidently, despite initially expecting a boolean value for the field, we observe 4 distinct outcomes. Reflecting on this, it was previously assumed that the role of formatters/editors was solely related to visualization while maintaining the integrity of the data object: Hence, I strongly advise users of SlickGrid to carefully monitor how their data object is updated when implementing formatters/editors, not assuming data integrity remains intact).

How can one ensure that the data object preserves two boolean values whilst utilizing checkbox elements in the interface?

Answer №1

To modify the CheckboxEditor function within the file slick.editors.js, make the following adjustments:

this.applyValue = function (item, state) {
  //item[args.column.field] = state;  <-- delete that line and insert the lines below
  if (state == 'checked') {
      item[args.column.field] = true;
  } else {
      item[args.column.field] = false;  
  }
};

Answer №2

The issue I encountered was similar. To resolve it, modify the value serializer in the custom CheckboxEditor located in slick.editors.js:

function CheckboxEditor(args) {

    ...

    this.serializeValue = function () {
        return $select.attr("checked") ? true : false;
    };

    ...

}

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

What steps can be taken to resolve the "npm ERR! code ELIFECYCLE" error in a React application?

After attempting to start my React app with npm start, an error occurred : $ npm start > <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4f3b3d2a212b3c0f7f617e617f">[email protected]</a> start C:\Users&bso ...

Implementing a time to live feature in socket.io can be accomplished by setting a

After extensive searching online, I haven't been able to find any resources on how to implement the 'time-to-live' function using Socket.io. In my project, I am utilizing Node.js with express. The functionality of the mentioned time-to-live ...

Uh oh! An error occurred while trying to create the ngFileUpload module

After using NuGet to install Angular File Upload 12.2.13, I made sure to inject the dependencies correctly. However, despite this, I keep encountering the following error: angular.js:63 Uncaught Error: [$injector:modulerr] Failed to instantiate module c ...

Tips for eliminating flutter for static menu with easyResponsiveTabs.js

Experiencing a flickering issue with the fixed menubar and easyResponsiveTabs.js in my project when scrolling down. Attempted to resolve it using jquery.noConflict(), but without success. Would appreciate any guidance on how to address this problem. ...

Tips for Including a Parallax Image Within a Parallax Section

Currently, I am working on implementing a parallax effect that involves having one image nested inside another, both of which will move at different speeds. My progress has been somewhat successful, however, the effect seems to only work on screens narrowe ...

Error encountered: The initMap function from the React Google Maps API is not recognized. No relevant

Encountering an issue where initMap is not recognized as a function. I attempted to avoid utilizing any additional packages for asynchronously loading the script or Google Maps API. My initial approach was to simply console log initMap to track when the sc ...

Error encountered: The token transfer cannot be completed due to an invalid address

Whenever I attempt to send a token from one address to another, I keep encountering the error mentioned in the title. Below is the relevant snippet of my JavaScript code: tokenContract.transfer($("#targetAddr").val().toString(), $("#amt" ...

Sending data from an external input field to a form using AngularJS programmatically with element name

I am facing a challenge where I need to include an Input element in a Form, even though the Input is located outside of the form. While I have managed to add the input using form.$addControl(outerInput), it is not producing the desired outcome as shown in ...

Interactive table with dynamic data retrieval

I need help displaying data dynamically from a datatable using an API. The API I am working with is located at this URL and I am utilizing the bootstrap4 datatable. You can also find my code on this JSFiddle. Can someone provide guidance or an example on h ...

Leveraging viewbag information in combination with jQuery JSON techniques

I have a desire to utilize my ViewBag within a JavaScript array. After researching on using viewbag with jquery asp.net mvc 3, I believe I found the code that suits my needs: @model MyViewModel <script type="text/javascript"> var model = @Html. ...

Prevent onClick event in jQuery and extract parameters from a function call

We've been tasked with implementing a temporary solution to some code, so it might seem a bit silly at first. But please bear with us. The goal is to block the onclick method of an anchor tag, extract the parameters from the function call, and then u ...

The redirection code is not being executed when calling .pipe() before .subscribe()

My AuthService has the following methods: signUp = (data: SignUp): Observable<AuthResponseData> => { const endpoint = `${env.authBaseUrl}:signUp?key=${env.firebaseKey}`; return this._signInOrSignUp(endpoint, data); }; signIn = (data: SignIn): ...

Shifting static information both above and below a 100vh element

At the moment, I have a stationary image in the center of my screen that moves horizontally when scrolling with the mouse. Now, I want to include a screen above and below this element, each with a height of 100vh. However, when I attempt to do so, the fixe ...

How to modify the color of a div element with jQuery?

I need some help changing the color of a div with 'jQuery', but I am not sure how to do it. Below is the code I have been trying: function updateDivColor() { $('#OutlineX1').css("color","blue"); } ...

Painting Magic: Exploring the World of Canvas Zoom and Moves

I'm having trouble implementing zoom and pan functionality for this particular canvas drawing. While there are examples available for images, my case is different since I am not working with images. Any tips or suggestions on which libraries to use wo ...

Utilizing streams for file input and output operations in programming

This unique piece of code allows for real-time interaction with a file. By typing into the console, the text is saved to the file and simultaneously displayed from it. I verified this by manually checking the file myself after inputting text into the cons ...

An alternative to Socket.io tailored for up-to-date web browsers

Are there any specialized versions of Socket.io or similar libraries that cater to modern browsers exclusively, utilizing Websockets without the need for legacy browser support and outdated code? ...

In a React component, what is the significance of "this" in relation to accessing state values (this.state...)?

I encountered a challenging issue with the usage of the this keyword while setting a state within an ajax call. It seems like I may have misunderstood something about how React components operate. How should I properly utilize the this keyword in this sp ...

Searching for a cake in CakePHP with autocomplete functionality

$( "#skills" ).autocomplete({source: function(request, response) { $.getJSON("http://server/current/indrealestates.com/properties/autosuggesthome/",{ term:request.term ,extraParams:$('#property_id').val()}, response ); }, ...

Tips for managing the return value of a PHP function in AJAX requests

Looking for some help with inserting HTML form data using PHP and Ajax. Below is the code I've written: <!DOCTYPE HTML> <html lang="en"> <head><title>Ajax Test</title> <meta charset="utf-8" name="viewport" con ...