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
Top achievements
Rank 1
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

Sort by
0
Shinu
Top achievements
Rank 2
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.

0
Rimantas
Top achievements
Rank 1
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?

0
Shinu
Top achievements
Rank 2
answered on 19 Sep 2008, 05:02 AM
Hi Rimantas,

GridClientSelectColumn will select the entire Grid row. The above given code is to select a cell on clicking the cell(not on the client select column).

Shinu
0
Shinu
Top achievements
Rank 2
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.
0
Rimantas
Top achievements
Rank 1
answered on 19 Sep 2008, 06:50 AM
Hi Shinu,

Thank you very much for your help.

At last I solved my problem.
0
Antony
Top achievements
Rank 1
answered on 17 May 2019, 12:37 PM

it's Ok. but how I can get Select all option on this?

 

Tags
Grid
Asked by
Rimantas
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
Rimantas
Top achievements
Rank 1
Antony
Top achievements
Rank 1
Share this question
or