This is a migrated thread and some comments may be shown as answers.

multi GridClientSelectColumn in grid

6 Answers 255 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Rimantas asked on 18 Sep 2008, 08:56 AM

Hi,

Is it impossible to add two or more GridClientSelectColumn to the Grid?

I want to make grid in witch will be:
Column1(name), Column2(GridClientSelectColumn), Column3(GridClientSelectColumn), ...

I have created this grid but I have one problem:
When I select a column grid select all columns

    
             <telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="SqlDataSource1"  
        
                        GridLines="None" AllowMultiRowSelection="True"> 
        
                        <ClientSettings> 
        
                            <Selecting AllowRowSelect = "true" /> 
        
                        </ClientSettings> 
        
                        <MasterTableView datasourceid="SqlDataSource1" AutoGenerateColumns = "false"> 
        
                            <Columns> 
        
                                <telerik:GridBoundColumn DataField="Name" HeaderText="Name"  
        
                                    SortExpression="Name" UniqueName="Name"> 
        
                                </telerik:GridBoundColumn> 
        
                                <telerik:GridClientSelectColumn UniqueName="CheckboxSelectColumn1" HeaderText="CheckboxSelect column1 <br />" /> 
        
                                <telerik:GridClientSelectColumn UniqueName="CheckboxSelectColumn2" HeaderText="CheckboxSelect column2 <br />" /> 
        
                            </Columns> 
        
                        </MasterTableView> 
        
                    </telerik:RadGrid>

Can anyone help me, I'll be grateful

6 Answers, 1 is accepted

answered on 18 Sep 2008, 09:39 AM

Hi Rimantas,

There is no problem in adding more than one ClientSelectColumn. But Client select column will be selecting the entire row. If you want to select a single cell you can try the following approach.

ASPX:

    
            <ClientEvents OnRowCreated="OnRowCreated"  /> 
        
                          <Selecting  AllowRowSelect="true" /> 
        
                        </ClientSettings>

JS:

    
             <script  language="javascript" type="text/javascript"> 
        
                 function OnRowCreated(sender, eventArgs) 
        
                 { 
        
                  var dataItem = eventArgs.get_gridDataItem(); 
        
                  for(var i = 0; i < dataItem.get_element().cells.length; i++) 
        
                 { 
        
                  dataItem.get_element().cells[i].onclick = function() 
        
                    { 
        
                      thisthis.selected = this.selected == true ? false : true; 
        
                      this.className = "ClickClass"; 
        
                    }; 
        
                  } 
        
                } 
        
             <script/>

    
            <head runat="server"> 
        
              <style  type="text/css" > 
        
                .ClickClass 
        
               { 
        
                 background-color: blue; 
        
               }   
        
                </style> 
        
            </head>

Thanks
Shinu.

answered on 18 Sep 2008, 10:11 AM

Hi Shinu,

Thanks for replay.

I'll copy your code and have this:

    
            <html xmlns="http://www.w3.org/1999/xhtml"> 
        
            <head runat="server"> 
        
                <title>Untitled Page</title> 
        
                <script language = "javascript" type="text/javascript"> 
        
                    function OnRowCreated(sender, eventArgs)  
        
                     {  
        
                      var dataItem = eventArgs.get_gridDataItem();  
        
                      for(var i = 0; i < dataItem.get_element().cells.length; i++)  
        
                     {  
        
                      dataItem.get_element().cells[i].onclick = function()  
        
                        {  
        
                          thisthisthis.selected = this.selected == true ? false : true;  
        
                          this.className = "ClickClass";  
        
                        };  
        
                      }  
        
                    }  
        
                </script> 
        
                <style  type="text/css" >  
        
                .ClickClass  
        
                   {  
        
                     background-color: blue;  
        
                   }    
        
                </style>  
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server"> 
        
                <telerik:RadScriptManager runat="server" OutputCompression="AutoDetect"> 
        
                </telerik:RadScriptManager> 
        
                <div> 
        
                    <telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="SqlDataSource1"  
        
                        GridLines="None" AllowMultiRowSelection="True"> 
        
                        <ClientSettings> 
        
                            <ClientEvents OnRowCreated = "OnRowCreated"/> 
        
                            <Selecting AllowRowSelect = "true" /> 
        
                        </ClientSettings> 
        
                        <MasterTableView datasourceid="SqlDataSource1" AutoGenerateColumns = "false"> 
        
                            <Columns> 
        
                                <telerik:GridBoundColumn DataField="Name" HeaderText="Name"  
        
                                    SortExpression="Name" UniqueName="Name"> 
        
                                </telerik:GridBoundColumn> 
        
                                <telerik:GridClientSelectColumn UniqueName="CheckboxSelectColumn1" HeaderText="CheckboxSelect column1 <br />" /> 
        
                                <telerik:GridClientSelectColumn UniqueName="CheckboxSelectColumn2" HeaderText="CheckboxSelect column2 <br />" /> 
        
                            </Columns> 
        
                        </MasterTableView> 
        
                    </telerik:RadGrid> 
        
                  </div> 
        
                <asp:SqlDataSource ID="SqlDataSource1" runat="server"  
        
                    ConnectionString="<%$ ConnectionStrings:EApskaitaConnectionString %>"  
        
                    SelectCommand="SELECT [Name] FROM [Services]"></asp:SqlDataSource> 
        
                </form> 
        
            </body> 
        
            </html>

but it still do the same, when i checked one GridClientSelectColumn's cell selects row not cell.

Maybe my code is incorrect?

answered on 19 Sep 2008, 05:28 AM

Hi Rimantas,

Try using a GridTemplateColumn instead of using a GridClientSelectColumn. Add CheckBox in the ItemTemplate of the template column. Add an an OnClick client event to the cell of the template column in the code behind so that you can set the desired backcolor for the cell on the client side.

ASPX:

    
            <telerik:GridTemplateColumn UniqueName="TempCol" HeaderText="TempCol" > 
        
                              <ItemTemplate> 
        
                                  <asp:CheckBox ID="CheckBox1" runat="server" /> 
        
                              </ItemTemplate> 
        
                            </telerik:GridTemplateColumn>

CS:

    
              protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e) 
        
                { 
        
                    if (e.Item is GridDataItem) 
        
                    { 
        
                        GridDataItem item = (GridDataItem)e.Item; 
        
                        item["TempCol"].Attributes.Add("OnClick", "return CellClick('" + item.ItemIndex + "');"); 
        
                    } 
        
               }

JS:

    
             <script  language="javascript" type="text/javascript"> 
        
                 function CellClick(index) 
        
                 { 
        
                    var grid= $find("<%=RadGrid1.ClientID %>");   
        
                    var gridgridRow=grid.get_masterTableView().get_dataItems()[index];  
        
                    var cell = grid.MasterTableView.getCellByColumnUniqueName(gridRow,"TempCol");   
        
                    cell.style.backgroundColor = "Red";    
        
                 } 
        
             <script/>

Thanks
Shinu.