Multiple Row Selection Grid Panel with out ctrl key

  1. #1

    Multiple Row Selection Grid Panel with out ctrl key

    Hi,
    I want to implement multiple rows selection in Grid Panel. I know currently we can do it with the help of ctrl key.
    The piece of functionality I am looking forward is, the user could select/deselect rows with out pressing ctrl key.
    One the row selection has been made, when user double clicks, all the selected rows would be processed. Again there is a catch, to differentiate between single and doble click i.e. if user double clicks of on already selected row, then double click event should be fired and not the single click event. This I know could be done with the help of timer function(Just to wait for some time in single click function to check if double click has been raised or not).

    How should I implement selection with out ctrl key. I do not want to use Ext.override which would override all the grids behaviour, every where in the application
    Can I just extend the selection model and pass it to grid.

    Note: I am using ext.net control in MVC application. The controls are declared in aspx page.(view). So all databinding/extending has to be done in javascript
  2. #2

    Made is work but...

    I made is work.
    1st I defined these 2 css

    //set original to Transparent
    .x-grid3-row-selected {
                   background-color:transparent !important;
           }
           //set new one     
           .x-grid3-row-selected-override {
                   background-color:#BEBEBE !important;
            }
    Then hook rowclick and rowdblclick

    //define listeners in the grid
     <Listeners>
          <RowClick Fn="onRowClick" />
          <RowDblClick Fn = "onRowDoubleClick" />
     </Listeners>
    Then write the following javascript. Use a page level javascript variable to store the clicked row
    The trick is use the css that is defined by you to mark a row selected or not. A global array would tell you,
    to remove the css or the apply the css giving you toggle effect. To hide the original selections been made by grid,
    I have made background color transparent.

    var selectedRows = [];
    var rowClickTask = new Ext.util.DelayedTask();
    
    
    function onRowClick(grid, rowIndex, e) {
                e.stopEvent();
    
                //delay to check if double click has been raised or not
                rowClickTask.delay(200, HandleRowClick, this, args);
            }
    
    function HandleRowClick(grid, rowIndex, e) {
              
                
                var selRecords = [];
                  //Check if already exists in our array
                if (rowIndex in selectedRows) {
                   
                   //Toggle the selection
                    ToggleSelectedRowStyle(-1, rowIndex, grid);
    
    
                    delete selectedRows[rowIndex];
                }
                else {
                    selectedRows[rowIndex] = "selected";
                }
    
    
                for (var key in selectedRows) {
                    var record = grid.store.getAt(key);
                    var row = grid.getView().getRow(key);
                    ToggleSelectedRowStyle(1, key, grid);
                    if (row != null)
                        selRecords.push(record);
                }
               
            }
    
    
            //Toggle CSS of the selected row
            function ToggleSelectedRowStyle(val, rowIndex, grid) {
                var row = grid.getView().getRow(rowIndex);
                if (row != null) {
                    
                    var element = Ext.get(row);
    
    
                    if (val > 0)
                        element.addClass('x-grid3-row-selected-override');
                    else {
                        element.removeClass('x-grid3-row-selected-override');
                    }
                }
               
            }
    
            //handle double click
            function onRowDoubleClick(grid, rowIndex, e) {
                rowClickTask.cancel();
                
                //process all the rows that were selected
               // use the array selectedRows, it has all the rows that has been selected using single click
       
            }
  3. #3

    However I have another question.....

    I have these 2 questions

    1. I want to override the rowclick and rowdblclick. How should I do it ? Ext.apply / Ext.Extend.... ???

    2. If I use ctrl click for multiple selection, then I double click then all the rows that were selected gets unselected and only the row that was double clicked upon remains selected. How to overcome this ?

Similar Threads

  1. Replies: 3
    Last Post: Oct 05, 2012, 11:44 AM
  2. Export to excel: Grid Panel with multiple pages.
    By breakyoheart in forum 2.x Help
    Replies: 0
    Last Post: Aug 02, 2012, 8:09 PM
  3. [CLOSED] Tree Panel: Multiple selection with check boxes
    By gokcemutlu in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Sep 16, 2011, 2:07 PM
  4. Replies: 5
    Last Post: Mar 24, 2010, 5:15 PM
  5. Replies: 1
    Last Post: Jan 23, 2009, 6:43 AM

Tags for this Thread

Posting Permissions