1. #1
    Sencha Premium Member
    Join Date
    Jan 2012
    Posts
    1
    Vote Rating
    0
    jammx is on a distinguished road

      0  

    Question Unanswered: checkall / uncheck all checkboxes in a particular column in the grid

    Unanswered: checkall / uncheck all checkboxes in a particular column in the grid


    Need your help here.

    I have a grid which contains a column of checkboxes. I need to do a checkall / uncheck all feature. (rather than select all / deselect all in the example, as it is just selecting the rows).

    Do you guys have any idea how I can achieve this?

  2. #2
    Sencha Premium Member
    Join Date
    May 2012
    Posts
    143
    Answers
    8
    Vote Rating
    1
    anitacynax is on a distinguished road

      0  

    Default


    I had to do a similar thing with checkboxes in a form. I had a checkboxgroup in which I had a few checkboxes. I created a checkbox called Check All. I then passed the id of each of the checkboxes to Ext.getCmp('idofcheckbox').setValue(true). So if a user clicks on the Check All checkbox, then all the other checkboxes will be ticked. For Uncheck All, use Ext.getCmp('idofcheckbox').setValue(false). Here is my code:

    Code:
    xtype: 'checkboxgroup',
    fieldLabel: 'Person Details',
    allowBlank: false,
    labelWidth: 150,
    columns: 2,
    vertical: true,
    items: [
    {boxLabel: 'Name', name: 'name', id: 'ne'},
    {boxLabel: 'Age', name: 'age', id: 'ae'},
    {boxLabel: 'Height', name: 'height', id: 'ht'},
    {boxLabel: 'Gender', name: 'gender', id: 'gr'},
    {boxLabel: 'Check All', name: 'checkall1', id: 'ca1', handler: function() {
    Ext.getCmp('ne').setValue(true);
    Ext.getCmp('ae').setValue(true);
    Ext.getCmp('ht').setValue(true);
    Ext.getCmp('gr').setValue(true);
    Ext.getCmp('ca1').setValue(false);
    }
    },
    {boxLabel: 'Uncheck All', name: 'uncheckall1', id: 'uca1', handler: function() {
    Ext.getCmp('ne').setValue(false);
    Ext.getCmp('ae').setValue(false);
    Ext.getCmp('ht').setValue(false);
    Ext.getCmp('gr').setValue(false);
    Ext.getCmp('uca1').setValue(false);
    }

  3. #3
    Ext GWT Premium Member icfantv's Avatar
    Join Date
    Sep 2011
    Location
    Superior, CO
    Posts
    411
    Answers
    20
    Vote Rating
    21
    icfantv will become famous soon enough icfantv will become famous soon enough

      0  

    Default


    @anitacynax, that code sample is for Sencha ExtJS and this is a Sencha GXT forum. Unless @jammx is using ExtJS (in which case the question was initally posted in the wrong forum) your answer will not apply.

    @jammx, are you using a selection grid? If so, check out this example: http://www.sencha.com/examples/#Exam...e:checkboxgrid which uses the CheckBoxSelectionModel. Properly using this selection model in your grid will render a checkbox in the grid header which will control the selection of all the checkboxes in that column all at once.

    There is no way in GXT 3.x to directly add a widget to a grid header which means if you have a checkbox column in your grid that is NOT used for row selection, you would need to add a toolbar to your grid (or some other mechanism) that when clicked would iterate through the grid's list store and toggle the corresponding boolean field on your grid record/model. When finished, you can call GridView.refresh(boolean) to rebuild the grid (you can get a handle to the grid view from the grid. Note that this is *expensive* but since you're updating every record in the store anyway...

    HTH,

    --adam

Thread Participants: 2

Tags for this Thread