Start Building Professional
Web Apps Today

DHTMLX Grid : Column Selection

Hi,
Can I achieve same functionality like MS Excel for Column Selection means if I click on the column header, it should select all the cells under that column and also can I get the column id ?.
Is there some way or what do I need to change in the corr JS file to get such functionality ?

There is no buil-in functionality for column selection. 
You can use something similar to next

grid.attachEvent("onHeaderClick",function(index){
    alert("collumn "+index);
    mygrid.forEachRow(function(id){
            mygrid.setCellTextStyle(id,index,"background-color:red;");
    });
});

Hi,
    Will this code affect the sorting functionality ??

Hi,
    I used this code like ::
   
    function callonClickofHeader(index)
                        {
                            libTableGrid.forEachRow(function(id){
                           
                            if (index != 0)
                            {
                                   libTableGrid.setCellTextStyle(id,index,"background-color:#FFCC33;");
                               }
                              
                               });
                              
                               for (var i=1; i<libTableGrid.getColumnsNum(); i++)
                            {
                                for (var j=0; j<=libTableGrid.getRowsNum(); j++)
                                {
                                    if (i != index)
                                    {
                                        libTableGrid.setCellTextStyle(j,i,"background-color:white;");
                                    }
                                }   
                            }
                        }

     but the side-effect of this is that its not showing the selected color; I have set different color for the selected cell when I click it,
     I have made changes in dhtmlxgrid.css as ::

    div.gridbox_light table.obj tr.rowselected td.cellselected, div.gridbox table.obj td.cellselected {
    background-color:#DAA520;
    }

>>  Will this code affect the sorting functionality ??
No, it will add new logic without removing existing one. 

>>  for (var i=1; i<libTableGrid.getColumnsNum(); i++){
>>  for (var j=0; j<=libTableGrid.getRowsNum(); j++){
>>  if (i != index)
While the code above is fully correct, it will be better to store index of marked column and clear only it, in case of big grids it will give seriou benefits in performance. 

Hi,
    After writing this code, I am not able to see gridHover functionality. Why this happens ?

The color precedency. Color set by setCellTextStyle override color of hover. You can use !important flag in css to change situation

mygrid.enableRowsHover(true,"someclass");

<style>
   .someclass{
         background-color:red !important;

Hi there,
             I have written something like this for achieving column selection functionality.
            
                                                var selectedColoumn = '';
                                                var previousColoumn = '';
                                       
                                                    libTableGrid.attachEvent("onRowSelect",function(rowId){
                                                    if(selectedColoumn!=''){
                                                        libTableGrid.hdr.rows[1].cells[selectedColoumn].style.backgroundColor="#F7EBBA";
                                                        libTableGrid.forEachRow(function(id){
                                                             var row = this.rowsAr[id];
                                                             var cols = row.childNodes.length;
                                                            
                                                             for (var j = 1;j < cols;j++){
                                                                 if(j==selectedColoumn){
                                                                     row.childNodes[j].className='';
                                                                 }
                                                             }
                                                         });
                                                    }
                                                    return true;   
                                                });
                                               
                                                libTableGrid.attachEvent("onHeaderClick",function(selectedColumnIndex){
                                                    libTableGrid.clearSelection();
                                                   
                                                    if( (selectedColoumn!='') && (selectedColumnIndex != 0) ){
                                                        libTableGrid.hdr.rows[1].cells[selectedColoumn].style.backgroundColor="#F7EBBA";
                                                        libTableGrid.forEachRow(function(id){
                                                             var row = this.rowsAr[id];
                                                             var cols = row.childNodes.length;
                                                             for (var j = 1;j < cols;j++){
                                                                 if(j==selectedColoumn){
                                                                     row.childNodes[j].className='';
                                                                 }
                                                             }
                                                         });
                                                    
                                                        previousColoumn = selectedColoumn;
                                                    }                                       
                                                                                                                                       
                                                    libTableGrid.forEachRow(function(id){
                                                         var row = this.rowsAr[id];
                                                         var cols = row.childNodes.length;
                                                        
                                                         for (var j = 1;j < cols;j++){
                                                             if(j==selectedColumnIndex){
                                                                 row.childNodes[j].className='col_sel_hover';
                                                             }
                                                         }
                                                     });
                                                    
                                                     if (selectedColumnIndex != 0)
                                                        libTableGrid.hdr.rows[1].cells[selectedColumnIndex].style.backgroundColor="#DAA520 !important";
                                                   
                                                     selectedColoumn = selectedColumnIndex;
                                                     selectedColumnforFunctions = selectedColumnIndex;
                                                     return true;
                                                });

BUT I am getting following problem when I Insert column after selecting column
Image Link : http://img229.imageshack.us/my.php?image=doublecolumnselectionaa9.jpg

Code which you are using is not interfere with column adding logic, the only point - selectedColumnIndex which you storing in vars, may be not reliable after adding new column ( if it will be added before selected one - column indexes will shift )