multi GridClientSelectColumn in grid

7 posts, 0 answers
  1. Rimantas
    Rimantas avatar
    10 posts
    Member since:
    Jul 2008

    Posted 18 Sep 2008 Link to this post

    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
  3. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 18 Sep 2008 Link to this post

    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.

  5. Rimantas
    Rimantas avatar
    10 posts
    Member since:
    Jul 2008

    Posted 18 Sep 2008 Link to this post

    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?

  7. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 19 Sep 2008 Link to this post

    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
  8.
  9. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 19 Sep 2008 Link to this post

    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.
  11. Rimantas
    Rimantas avatar
    10 posts
    Member since:
    Jul 2008

    Posted 19 Sep 2008 Link to this post

    Hi Shinu,

    Thank you very much for your help.

    At last I solved my problem.
  13. Antony
    Antony avatar
    5 posts
    Member since:
    Apr 2019

    Posted 17 May in reply to Shinu Link to this post

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

     

  14.
Back to Top