How to add Select/Deselect All checkbox in columns of a ExtJs grid panel? - extjs

I would like to add a Select/Deselect All Columns checkbox under Columns before the column names in a grid panel to show/hide all columns. As there are large number of columns in grid so user wants to select all then uncheck which they want to hide or deselect all and then check which they want to show. I am using ExtJS 3.4 version.
For example, select/deselect all checkbox should come before First Name among the list under Columns tree in below sample grid:
sample extjs grid panel
Thanks!

I don't think there is an out of the box solution to this. you could add a checkbox a the top and set all the menu check boxes to have a bind that will check all the boxes
bind: {
checked: '{rullForThisCheckbox || checkAllCeckboxes}'
}
then you would set the checked in the top checkbox to just {checkAllCeckboxes}

You could access the columns menu and manually insert the select/deselect all checkbox.
I have tested and it works, though it doesn't look pretty out of the box.
grid.getHeaderContainer().getMenu().add({
xtype: 'checkboxfield',
fieldLabel: '(de)select all',
})

Related

extjs- checkboxgrid check boxs unselecting on clicking different column in grid

I am using checkboxmodel grid in extjs for display values.
after selecting multiple row checkboxs, if i click different column all selected checkbox are unselecting. how to stop this.
https://fiddle.sencha.com/#fiddle/18bj
Use checkOnly: true on the selection model:
True if rows can only be selected by clicking on the checkbox column,
not by clicking on the row itself. Note that this only refers to
selection via the UI, programmatic selection will still occur
regardless.
https://fiddle.sencha.com/#fiddle/18bo

using a radio group in a extjs grid

I was using a new Ext.grid.CheckColumn in my EXTJS FlexGridPanel
Now the column of checkboxes do not allow multiple selections , so I need to replace it with a column of radio buttons.
Is it possible to make the CheckColumn as single-select?
If not, how can I put the column of radio buttons. In this link, it seems like the grid does not support radio buttons.
http://docs.sencha.com/ext-js/3-4/#!/api/Ext.grid.CheckboxSelectionModel
I say this because there is CheckboxSelectionModel but no RadioButtonSelectionModel
CheckboxSelectionModel has a property singleSelect. Is that what you need?

extjs showing hidden columns under 'Columns'

In extjs I have a GridPanel. The GridPanel has some hidden columns. Now when I click on the Grid menu, there is an option called 'Columns'. When you mouseover 'Columns' you can check/uncheck the columns you want to show/hide.
Be default the hidden columns are also showing up on mouseover. Is there a way to avoid this?
You can use such a property for your columns:
hideable:false
In this case these columns can not participate in showing/hiding.
from column def reference:
hidden : Boolean
Optional. true to initially hide this column. Defaults to false. A hidden column may be shown via the header row menu.
If a column is never to be shown, simply do not include this column in the Column Model at all.

extjs grid panel

How can we determine if a column is checked or unchecked in column menu header?
Are you wanting to check if a particular column is hidden, as opposed to whether the menu is checked? If so:
grid.getColumnModel().isHidden(index);

How do I get checkbox unchecked from rowselection in an ExtJS grid?

I am using checkboxselectionmodel in ExtJS grid?
when i clicked on the row the row get selected and the respective checkbox also checked ..
But i need the checkbox to be checked only when i click the checkbox otherwise i want row
only get selected ...
Please help me out...
Thanks & Regards,
Ramanavel Selvaraju
In your CheckboxSelectionModel set checkOnly config option to true.
The CheckboxSelectionModel links row selection and checkbox selection. You want row selection to be independent from the checkbox - so use RowSelectionModel and add a Checkbox into the first column of your grid.

Resources