OnCellChange Event capture in salesforce

[saiviswas94]

I am using slickgrid-universal in salesforce lwc. Followed the wiki and installed the grid and was able to load data and use bunch of features (was very easy, thanks ghiscoding!). I was trying different editors and trying to capture oncellchange even to save the update to salesforce. But the arguments to this handler function does not seem to work for me. args.item is undefined. Can someone please help?

// HTML
// 
//    
//   <div class="grid-container">   <div class="grid1" 
//            oncellchange={handleOnCellChange}>
//    </div>
//</div>


//LWC
export class GridExample {
  sgb;

  async connectedCallback() {
 //Loads all resources
    const dataset = this.initializeGrid();
    const gridContainerElm = document.querySelector<HTMLDivElement>(`.grid1`);
    this.sgb = new Slicker.GridBundle(gridContainerElm, this.columnDefinitions, this.gridOptions, dataset);
  }


  handleOnCellChange(e, args) {
console.log("item is changed" ) //this prints
    this.updatedObject = args.item; //this is shown as undefined
    this.sgb.resizerService.resizeGrid(10);
  }
}

[ghiscoding]

Yeah some part of the docs came from Angular-Slickgrid and with Angular we have access to the event directly in the View (html) so we can do something like this (onCellChange)="onCellChanged($event.detail.eventData, $event.detail.args)" (notice the 2 arguments) but we can't this in Salesforce because it doesn't allow any arguments in the View (html) which sucks but we have to live with Salesforce restructions. So how do we get the args then? You can find the args inside the event itself (which equals to what we can do in Angular but it comes from the event in the JS code instead of HTML).

So I updated 1 of the Wikis with the correct info, see Grid & DataView Events

handleOnCellChanged(event) {
    const args = event?.detail?.args;
    const eventData = event?.detail?.eventData;
    this.updatedObject = args.item;
    this.sgb.resizerService.resizeGrid(10);
}

all of Slickgrid-Universal are actually using this same approach, you just have to look at any examples to see the code, Example 12 has a few events hooked up.

If you find more Wikis that could be updated with this info, feel free to submit a PR

[saiviswas94]

Thanks for the quick response. I will try this and let you know.

[saiviswas94]

This worked. Thank you. I was not able to log the object as it was printing proxy object, but later did a stringify to figure out the object schema

[ghiscoding]

Also please note that I haven't had a chance to update the zip file for the latest major v3.0.0 which was a breaking change version that removed jQuery. Basically as it is today, the zip points to v2.x and still requires jQuery, I'll try to update it to the v3.x branch in the coming days but you might have to follow the Migration to 3.0

[ghiscoding]

@saiviswas94
I found and fixed couple bugs with the new version zip file, it should be all good now and I tested it in our Salesforce environment, it looks good. You should have updated the Salesforce Installation - Wiki and you should read it again.

Note that the new slickgrid bundle zip file has these changes

• jQuery is no longer needed for SlickGrid to work, you can and probably should remove it completely
• SortableJS zip was also removed, it's required by SlickGrid but I managed to include it in the slickgrid bundle zip file (so you no longer need an external static zip file)

Make sure to follow the Migration to 3.0 since there might be some breaking change in your grids.

Final note, you should probably make backup of your static files before trying this out.
Cheers and please upvote the lib if you haven't already 😉 ⭐

[saiviswas94]

Awesome will update and let you know.

Do you have an example of hyperlink with a dispaytext? I have tried using the examples given in comments of hyperlinkFormatter and it only shows link but not the label/displaytext.

[saiviswas94]

Upgrade was relative smooth for my demo grid. Thanks,.

Only thing i see is multiselect filter now requires an additional click of okay.. anyway to remove that?

also pasting question from previous comment :
Do you have an example of hyperlink with a dispaytext? I have tried using the examples given in comments of hyperlinkFormatter and it only shows link but not the label/displaytext.

[saiviswas94]

Never mind found the showOkButton option.

only open question : Do you have an example of hyperlink with a dispaytext? I have tried using the examples given in comments of hyperlinkFormatter and it only shows link but not the label/displaytext.

[ghiscoding]

just create your own custom Formatter, please read the Wikis for all documentations