ParamQuery grid support forum

General Category => Help for ParamQuery Pro => Topic started by: fuljoyment on February 10, 2020, 04:18:19 pm

Title: Get the selected coulmns list on button click event without the column selector
Post by: fuljoyment on February 10, 2020, 04:18:19 pm
Hello Admin,

I have created a pivot grid with 50 columns. After initial loading I have selected some specific columns with menuIcon.

Here I need to know,

Please provide a demo or guide me how to achieve this because this is an urgent requirement for us.

PS:-I am using ParamQuery Pro v6.2.4 in my ASP.net MVC project.

Thanks in advance,
Title: Re: Get the selected coulmns list on button click event without the column selector
Post by: paramvir on February 10, 2020, 09:40:50 pm
1. Selected columns in header menu are visible columns.

So they can be obtained as an array collection.

Code: [Select]
var visibleColumns = grid.getColModel().filter(function(col){
  return !col.hidden
})

2. Entire grid state is saved by grid.saveState() and restored by grid.loadState() methods:

Example: https://paramquery.com/pro/demos/grid_state
Title: Re: Get the selected coulmns list on button click event without the column selector
Post by: fuljoyment on February 12, 2020, 10:06:49 am
Hi,

Thank you for the quick response.  Now I am able to get the selected columns from the menuUI-Icon.

But as you suggested when I used grid.saveState() it will not stores the customized columns data instead it stores the grid information which was loaded initially.

Here after selecting specific columns (let us say 5 columns) from the menuUI - Icon, I want to store that grid information instead of its initial state which is having 30 columns data. 

Please suggest me is there any event/method to get that customized grid data. 

Our requirement is to store that customized pivoted grid information as a string in Database and re-create/update the grid with the remote data.

Thank you,
Title: Re: Get the selected coulmns list on button click event without the column selector
Post by: paramvir on February 12, 2020, 10:37:38 pm
Quote
Please suggest me is there any event/method to get that customized grid data.

Current grid state is returned by grid.saveState({save: false})

https://paramquery.com/pro/api#method-saveState

How much Information is stored in state can be further fine tuned by 2 options: stateKeys and stateColKeys

https://paramquery.com/pro/api#option-stateKeys

----------------

The hidden columns are also stored in the state by design. It doesn't cause any issue because that's used by loadState to restore the visible columns as visible and hidden columns as hidden again.

Following is the state for the pivot example: https://paramquery.com/pro/demos/pivot after hiding all the grouped columns in the pivot view.

Code: [Select]
{
type: 'button',
                        label: "Get state",                       
                        listener: function (evt) {         
debugger
var state = JSON.parse( this.saveState({save: false}) );
                        }
}

Code: [Select]
{
  "colModel": [
    {
      "dataIndx": "grp",
      "width": 167,
      "filter": {}
    },
    {
      "dataIndx": "country",
      "width": 120,
      "filter": {},
      "hidden": true
    },
    {
      "dataIndx": "sport",
      "width": 110,
      "filter": {},
      "hidden": true
    },
    {
      "dataIndx": "2000_gold",
      "width": 78,
      "hidden": true
    },
    {
      "dataIndx": "2000_silver",
      "width": 85,
      "hidden": true
    },
    {
      "dataIndx": "2000_bronze",
      "width": 94,
      "hidden": true
    },
    {
      "dataIndx": "2000_total",
      "width": 79,
      "hidden": true
    },
    {
      "dataIndx": "2002_gold",
      "width": 78,
      "hidden": true
    },
    {
      "dataIndx": "2002_silver",
      "width": 85,
      "hidden": true
    },
    {
      "dataIndx": "2002_bronze",
      "width": 94,
      "hidden": true
    },
    {
      "dataIndx": "2002_total",
      "width": 79,
      "hidden": true
    },
    {
      "dataIndx": "2004_gold",
      "width": 78,
      "hidden": true
    },
    {
      "dataIndx": "2004_silver",
      "width": 85,
      "hidden": true
    },
    {
      "dataIndx": "2004_bronze",
      "width": 100,
      "hidden": true
    },
    {
      "dataIndx": "2004_total",
      "width": 100,
      "hidden": true
    },
    {
      "dataIndx": "2006_gold",
      "width": 100,
      "hidden": true
    },
    {
      "dataIndx": "2006_silver",
      "width": 100,
      "hidden": true
    },
    {
      "dataIndx": "2006_bronze",
      "width": 100,
      "hidden": true
    },
    {
      "dataIndx": "2006_total",
      "width": 100,
      "hidden": true
    },
    {
      "dataIndx": "2008_gold",
      "width": 100,
      "hidden": true
    },
    {
      "dataIndx": "2008_silver",
      "width": 100,
      "hidden": true
    },
    {
      "dataIndx": "2008_bronze",
      "width": 100,
      "hidden": true
    },
    {
      "dataIndx": "2008_total",
      "width": 100,
      "hidden": true
    },
    {
      "dataIndx": "2010_gold",
      "width": 100,
      "hidden": true
    },
    {
      "dataIndx": "2010_silver",
      "width": 100,
      "hidden": true
    },
    {
      "dataIndx": "2010_bronze",
      "width": 100,
      "hidden": true
    },
    {
      "dataIndx": "2010_total",
      "width": 100,
      "hidden": true
    },
    {
      "dataIndx": "2012_gold",
      "width": 100,
      "hidden": true
    },
    {
      "dataIndx": "2012_silver",
      "width": 100,
      "hidden": true
    },
    {
      "dataIndx": "2012_bronze",
      "width": 100,
      "hidden": true
    },
    {
      "dataIndx": "2012_total",
      "width": 100,
      "hidden": true
    },
    {
      "dataIndx": "aggr_gold",
      "width": 100
    },
    {
      "dataIndx": "aggr_silver",
      "width": 100
    },
    {
      "dataIndx": "aggr_bronze",
      "width": 100
    },
    {
      "dataIndx": "aggr_total",
      "width": 100
    }
  ],
  "datestamp": 1581526594000,
  "height": 500,
  "width": "auto",
  "freezeRows": 0,
  "freezeCols": 1,
  "groupModel": {
    "dataIndx": [
      "country",
      "sport"
    ],
    "collapsed": [
      true,
      true
    ],
    "grandSummary": true
  },
  "pageModel": {
    "curPage": 1,
    "rPP": 10
  },
  "sortModel": {
    "sorter": []
  }
}