Implementing a substantial update in MVC with the help of Slickgrid

Working on optimizing an MVC application that uses SlickGrid for grid edits. The grid can vary from 500 to 25,000 rows with around 40 columns. While the grid functions well, I'm facing challenges when it comes to posting changed data to my controller for updating a SQL-side table.

The issues arise due to POST limits in MVC, despite tweaking the maxAllowedLengths in web.config and trying various approaches. It's clear that simply increasing data posting capabilities may not be the most efficient solution.

Let me share some pseudo-code illustrating my current data saving process:

function Save(data)
{
     var changedData = [];
     for(i = 0; i < data.length, i++) {
         if(data[i].isChanged == 1)
         {
         changedData.push(data[i]); 
         //This array only includes properties/columns that are altered, totaling around 30.
         }
     }

     if (changedData.length < 5000)
     {
           $.ajax({
           type: "POST",
           url: url,
           data: JSON.stringify(changedData),
           success: success
           }); 
     } else
     {
     //Divide changedData into chunks of 5000 and iterate through AJAX calls.
     }
}

I am exploring another approach for saving changes by queuing them up, sending to the controller, and executing sequentially server-side.

   var pendingChanges = [];
   function Save(data)
   {        
      //Would prefer a one-go solution instead of chunking out changes.
           $.ajax({
           type: "POST",
           url: url,
           data: JSON.stringify(pendingChanges),
           success: success
           }); 
   }

   grid.OnCellChange(....)
   {
    //Update cell data
    pendingChanges.push(ID:item.id, Property:xxx,Value:item.value,TimeStamp:now);
   }

   function massCellChange()
   {
     var changedRows = [];
     for (i = 0; i < data.length; i++;)
     {
      if (slickGridDataViewContainsThisItem)
       {
          changedRows.push(data[i].ID);
          //Update slickgrid
       }
     }
      pendingChanges.push(ID:[changedRows],Property:xxx,Value:item.value,TimeStamp:now);
   }

On the controller end, once reaching the method, no issues are faced. I utilize JavaScriptSerializer or JSONConvert to parse the changeset into my model.

Exploring alternative patterns for handling large changesets is also welcome. Users can modify the entire grid at once, albeit limited to visible rows in the dataView, potentially leading to significant changes per user. Considering sending the global command as a single pending change, but yet to find an elegant way to POST which visible rows were modified during that action. (Setting ID property as an array has hit POST limitations.)

Appreciate any guidance!

Answer №1

After some time has passed, I decided to share my solution to the issue at hand. Instead of overwhelming the system by saving a large amount of work all at once after the user clicked "save", I implemented an autosave feature. Each time a user made an edit, I stored the column name, row ID, and new value in an array. When the autosave triggered, I only took the latest value for each cell from the queue of changes. This simple yet effective method not only improved the response time of my application, but also kept users happy knowing their work was continuously saved throughout the task.

By sending only the simplified queue of columns, row IDs, and new values, I was able to significantly reduce the amount of data being sent. I believe I can easily reconstruct the objects in my backend by running through this "script" of changes and then update the database accordingly.

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

Updating state: Removing a specific individual from an array of objects when a button is clicked

I am currently working on a code snippet where I aim to remove a specific person from an organizational chart once the delete button next to their name is clicked. However, I am encountering an issue where clicking any delete button results in all 5 people ...

Tips for utilizing JavaScript to engage with a Cisco call manager

Our team is currently working on an IVR web application built with node js. I am wondering if it is feasible to integrate with the cisco unified call manager directly through node js in our web application? ...

When using JSON.Stringify in a React App, it only displays the first item and the length of the object instead of all the other items

Working on a React App, I encountered an issue while trying to convert an array to JSON and send it to the server. My approach was like this: console.log(JSON.stringify(mainArray)) I anticipated seeing output like this during testing: "breakfast": { ...

PrimeFaces Issue with Redirection

Hello everyone, I am currently dealing with a redirection issue. Basically, I have an API that gets triggered when a user clicks on an image. This API captures the user's contact number and initiates a call through the software. Everything is functi ...

Adapt the dimensions of the iframe to perfectly match the content within

Looking for a way to dynamically adjust the size of an iframe to perfectly fit its content, even after the initial load. It seems like I'll need some kind of event handling to automatically adjust the dimensions based on changes in the content within ...

Leveraging the power of JavaScript and jQuery to identify comparable SELECT choices

My current approach involves utilizing the .filter() method to match the value of an INPUT field (prjName) with an option in a SELECT field (prjList). However, this method only works when there is an exact match for the option text: $("select[title=' ...

Server response not being awaited by Ajax call

Currently running WAMP v.2.5 on a Windows10 system for my PHP project connected to a MySQL DB that involves multiple AJAX calls, all functioning correctly. However, there is one specific call that keeps throwing an 'Unexpected end of input' error ...

Retrieving PHP information using Javascript and storing it in an array

I have a PHP script that fetches data from a server and stores it in an array. I then convert this array into a JSON object using the following function: echo json_encode($result); Now I want to access this array in my JavaScript and display it. I want t ...

Angular error: Trying to assign a value of type ArrayBuffer to a string type

Is there a way to display a preview of a selected image before uploading it to the server? Here is an example in HTML: <div id="drop_zone" (drop)="dropHandler($event)" (dragover)="onDragover($event)"> <p>drag one or more files to ...

webpack is failing to load SVG files

My application structure includes: /webapp /lib /assets ic_add_black_24px.svg ic_clear_black_24px.svg .. .. The configuration in my webpack.config.js looks like this: var path = require('path'), webpack = requ ...

Show a continuous flow of images on the screen without needing a webpage refresh, providing the user with a seamless video

I'm working with a servlet that generates a series of images, and I'm looking for a way to display them on a JSP page without refreshing the entire page. I was considering using applet or AJAX, but I'm still searching for a more convenient s ...

Is there a way to view 2D flat items in 3D using either babylonjs or threejs?

I am currently utilizing fabricJS and have created a variety of random drawings (such as circles, squares, and polygon shapes) on a canvas shaped like a rectangle object (Base). My goal is to display all these drawings engraved on the main rectangle objec ...

The form failed to be submitted even after undergoing ajax validation

Although this question has been asked many times before, I am still confused about where I went wrong. My goal is to validate a form using ajax and submit it if everything checks out. Below is the code snippet that I have been working with: ...

Achieving the minimum width of a table column in Material-UI

Currently I am in the process of developing a React website with Material-UI. One query that has come up is whether it's feasible to adjust the column width of a table to perfectly fit the data, along with some extra padding on both ends? Outlined be ...

Navigate through the elements of an Ext.form.CheckboxGroup using Ext JS

Currently, I am working with an Ext.form.CheckboxGroup that contains multiple items of Ext.form.Checkbox. I am wondering if there is a way to iterate through each item within the Ext.form.CheckboxGroup? I attempted the code below without success: for ( ...

Concealing tooltip when button is clicked using jQuery

I am facing an issue where the tooltip does not hide on button click. Below is the code for the button in question: <button class="btn btn-outline-inverse ajax_addtocart additems ...

What is the best way to determine the precise name and version of a web browser

I've been experimenting with some solutions, but I'm having trouble extracting the exact browser name and version: Here's the code I'm using: $browserAgent = $_SERVER['HTTP_USER_AGENT']; echo $browserAgent; The output of th ...

Leverage the power of JavaScript to bring in a JSON file

Currently, I am working on building a website and utilizing a json file to store the necessary data for one of the pages. However, I am encountering difficulties when attempting to successfully import the data. My coding platform is repl.it. My attempts s ...

Javascript on-page scroll positioning

My current dilemma involves finding a solution to optimize in-page scrolling for mobile users. I have a sticky header on the page, which causes #section1 to place the scroll position behind the sticky header. Is there a way to adjust the scroll position b ...

The intersection observer is unable to track multiple references simultaneously

Hey there, I've been using a switch statement in my Next.js project to dynamically serve different components on a page. The switch statement processes a payload and determines which component to display based on that. These components are imported dy ...