Using loadState in grouped fields

[omerix]

Hello,

I have a grid where I group some columns using ParamQuery Grid. I grouped the columns in colModel again using colModel.

For example, I created a group called "Dates". Then I moved the column "Order Date" into it. However, when I try to save and restore this change, I get an error.

In some cases, I get the error "p is undefined".



https://jsfiddle.net/5j760ehL/3/

Code: [Select]

    {
      title: "Dates",
      align: "center",
      dataIndx: "grupDates",
      hidden: false,
      colModel: [
        {
          title: "Required Date",
          width: 100,
          dataIndx: "RequiredDate",
          dataType: "date",
        },
        {
          title: "Shipped Date",
          width: 100,
          dataIndx: "ShippedDate",
          dataType: "date",
        },
      ],
    }


Error line: ParamQuery 10.1.0 line 5585

Code: [Select]

m && (v.parentId != m.parentId && (p = s[v.parentId], g = s[m.parentId]) && (p.colModel.splice(p.colModel.indexOf(v), 1), g.colModel.push(v)), this._saveState(m, v, u))



[paramvir]

Is there any particular sequence of events which cause the error.

I've clicked the saveState and loadState buttons a couple of times while continuously changing various grid options, such as the group-by column, order of columns, page number, etc., but I haven't been able to reproduce the error so far.

[omerix]

Yes, interestingly enough, sometimes the error does not appear in the console.

But if you try this, loadState doesn't seem to work when "colmodel" is used inside "colmodel".

- Drag and drop the "Order Date" column between the "Required Date" and "Shipped Date" columns.
- Then click the saveState button
- When you refresh the page and run the loadState function, you will see that the change has not been saved.

[paramvir]

Thanks for mentioning the steps.

Please add this patch to fix the error.

Code: [Select]

jQuery.paramquery.pqGrid.prototype.loadState=function(e){e=e||{};var t,o=this,r=$.widget.extend,d=e.state||o.getState();if(!d)return!1;pq.isStr(d)&&(d=JSON.parse(d));var a,l=d.colModel,i="pid"+Math.random(),n={},s={},p={},h=o.options,M=e=>e.dataIndx||e.id||e.title,c=(delete(a=h.stateColKeys).colModel,delete a.dataIndx,a),f=h.colModel,u=(e,t,o,r)=>{var d=o[t]={};e.forEach(((e,a)=>{var l=M(e);e.parentId=t,r[l]=e,d[l]=a,e.colModel&&u(e.colModel,l,o,r)}))};for(var g in u(l,i,s,n),p[i]={colModel:f},u(f,i,{},p),p){var v=n[g],N=p[g];if(v){if(N.parentId!=v.parentId){var w=p[N.parentId],I=p[v.parentId];I&&(w.colModel.splice(w.colModel.indexOf(N),1),I.colModel.push(N))}o._saveState(v,N,c)}}return function e(t,o){var r=s[o];r&&t.sort((function(e,t){return r[M(e)]-r[M(t)]})),t.forEach((t=>{delete t.parentId;var o=t.colModel||[];o.length&&e(o,M(t))}))}(f,i),o.iCols.init(),r(h.sortModel,d.sortModel),r(h.pageModel,d.pageModel),o.Group().option(d.groupModel,!1),o.Tree().option(d.treeModel,!1),t={freezeRows:d.freezeRows,freezeCols:d.freezeCols},isNaN(1*h.height)||isNaN(1*d.height)||(t.height=d.height),isNaN(1*h.width)||isNaN(1*d.width)||(t.width=d.width),o.option(t),!1!==e.refresh&&o.refreshDataAndView(),!0};

and ensure to use v10.x of pqgrid since support for grouped columns in state is not available in older versions.