Issue with Jqxgrid loadState method

[cibzashParticipant]

Hello –

I am trying to save and load grid state in my application. I am able to save and load the sate. However when i load the state back, i see the first 2 columns are changing the indexes intermittently. Could you please let me know if there is any way to resolve this?

In the below code, claim Id is in the first index position but after load state it will move to 2 which kind of negates the whole idea of save state.
I have the below properties set to true as well.

[autoloadstate]=”true” [autosavestate]=”true”

code from .ts file

saveStatebtn(): void {
this.state = this.workItemGrid.jqxGrid.savestate();
this.myArrStr = JSON.stringify(this.state);

this.spinnerService.showSpinner();
this.managerService.saveUserSettings(this.searchValue, this.myArrStr)
.pipe(
finalize(() => this.spinnerService.hideSpinner()),
withCustomError(‘Create Action was unsuccessful. Please try again or contact DCRM Admin.’)
)
.subscribe((data) => {

});
};

loadStateBtn(): void {
//this.myArrStr is the saved state coming from db
if (this.myArrStr) {
console.log(‘loading saved view’)
this.workItemGrid.jqxGrid.loadstate(this.myArrStr);
this.workItemGrid.refreshShowHideColumns();
}
else {
console.log(‘loading default view – claim Id and Process date changes its index intermittently’)
this.myArrStr = {
“width”: “100%”,
“height”: 400,
“pagenum”: 0,
“pagesize”: 100,
“pagesizeoptions”: [10, 25, 50, 75, 100],
“sortcolumn”: “processDate”,
“sortdirection”: {“ascending”: true, “descending”: false},
“selectedrowindexes”: [],
“selectedrowindex”: -1,
“filters”: {“filterscount”: 0},
“groups”: [],
“columns”: {
“_checkboxcolumn”: {
“width”: 30,
“hidden”: false,
“pinned”: true,
“groupable”: false,
“resizable”: false,
“draggable”: false,
“text”: “”,
“align”: “left”,
“cellsalign”: “left”,
“index”: 0
},
“claimId”: {
“width”: 177.4,
“hidden”: false,
“pinned”: false,
“groupable”: true,
“resizable”: true,
“draggable”: true,
“text”: “Claim ID”,
“align”: “left”,
“cellsalign”: “left”,
“index”: 1
},
“processDate”: {
“width”: 177.4,
“hidden”: false,
“pinned”: false,
“groupable”: true,
“resizable”: true,
“draggable”: true,
“text”: “Process Date”,
“align”: “left”,
“cellsalign”: “right”,
“index”: 2
},
“rejectCodeDescription”: {
“width”: 328.19,
“hidden”: false,
“pinned”: false,
“groupable”: true,
“resizable”: true,
“draggable”: true,
“text”: “Reject Code Description”,
“align”: “left”,
“cellsalign”: “left”,
“index”: 3
},
“protectedClass”: {
“width”: 177.4,
“hidden”: false,
“pinned”: false,
“groupable”: true,
“resizable”: true,
“draggable”: true,
“text”: “Protected Class”,
“align”: “left”,
“cellsalign”: “left”,
“index”: 4
},
“labelName”: {
“width”: 248.36,
“hidden”: false,
“pinned”: false,
“groupable”: true,
“resizable”: true,
“draggable”: true,
“text”: “Label Name”,
“align”: “left”,
“cellsalign”: “left”,
“index”: 5
},
“mbrName”: {
“width”: 177.4,
“hidden”: false,
“pinned”: false,
“groupable”: true,
“resizable”: true,
“draggable”: true,
“text”: “Member Name”,
“align”: “left”,
“cellsalign”: “left”,
“index”: 6
},
“partDFormularyId”: {
“width”: 177.4,
“hidden”: false,
“pinned”: false,
“groupable”: true,
“resizable”: true,
“draggable”: true,
“text”: “Part D Formulary ID”,
“align”: “left”,
“cellsalign”: “left”,
“index”: 7
},
“mbrTransStartDate”: {
“width”: 177.4,
“hidden”: false,
“pinned”: false,
“groupable”: true,
“resizable”: true,
“draggable”: true,
“text”: “Member Transition Date”,
“align”: “left”,
“cellsalign”: “right”,
“index”: 8
}
}
};
this.workItemGrid.jqxGrid.loadstate(this.myArrStr);
this.workItemGrid.refreshShowHideColumns();

}
this.homeService.changeLoadSettings(false);
this.isDataAvailable = false;

};

[TodorParticipant]

Hello cibzash,

You could review the following demo that shows the savestate/loadstate implementation.

Also please share a stackblitz.com example demonstrating the reported issue, so that we may determine what causes it. You could fork the example from above and paste your code.

Best Regards,
Todor

jQWidgets Team
https://www.jqwidgets.com

[cibzashParticipant]

Hello Todor – Thanks for the response.

I was able to figure out the reason but still not sure how to fix. Hope you can help. Issue is happening because jqxGrid.savestate() is not capturing the first columns when its does the save operation. Below are the first 2 columns from my html. Do you know why these are being ignored?

If we look at the saved sate in my previous comment, we don’t have these two entries and that is causing all these issues.

<grid-column width=”3%” [locked]=”true” [canHide]=”false” class=”cell-pined” style=”z-index:1000;”>
<grid-header></grid-header>
<grid-cell ngNonBindable>
<span class=”fas fa-pencil-alt icon-placement” onclick=”dcrm.openTab(‘workitem-review/{{workItem.claimId}}/1/{{workItem.workItemId}}/{{workItem.workItemVersionNumber}}/dca’, ‘editworkitem-{{workItem.claimId}}}’); return false;”></span>
/grid-cell>
</grid-column>

<grid-column width=”3%” [locked]=”true” [canHide]=”false”>
<grid-header></grid-header>
<grid-cell ngNonBindable>
<span class=”fas fa-eye” onclick=”dcrm.openTab(‘workitem-review/{{workItem.claimId}}/0/{{workItem.workItemId}}/{{workItem.workItemVersionNumber}}/dca’, ‘viewworkitem-{{workItem.claimId}}}’); return false;”></span>
</grid-cell>
</grid-column>

[cibzashParticipant]

Hello – Any thoughts?

[HristoParticipant]

Hello cibzash,

I tried directly to load one custom state from string value and it seems to work fine.
Please, take a look at this example.
Could you use the provided example and try to re-create it on that way to demonstrates mentioned case?

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[Author]

Posts