jQuery UI Widgets Forums Angular Issue with Jqxgrid loadState method

This topic contains 4 replies, has 3 voices, and was last updated by  Hristo 10 months, 1 week ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • Issue with Jqxgrid loadState method #106534

    cibzash
    Participant

    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;

    };

    Issue with Jqxgrid loadState method #106535

    Todor
    Participant

    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

    Issue with Jqxgrid loadState method #106558

    cibzash
    Participant

    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>

    Issue with Jqxgrid loadState method #106630

    cibzash
    Participant

    Hello – Any thoughts?

    Issue with Jqxgrid loadState method #106636

    Hristo
    Participant

    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

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.