Results 1 to 7 of 7

Thread: Grid with Checkbox column - selection issues

  1. #1
    Ext JS Premium Member
    Join Date
    Sep 2010
    Posts
    50

    Default Grid with Checkbox column - selection issues

    Hi,

    I have a grid, supporting paging, with an initial column populated with a checkbox for each row. The checkbox is used to select multiple rows in the grid needed in my context. Paging should be supported and row selections on previous pages should not get lost.

    The grid also supports the idea of previews. Meaning that the selection of a row triggers the refresh of a more detailed preview of the data displayed by that row.

    I implemented the checkbox using a CheckboxSelectionModel. I nicely get the checkboxes and via its events I can keep track of which row has been selected. The only issue I encounter is that ticking a checkbox selects the entire row (the background colour of the row is changing). This is something I'd like to avoid. Checking the box should only tick the checkbox and now other visual effects should happen. Secondly the tick of the checkbox results in a selection of the row causing my preview to run which I like to avoid. So ticking the checkbox should not result in a row selected event.

    Any ideas/suggestions on how both of these issues can be addressed ?

    Thanks,

    Vincent

  2. #2
    Sencha User tobiu's Avatar
    Join Date
    May 2007
    Location
    Munich (Germany)
    Posts
    2,751

    Default

    you could change

    Code:
    .x-grid3-row-selected {
        background-color: #DFE8F6 !important;
        background-image: none;
        border-color: #A3BAE9;
    }
    to an empty class.


    best regards
    tobiu
    Best regards
    Tobias Uhlig

  3. #3
    Sencha Premium Member steffenk's Avatar
    Join Date
    Jul 2007
    Location
    Haan, Germany
    Posts
    2,676

    Default

    why not simply change selectedRowClass for GridView?
    vg Steffen
    --------------------------------------
    Release Manager of TYPO3 4.5

  4. #4
    Sencha User
    Join Date
    Nov 2010
    Posts
    38

    Default

    I hate to bug you on your thread, but are you able to click the checkboxes on/off by clicking on them or do you have to select the entire row to get the checkbox to click on/off. I'm having troubles with this...

    http://www.sencha.com/forum/showthre...966#post569966

    Good luck on your situation as well, wish I had suggestions..

    elshae

  5. #5
    Sencha User
    Join Date
    Oct 2010
    Location
    St.Petersburg
    Posts
    40

    Default

    Yup, it is possible to make checkbox column without usage of CheckboxSelectionModel, but that way is a bit tricky.

    PHP Code:
    new Ext.grid.ColumnModel({
        
    columns: [{
            
    dataIndex'enabled',
            
    header'Enabled',
            
    tooltip'Checkbox column',
            
    width75,
            
    align'center',
            
    processEvent : function(nameeventgridrowIndexcolIndex){
                
    // lets find column which recieves the event
                
    var column grid.getColumnModel().getColumnById(
                    
    grid.getColumnModel().getColumnId(colIndex)
                );
                
    // we are interested in mouse click events only,
                // other events are processed as usual
                
    if (name == 'mousedown') {
                    
    // lets find the record which is displayed via clicked row
                    
    var rowElement grid.getView().getRow(rowIndex);
                    var 
    record grid.getStore().getAt(rowIndex);
                    
    // lets invert record.enabled value
                    
    Ext.fly(rowElement).mask();
                    
    record.set('enabled', (record.data['enabled']) ? 1);
                    
    // other check/unckeck handling stuff here
                    
    doSomethingElseWithRecord(record);
                    
    Ext.fly(rowElement).unmask();
                    return 
    false;
                }
                else {
                    return 
    Ext.grid.ActionColumn.superclass.processEvent.apply(columnarguments);
                }
            },
            
    renderer: function(valuemetaDatarecordrowIndexcolIndexstore) {
                
    metaData.css += ' x-grid3-check-col-td';
                return 
    String.format('<div class="x-grid3-check-col{0}"> </div>'value '-on' '');
            }
        }]
    }); 
    I'm pretty sure this way will not be compatible with Ext4
    Think less, write more.

  6. #6
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246

    Default

    Why write this yourself? Just use xtype:'checkcolumn' (and include ext/examples/ux/CheckColumn.js).

  7. #7
    Sencha User
    Join Date
    Nov 2010
    Posts
    38

    Default

    Thank you! It also solves the issue of not selecting the whole row as the checkbox is checked, (which I admittedly kinda liked). But this is definitely working better for me overall! Hope this is also helping the person who started this thread

Similar Threads

  1. Checkbox in a Grid Column (not for selection)
    By mundy in forum Ext 2.x: Help & Discussion
    Replies: 16
    Last Post: 26 Dec 2010, 7:16 AM
  2. Replies: 1
    Last Post: 10 Sep 2008, 3:51 AM

Posting Permissions

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