Results 1 to 3 of 3

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

  1. #1
    Sencha Premium Member
    Join Date
    Jan 2012
    Posts
    1
    Vote Rating
    0
      0  

    Question 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
    144
    Answers
    8
    Vote Rating
    1
      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
    413
    Answers
    20
    Vote Rating
    21
      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

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •