Replace and redline certain substrings from a paragraph in Word using Office.js in Add-In

I have a paragraph present in the Word (Office 365). I can replace the whole paragraph, but I wanted to replace and redline only certain substrings in the paragraph.

Note:- By redline, I mean that the substring is to be open for review from the user.
enter image description here

For example, consider this paragraph:-

Actual paragraph

Greenhouse gases (GHGs) play a crucial role in regulating Earth’s temperature by trapping heat in the atmosphere.

Updated paragraph

Greenhouse gases (GHGs) are pivotal in regulating Earth’s temperature by trapping heat in the atmosphere.

Here in this scenario, I have only one updation for the whole paragraph i.e. play a crucial role to be replaced with are pivotal.

How can I achieve the above using a Word Office add-in?
Please consider the case that I cannot search and replace as different places may have different replacement strings and some of the places might not require any replacement.

Sample code which I have tried until now includes replacement of the whole paragraph, which results in the whole paragraph into the redline state.
enter image description here

await Word.run(async (context) => {
      let paragraphIndex = 10;
      let text = 'The new content';
      const paragraphs = context.document.body.paragraphs;
      paragraphs.load("items, count");
  
      await context.sync();
      
      paragraphs.items[paragraphIndex].insertText(text, Word.InsertLocation.replace);
  
      await context.sync();
});

How to mock functions effectively in Jest?

I hope you are having a blessed new year so far.

I have a React project — JavaScript only and no TypeScript — I am attempting to test with Jest.

I have file A which references file B which in turn utilizes a function C from module “@D/E” which accesses and returns data I want to mock.

I have tried using the mocking approaches described in the documentation and which I found here on S.O. None appear to work. For example:

In “testFile.test.js” (excluding extraneous material for simplification):

import A from './A';

jest.mock('@D/E', () => ({
    C: jest.fn(() => ({
        field1: {},
        field2: [1, 2, 3]
    }))
}));

test("test name", () => {
    render(<A />);
});

In “A.js”:

const A = () => {
    return <B />;
}

export default A;

In “B.js”:

import C from '@D/E';

const B = () => {
    const f = C();
    // Do thing with 'f'
}

export default B;

When I run the test or walk thru the debugger, I get “Uncaught [TypeError: (0 , _e.C) is not a function]”.

What I was expecting was for C() to return { field1: {}, field2: [1, 2, 3] } instead of raising an exception.

Other recommendations appear to produce similar results, as do all other would-be solutions I have found while searching the internet for the last three days. Can anyone point me in the direction of information to find an approach which will work?

Thanks in advance.

Can’t call GitHub files with

For some reason, when I call a raw GitHub file using

<script>

tags, it does not load, the repository IS public, is there another setting I need to mess with? I need to load many things from GitHub, such as images, scripts, and styles. These are all for an “appstore” for my Web Browser “Operating System”, Universe.

The goal is to have an appstore “server” so the appstore is not downloaded with the users copy of the operating system, and I can also make updates and changes to the appstore without updating the entire operating system itself.

Convert object to buffer and buffer to object

Demo

const result =    [
  {                                  // This is sample data BUT there can be multiple objects
    "name": "object1",
    "id": "1",
    "timeseriesData": [
      [
        1548979200000,                // epoc timestamp
        325.3                         // value in number
      ],
      [
        1548979260000,
        325.8
      ],
      [
        1548979320000,
        324.2
      ],
      [
        1548979380000,
        323.7
      ],
      [
        1548979440000,
        322.3
      ],
      [
        1548979500000,
        322
      ]
    ]
  },
  {
    "name": "object2",
    "id": "2",
    "timeseriesData": [
      [
        1548989200000,
        625.3
      ],
      [
        1548989260000,
        625.8
      ],
      [
        1548989320000,
        624.2
      ],
      [
        1548989380000,
        623.7
      ],
      [
        1548989440000,
        622.3
      ],
      [
        1548989500000,
        622
      ]
    ]
  }
]

const splitInChunks = (sizeInBytes) =>   // Don't think this is helping to create proper chunks
    (buffer) => {
        console.log(buffer);
        const size = Buffer.byteLength(buffer.buffer);

        let start = 0;
        let end = sizeInBytes;

        const chunks = [];

        do {
            chunks.push(buffer.subarray(start, end));
            start += sizeInBytes;
            end += sizeInBytes;
        } while (start < size);

        return chunks;
    };
    
   
const chunks = splitInChunks(32)(Buffer.from(JSON.stringify(result)));
console.log("chunks length", chunks.length)
console.log('chunks[0]-', chunks[0])
console.log(JSON.parse(Buffer.concat(chunks)))

For some reason, I want to create buffer of each chunk with some additional data as shownbelow and store it in converted variable. But for some reason, I can’t get the original object back from converted varaible.

const converted = chunks.map(c=> Buffer.from(JSON.stringify({requestId:"123", buf: c})));
console.log("converted length", converted.length)
const result1 = [];
for (let con of converted) {
  const eachChunkBuf = JSON.parse(con);
  result1.push(eachChunkBuf.buf)
}
console.log('result1', result1)
console.log(JSON.parse(Buffer.concat(result1)))  // I want result1 to print original object but it doesn't work.

Integrating Playwright Tests in CI/CD

How can Playwright tests be integrated seamlessly into CI/CD pipelines? What are the recommended approaches for running tests in parallel and reporting results effectively?
title for this question

I want to Use CI/CD pipelines for my playwright TestCases

How to Create a Fixed Text Block with Parallax Scrolling Effect in a Web Page?

I need help with something I’m stuck on.

I want to make it so that when I scroll, anywhere in the white-bordered block (my website), I want the page itself to remain fixed on the screen, and only the block with the text to scroll.

After the scrolling is finished, I want it to return to normal (as in the example of the model).

Here my website
Here the model

I’m having trouble with something, can somone help me out please, thanks ?

Here’s what I’ve done so far:

  • I’ve started working on something but I’m stuck. I can’t seem to make the main page scroll when the scrolling of the block with the text is finished, it remains fixed in the same place…

  • The animation of the star image is not smooth, I want to make it more fluid.

var infos = document.querySelector('.infos');
var obj = document.querySelector('.infos .objectives');
var star = document.querySelector('.infos .etoile img');

window.addEventListener('scroll', function() {
  var scrollPosition = window.scrollY;
  if (scrollPosition >= 1410 && scrollPosition <= 1460) {
    infos.addEventListener('wheel', function(e) {
      e.preventDefault();
      var delta = e.deltaY || e.detail || e.wheelDelta;
      obj.scrollTop += delta;
      var scale = 1 + Math.sign(delta) * 0.8;
      star.style.transform = `rotate(${delta}deg) scale(${scale})`;
    });
  } 
  else {
    infos.style.transform = 'scale(1.1)';
    infos.style.transition = 'transform 0.5s ease-out';
    setTimeout(function() {
      infos.style.transform = 'scale(1)';
    }, 500);
  }
});

How to download images from urls that do not contain file extensions using jszip

I am trying to download images into a zip folder using jszip.

The issue:

The image url that has a file extension at the end is downloaded fine. When the url doesn’t have a file extension, the downloaded file doesn’t a file extension. Example:

This here is a valid image https://arweave.net/ba-pnARBlB5TW4vyC0lKUS28hZwbbNB0DVMWtZmD4sM

When I download this image the file name is ba-pnARBlB5TW4vyC0lKUS28hZwbbNB0DVMWtZmD4sM without the file extension, unlike this one image https://letsenhance.io/static/8f5e523ee6b2479e26ecc91b9c25261e/1015f/MainAfter.jpg which downloads fine as MainAfter.jpg

I need to properly download the images that do not end with file extensions too.

Here is a link to a similar project in codepen. I am unable to paste the jszip.min.js file here please take a look here https://codepen.io/xyla/pen/rQKQEd

What I have:


  <p>
    This demo requires a recent browser, see <a href="https://stuk.github.io/jszip/documentation/howto/write_zip.html">
  the howto</a>.
  </p>
  <div id="downloader_application">
    <h3>Please select your files</h3>
    <form action="#" id="download_form">
      <ul>

         <li>
          <label>
            <input type="checkbox" class="fl" data-folder="css" data-url="https://letsenhance.io/static/8f5e523ee6b2479e26ecc91b9c25261e/1015f/MainAfter.jpg" checked /> IMG1
          </label>
           <div class="col-md-6">
             Sample
           </div>
        </li>
           <li>
          <label>
            <input type="checkbox" class="fl" data-folder="css" data-url="https://arweave.net/ba-pnARBlB5TW4vyC0lKUS28hZwbbNB0DVMWtZmD4sM" checked /> IMG2
          </label>
           <div class="col-md-6">
             Sample
           </div>
        </li>
      </ul>

      <button type="submit" class="btn btn-primary">Download</button>
    </form>

    <p class="hide" id="result"></p>

  </div>

OpenTelemetry Web: instrumentation package for exceptions

Consider a web page (pure front-end, html/js/css), i want to configure opentelemetry to automatically get all the console logs (in particular exceptions) and send all the data to otel collector.

Is it possibile?
Can someone provide an example?

At the moment I’ve only tested this sample:
https://github.com/open-telemetry/opentelemetry-js/tree/main/examples/opentelemetry-web

It’s ok but seems to not have an instrumentation package to grab console logs.

NestJs Module dependency issue

I am working on a NestJs application where I have created a helper class and I am using a function from a module’s class inside that helper class. but I am getting some errors. First I was getting undefined error then I made the helper class injectable then I am facing dependencies issues again.

This is the error I am facing currently.

Error: Nest can't resolve dependencies of the BoomiService (?). Please make sure that the argument dependency at index [0] is available in the CronjobsModule context.

Potential solutions:
- If dependency is a provider, is it part of the current CronjobsModule?
- If dependency is exported from a separate @Module, is that module imported within 
CronjobsModule?
@Module({
 imports: [ /* the Module containing dependency */ ]
})

at Injector.resolveSingleParam (D:WorkDataAGDataJavascriptProjectsorionorion-gateway-apinode_modules@nestjscoreinjectorinjector.js:178:19)
at resolveParam (D:WorkDataAGDataJavascriptProjectsorionorion-gateway-apinode_modules@nestjscoreinjectorinjector.js:116:49)
at Array.map (<anonymous>)
at Injector.resolveConstructorParams (D:WorkDataAGDataJavascriptProjectsorionorion-gateway-apinode_modules@nestjscoreinjectorinjector.js:131:58)
at Injector.loadInstance (D:WorkDataAGDataJavascriptProjectsorionorion-gateway-apinode_modules@nestjscoreinjectorinjector.js:57:24)
at Injector.loadProvider (D:WorkDataAGDataJavascriptProjectsorionorion-gateway-apinode_modules@nestjscoreinjectorinjector.js:84:20)
at D:WorkDataAGDataJavascriptProjectsorionorion-gateway-apinode_modules@nestjscoreinjectorinstance-loader.js:47:62
at Array.map (<anonymous>)
at InstanceLoader.createInstancesOfProviders (D:WorkDataAGDataJavascriptProjectsorionorion-gateway-apinode_modules@nestjscoreinjectorinstance-loader.js:47:36)
at D:WorkDataAGDataJavascriptProjectsorionorion-gateway-apinode_modules@nestjscoreinjectorinstance-loader.js:32:24
at Array.map (<anonymous>)
at InstanceLoader.createInstances (D:WorkDataAGDataJavascriptProjectsorionorion-gateway-apinode_modules@nestjscoreinjectorinstance-loader.js:31:49)
at InstanceLoader.createInstancesOfDependencies (D:WorkDataAGDataJavascriptProjectsorionorion-gateway-apinode_modules@nestjscoreinjectorinstance-loader.js:21:20)
at D:WorkDataAGDataJavascriptProjectsorionorion-gateway-apinode_modules@nestjscorenest-factory.js:96:38
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at Function.asyncRun (D:WorkDataAGDataJavascriptProjectsorionorion-gateway-apinode_modules@nestjscoreerrorsexceptions-zone.js:22:13)
at NestFactoryStatic.initialize (D:WorkDataAGDataJavascriptProjectsorionorion-gateway-apinode_modules@nestjscorenest-factory.js:94:13)
at NestFactoryStatic.create (D:WorkDataAGDataJavascriptProjectsorionorion-gateway-apinode_modules@nestjscorenest-factory.js:37:9)
at bootstrap (D:WorkDataAGDataJavascriptProjectsorionorion-gateway-apisrcmain.ts:9:15)

This is my helper class.

                import axios from "axios";
            import * as qs from'querystring';
            import { OpenApiService } from "../open-api/open-api.service";
            import {
                BadRequestException,
                Injectable,
                NotFoundException,
              } from '@nestjs/common';
            @Injectable()
            export class BoomiService {
                constructor(private OpenApiService: OpenApiService) {}
                //get services
                // 
                //Post services
                createRenewalRequest = async (data) => {
                    const config = {
                        headers: {
                            'Content-Type': 'application/json',
                            "x-api-key": process.env.BOOMI_APIKEY
                        }
                    };
                    // console.log('data',data)
                    try {
                        // console.log('here in createQRFeedbackForComm',config);
                        return axios.post(
                            `${process.env.BOOMI_API_BASEURL}${process.env.BOOMI_POST_APIENDPOINT}`,
                            JSON.stringify(data),
                            config
                        ).then(async (response) => {
                            const boomilogs = await this.OpenApiService.saveOpenApiLogs({reason:response.data,reqData:data,type:'CXMRenewalRequest',status:'Completed'});
                            return response.data;
                            }).catch(async (e) => {
                                const boomilogs = await this.OpenApiService.saveOpenApiLogs({reason:e,reqData:data,type:'CXMRenewalRequest',status:'Failed'});
                            return (`error in createRenewalRequest => ${e}`);
                        });
                        
                    } catch (e) {
                        const boomilogs = await this.OpenApiService.saveOpenApiLogs({reason:e,reqData:data,type:'CXMRenewalRequest',status:'Completed'});
                        throw e;
                    }
                }
                createMaintainenceRequest = async (data) => {
                    const config = {
                        headers: {
                            'Content-Type': 'application/json',
                            "x-api-key": process.env.BOOMI_APIKEY
                        }
                    };
                    try {
                        console.log('response->',this.OpenApiService)
                        // console.log('here in createQRFeedbackForComm',config);
                        return axios.post(
                            `${process.env.BOOMI_API_BASEURL}${process.env.BOOMI_POST_APIENDPOINT}`,
                            JSON.stringify(data),
                            config
                        ).then(async (response) => {
                            const boomilogs = await this.OpenApiService.saveOpenApiLogs({reason:response.data,reqData:data,type:'CXMMaintainenceRequest',status:'Completed'});
                            return response.data;
                        }).catch(async (e) => {
                            console.log('response=',e)
                            const boomilogs = await this.OpenApiService.saveOpenApiLogs({reason:e,reqData:data,type:'CXMMaintainenceRequest',status:'Failed'});
                            return (`error in createMaintainenceRequest => ${e}`);
                        });
                    } catch (e) {
                        const boomilogs = await this.OpenApiService.saveOpenApiLogs({reason:e,reqData:data,type:'CXMMaintainenceRequest',status:'Failed'});
                        throw e;
                    }
                }
            }

here I am using a method saveOpenApiLogs from the OpenApiService.

This is my Open api service file.

                import {
              BadRequestException,
              Injectable,
              NotFoundException,
            } from '@nestjs/common';
            import { HttpService } from '@nestjs/axios';
            import * as moment from 'moment';
            import constants from '../config/constant';
            import { CreateOpenApiDto } from './dto/create-open-api.dto';
            import { UpdateOpenApiDto } from './dto/update-open-api.dto';
            import { empty, firstValueFrom } from 'rxjs';
            import { error } from 'console';
            import { PropertyDto } from './dto/property.dto';
            import utils from 'src/utils/utils';
            import { util } from 'prettier';
            import { CCAService } from 'src/utils/ccaService';
            import {BoomiService} from 'src/utils/BoomiService';
            import { v4 as uuidv4 } from "uuid";
            var {
              communityList,
              nationalityList,
              leaseNatureList,
              leaseTypeList,
              paymentScheduleArrName,
              paymentStatusForAGP,
              bhoomi_x_api_key,
            } = constants;
            const numberWithDastPattern = /^(-?d+)$/;
            const mobileNumberPattern = /^(+?d+)$/;

            @Injectable()
            export class OpenApiService {
              constructor(
                private ccaService: CCAService,
                private BoomiService: BoomiService,
                private httpService: HttpService,
              ) {}
              propertyAPI = process.env.PROPERTY_API;
              userAPI = process.env.USER_API;
              maintenanceAPI = process.env.MAINTENANCE_API;
              leaseAPI = process.env.LEASING_API;
              
              async sendMaintainenceNotificationToBoomi() {
                
                  let DataResponse = {},boomiResponse = {}
                  try {
                    const url = `${this.maintenanceAPI}ticket`;
                    let params: any = {};
                    params.todayTickets=  true;
                    params.perPage=  100;
                    params.ticketStatus=  'issue_resolved,ag_not_responsible,landlord_not_responsible,reject';
                      let ticketData:any = await this.httpService
                      .get(
                        url, {params},
                      )
                      .toPromise()
                      .catch((e) => {
                        console.log('Error in todayTickets',e);
                        throw new Error(e.response.data.error);
                      });
                      // console.log('ticketData',ticketData.data.result.data);
                    if (ticketData && ticketData.data.result.data && ticketData.data.success) {
                      let tickets = ticketData.data.result.data;
                      let dataForBoomi:any[] =  []
                      console.log('tickets -> length',tickets.length)
                      if(tickets.length>0){
                        await Promise.all(tickets.map(async (ticket) =>{
                          // console.log('ticket',ticket);
                          const url = `${this.userAPI}user/detail`;
                          const unit_url = `${this.propertyAPI}unit?unitId=${ticket?.unitId}&status=enable&select=propertyName,unit.unitNumber,address.community,address.subCommunity`;
                            let Tenant: any = await firstValueFrom(
                              this.httpService.post(url, {user:ticket?.tenantId}),
                            ).catch((e) => {
                              console.log('ERROR---', e);
                              throw new Error(e.response.data.error);
                            });
                            // console.log('Tenant',Tenant?.data?.result)
                            let unit:any = await this.httpService
                            .get(
                              unit_url,
                            )
                            .toPromise()
                            .catch((e) => {
                              console.log('Error in get unit',e);
                              throw new Error(e.response.data.error);
                            });
                            // console.log('unit',unit?.data?.result.data[0])
                          dataForBoomi.push(
                            {
                              "firstName": Tenant?.data?.result?.name||"",
                              "lastName":  Tenant?.data?.result?.name||"",
                              "fullName":  Tenant?.data?.result?.name||"",
                              "emailId": Tenant?.data?.result?.email||"",
                              "whatsAppPhoneNumber": Tenant?.data?.result?.mobile||"",
                              "propertyType": "Residential",
                              "unitLeased": unit?.data?.result?.data[0]?.unit?.unitNumber||"",
                              "propertyName": unit?.data?.result?.data[0]?.propertyName||"",
                              "location": unit?.data?.result?.data[0]?.address?.community||"",
                              "subLocation": unit?.data?.result?.data[0]?.address?.subCommunity||"",
                              "communicationType": "Email",
                              "complaintType":"MAINTENANCE_REQUEST",
                              "complaintSubType": ticket?.ratingAndReview?.rating||'',
                              "businessUnit": "Properties",
                              "eventType": "MAINTENANCE_REQUEST",
                              "transactionDate": ticket?.updatedAt,
                              "categoryOfMaintenance": ticket?.category?.name||'',
                              "technicianAssigned": ticket?.technician?.name||'',
                              "attachmentURL": "",
                              "userType": "",
                              "comments": ticket?.ratingAndReview?.comment||''
                            }
                          );
                          // console.log('dataForBoomi',dataForBoomi)
                          return dataForBoomi
                        })).then(async (dataForBoomi) => {
                          // console.log('dataForBoomi',dataForBoomi)
                            let PayloadForBoomi = {
                              "QRCodeFeedback": dataForBoomi[0]
                            }
                            // console.log('PayloadForBoomi',PayloadForBoomi)
                            boomiResponse = await this.BoomiService.createMaintainenceRequest(PayloadForBoomi)
                            // console.log('boomiResponse:',boomiResponse)
                          console.log('------boomiResponse-----', boomiResponse);
                          DataResponse = boomiResponse;
                            return DataResponse
                          })
                          .catch(error => {
                            console.error('Error:', error);
                          });
                      }          
                    }
                  } catch (error) {
                    DataResponse = error;
                  }
                  return {
                    DataResponse
                  };
                }

                async saveOpenApiLogs(reqBody=null){
                  console.log('reqBody',reqBody)
                  return await firstValueFrom(
                    this.httpService.post(`${this.userAPI}openAPItenantStatus`, {
                      uuid: uuidv4(),
                      reason: reqBody?.reason||'',
                      request: reqBody?.reqData?JSON.stringify(reqBody.reqData):'',
                      type: reqBody?.type||'',
                      status: reqBody?.status||'pending',
                    }),
                  ).catch((e) => {return e});
                }
            }

I have removed irrelevant methods from this class else it would be a messy code here.

this is my open api module file where I have imported helper class.

        import { Module } from '@nestjs/common';
        import { OpenApiService } from './open-api.service';
        import { OpenApiController } from './open-api.controller';
        import { HttpModule } from '@nestjs/axios';
        import { CCAService } from 'src/utils/ccaService';
        import { BoomiService } from 'src/utils/BoomiService';
        import { BookingModule } from 'src/booking/booking.module';
        import { CronjobsModule } from 'src/cronjobs/cronjobs.module';

        @Module({
          controllers: [OpenApiController],
          providers: [OpenApiService,CCAService,BoomiService],
          imports: [HttpModule,BookingModule,CronjobsModule],
        })
        export class OpenApiModule {}

This is the module file for which I am getting the error

        import { Module } from '@nestjs/common';
    import { CronjobsService } from './cronjobs.service';
    import { HttpModule } from '@nestjs/axios';
    import { NotificationModule } from 'src/notification/notification.module';
    import { MaintenanceService } from 'src/maintenance/maintenance.service';
    import { OpenApiService } from 'src/open-api/open-api.service';
    import { CCAService } from 'src/utils/ccaService';
    import { BoomiService } from 'src/utils/BoomiService';
    import { BookingModule } from 'src/booking/booking.module';

    @Module({
      imports:[HttpModule, NotificationModule,BookingModule],
      providers: [CronjobsService, MaintenanceService,OpenApiService,CCAService,BoomiService]
    })
    export class CronjobsModule {}

I am new to NestJs and unable to find out the issue. has anyone else faced the same? Please guide the solution.

Thanks

karaoke text rendering effect in my code is slow

I want the effect to run immediately when I call the function, but when I call the function I have to wait 3-4 seconds for the effect to work.

I use canvas in HTML

const canvas = document.querySelector("#draw-pad");

const ctx = canvas.getContext("2d");

function runTextAnimation(text) {

var x = canvas.width / 2;

var y = canvas.height / 2;

var txt = text;

var w = 0;

var clearH = 40;

var clearY = 5;

var clearX = 8;

ctx.font = 'bold 17px Arial';

ctx.lineWidth = 2;

ctx.strokeStyle = 'black';

function runText() {

if (w > 500) {

ctx.clearRect(clearX, clearY, w, clearH);

w = 0;

}

if (w === 0) {

ctx.fillStyle = 'lightblue';

ctx.strokeText(txt, x, y);

ctx.fillText(txt, x, y);

ctx.fillStyle = 'red';

}

ctx.save();

ctx.beginPath();

ctx.clearRect(clearX, clearY, w, clearH);

ctx.rect(clearX, clearY, w, clearH);

ctx.clip();

ctx.strokeStyle = 'white';

ctx.strokeText(txt, x, y);

ctx.fillText(txt, x, y) ;

ctx.restore();

w+=1.92;

window.requestAnimationFrame(runText);

}

runText();

}

runTextAnimation("chắc không phải một người như anh")
<canvas id="draw-pad" width="578" height="50"></canvas>

I want the effect to run immediately when I call the function, but when I call the function I have to wait 3-4 seconds for the effect to work.

Attempting to sort jqGrid locally still calls server side sorting functionality

I have a jqGrid that is filled with data from the server similar to below:

$("#dataGrid").jqGrid({
        url: 'url/load.json',
        datatype: 'json',
        mtype: 'POST',
        ...

One of the columns in this grid gets created and added after pulling the initial data from the server. I was attempting to sort this column but since it is not present in the database, the default sorting for jqGrid fails causing a SQL error. It attempts to reload the grid from the server sorting by the column that doesn’t exist.

To get around this I am trying to sort locally when that specific column is clicked.
However no matter what I try the initial URL ‘load.json’ is still being called causing the SQL error mentioned above. Perhaps I am not doing something correctly?

In the loadComplete() function I have the following:

$("#dataGrid_ColumnToSortLocally").on('click', function()
{
    var grid = $("#dataGrid");
    var postData = grid.jqGrid('getGridParam', 'postData');
    var sortName = postData.sidx;
    var sortOrder = postData.sord || 'asc';
    if (sortName === 'ColumnToSortLocally') 
    {
        var gridData = grid.jqGrid('getRowData');
        gridData.sort(function(a, b) 
        {
            return sortOrder === 'asc' ? a.ColumnToSortLocally - b.ColumnToSortLocally: b.ColumnToSortLocally - a.ColumnToSortLocally;
        });

        try
        {
            grid[0].p.datatype = 'local';
            grid[0].p.url = null;
            grid[0].p.data = gridData;
            grid[0].p.records = gridData.length;
            grid[0].p.page = 1;
            $('#dataGrid').jqGrid('clearGridData').jqGrid('setGridParam',{data: gridData}).trigger("reloadGrid");
         }
         catch (error)
         {
             console.error('An error occurred:', error);
         }
         
         grid.jqGrid('setGridParam', {datatype:'json'});
     }
});

Everything seems to work fine up until I trigger a reload on the grid. My data is present and it gets sorted correctly but when I attempt to reload the grid locally with my sorted data it still calls back to the server to sort by the column that does not exist.

How can I sort by this one specific column locally while still retaining the server sorting for the other columns?

I can include any other relevant code snippets if necessary.

I appreciate your help!