GridClientSelectColumn -- (un)check "Select All" check box automatically

Thread is closed for posting
14 posts, 0 answers
  1. Telerik Admin
    Telerik Admin avatar
    1679 posts
    Member since:
    Oct 2004

    Posted 29 Aug 2007 Link to this post

    Requirements

    RadGrid for ASP .NET version

    RadControls for ASP .NET AJAX version

    4.6.2 and later


    2008.1.415 and later
    .NET version

    2.0 and later

    Visual Studio version

    2005 and later

    Programming language

    C#
    Browser support

    all supported by RadGrid for ASP .NET


    all browsers supported by RadControls for ASP .NET AJAX

    To convert code from posted projects Telerik online converter

    Note: The demonstrated functionality is supported automatically for RadControls for ASP .NET AJAX version 2010.1.309 and later.

    PROJECT DESCRIPTION

    The present project enhances GridClientSelectColumn behavior so that if all the check boxes are checked (all rows selected), the check box in the header is also checked. Furthermore, if a single check box (row) is unchecked (unselected) the "Select All" check box is unchecked as well.

    In order to achieved that, we have used Grid's RowSelected/RowDeselected client events as well as a hidden field to store the ClientID of header check box through ItemCreated server-side event. This way we can easily access the check box's element client-side when needed.


    JavaScript:
                <script type="text/javascript"
                    var grid; 
                    function GridCreated() 
                    { 
                        grid = this
                    } 
                     
                    function RowSelected() 
                    { 
                        if (grid.MasterTableView.SelectedRows.length == grid.MasterTableView.Rows.length) 
                        { 
                            setCheckBox(true); 
                        } 
                    } 
                     
                    function RowDeselected() 
                    { 
                        if (grid.MasterTableView.SelectedRows.length < grid.MasterTableView.Rows.length) 
                        { 
                            setCheckBox(false); 
                        } 
                    } 
                     
                    function setCheckBox(toCheck) 
                    { 
                        var checkBoxID = document.getElementById("hf1").value; 
                        var checkBox = document.getElementById(checkBoxID); 
                        checkBox.checked = toCheck; 
                    } 
                </script> 

    ASPX:
                <radG:RadGrid ID="RadGrid1" runat="server" AllowMultiRowSelection="True" AllowPaging="true" 
                    OnItemCreated="RadGrid1_ItemCreated" DataSourceID="AccessDataSource1"
                    <MasterTableView> 
                        <Columns> 
                            <radG:GridClientSelectColumn UniqueName="ClientSelectColumn" /> 
                        </Columns> 
                    </MasterTableView> 
                    <ClientSettings ApplyStylesOnClient="true"
                        <Selecting AllowRowSelect="true" /> 
                        <ClientEvents OnGridCreated="GridCreated" OnRowSelected="RowSelected" OnRowDeselected="RowDeselected"/> 
                    </ClientSettings> 
                </radG:RadGrid> 
                <asp:HiddenField ID="hf1" runat="server" />             
                <br /> 
                <asp:AccessDataSource ID="AccessDataSource1" DataFile="~/App_Data/Nwind.mdb" 
                    SelectCommand="SELECT CustomerID, CompanyName, ContactName, ContactTitle, Address, PostalCode FROM Customers" 
                    runat="server"
                </asp:AccessDataSource> 
     

    Code-Behind:
        protected void RadGrid1_ItemCreated(object sender, Telerik.WebControls.GridItemEventArgs e) 
        { 
            if (e.Item.ItemType == GridItemType.Header) 
            { 
                GridHeaderItem headerItem = (GridHeaderItem)e.Item; 
                CheckBox chkSelectAll = (CheckBox)headerItem["ClientSelectColumn"].Controls[0]; 
                hf1.Value = chkSelectAll.ClientID; 
            } 
        } 
     

    Find fully-functional web site attached to this message.
  2. Ricky
    Ricky avatar
    247 posts
    Member since:
    Jun 2007

    Posted 22 Sep 2007 Link to this post

    Hi,

    Whether v5.0 supports remembering selected rows when users navigate between pages out of the box, I do not see this functionality in this sample.

    I find this is also a imperative requirement in my projects.

    Regards,
    Ricky.
  3. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 24 Sep 2007 Link to this post

    Hello Ricky,

    Although the persistence of the selected grid items is not supported out-of-the-box in version 5.0 of RadGrid, you can attain the requested behavior with several lines of code. Review the help article linked below for further implementation details:

    http://www.telerik.com/help/aspnet/grid/?grdPersistSelectedRowsOnSorting.html

    Best regards,
    Stephen
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  4. ilker
    ilker avatar
    17 posts
    Member since:
    Nov 2007

    Posted 18 Dec 2007 Link to this post

    mostly, this method works fine. 
    -  when i select the header checkbox, all checkboxes in grid are selected.
    -  when i deselet header, all rows are deselected as well..
    -  when i click all the rows, the header is selected automatically.
    -  when i deselect one of all rows, the header checbox is deselected automatically..


    BUT there is something, may be a bug..

    -  when you select one (or some of rows) from grid, and then click the header checkbox, you can not select all the rows. even the checkbox is empty, it does not get ticked. it firstly deselects all rows. on your second click it selects all.

    is there a soluton for it?
  5. Konstantin Petkov
    Admin
    Konstantin Petkov avatar
    1911 posts

    Posted 19 Dec 2007 Link to this post

    Hi ilker,

    You are indeed right so thank you for pointing this detail to us.

    I played today with the project to find a workaround to this problem, but it seems the code will get too complicated as we have to add some ugly hacks to address this minor issue. It will be best to address it internally as soon as the GridClientSelectColumn behavior gets improved built-in.

    Please, excuse us for the temporary inconvenience. I have updated your Telerik points as a small token of gratitude for your involvement.

    All the best,
    Konstantin Petkov
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  6. ilker
    ilker avatar
    17 posts
    Member since:
    Nov 2007

    Posted 19 Dec 2007 Link to this post

    thanks for your care.
  7. ilker
    ilker avatar
    17 posts
    Member since:
    Nov 2007

    Posted 25 Dec 2007 Link to this post

    Hi again,

    Another (and more important) problem occurs when we try to add paging to radgrid.

    When the page index is changed, we lost the values of other pages.
    Even i click on 'select all' checkbox, i select the ones on the current page but not the other pages.

    When i change the page and then turn back, all the check-values have been lost.
     
    That is because we dont keep the values on an array or viewstate, or maybe because of postback?

    Is there a solution for that??


  8. Yavor
    Admin
    Yavor avatar
    11 posts

    Posted 27 Dec 2007 Link to this post

    Hello ilker,

    Indeed, the behavior that you mentioned is observed. The state of the checkboxes will be lost. To see more information on a possible way to preserve the state of the checkboxes, please refer to the following article.

    Kind regards,
    Yavor
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  9. dany7487
    dany7487 avatar
    88 posts
    Member since:
    Jan 2008

    Posted 01 Mar 2008 Link to this post

    Hi, Telerik and Ilker.

    So, Is not there a way to fix the radgrid with GridClientSelectColumn in order to make it work fine??

    Does it still have problems with the multiple selection and persisting state?

    Is it better to use checkboxes inside GridTemplateColumn ?

    thanks,
    Daniel.
  10. Konstantin Petkov
    Admin
    Konstantin Petkov avatar
    1911 posts

    Posted 04 Mar 2008 Link to this post

    Hi dany7487,

    The Grid ClientSelectColumn behavior is not changed so far. If you need to preserve the check boxes state on  paging, please follow the instructions from the article my colleague.

    We will update this CodeLibrary entry as soon as we change the ClientSelectColumn behavior.

    All the best,
    Konstantin Petkov
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  11. dany7487
    dany7487 avatar
    88 posts
    Member since:
    Jan 2008

    Posted 04 Mar 2008 Link to this post

    Hi, Telerik.

    Thank you very much for the replay.

    I made a solution using checkboxes inside a TemplateColumn with a script to check all / uncheck the checkboxes and solved persistence saving and retrieving the checkboxes states in Session variables on the objectdatasource events: Selecting and Selected. It can be used with the asp.net gridview.

    thanks!
    Daniel.
  12. Konstantin Petkov
    Admin
    Konstantin Petkov avatar
    1911 posts

    Posted 05 Mar 2008 Link to this post

    Hello,

    I have updated this Code Library entry with the Prometheus RadGrid (check the initial post in the thread). The used Telerik.Web.UI assembly version is the latest released 2007_3_1425 (RadControls Q3 2007 Service Pack 2). The updated demo works with SQL Express instead of Access DataSource.

    Best wishes,
    Konstantin Petkov
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  13. vinitha
    vinitha avatar
    77 posts
    Member since:
    Aug 2007

    Posted 14 Mar 2008 Link to this post

    Hi,

    I am facing the same problem. i.e. "Select All" checkbox is not working properly. Can anyone tell me which event is getting fired on selecting "Select All" checkbox? i want call an event or javascript function on selecting the "Select All" checkbox.

    Thanks in advance.

    Vinitha
  14. Konstantin Petkov
    Admin
    Konstantin Petkov avatar
    1911 posts

    Posted 17 Mar 2008 Link to this post

    Hello Vinitha,

    RadGrid's OnRowSelecting/Deselecting and Selected/Deselected events are fired on clicking the "Select All" check box. You can also attach your own function to the check box by finding the CheckBox in ItemCreated Grid event (looking for the GridHeaderItem) server-side and add a function for its onclick attribute:

    headerCheckBox.Attributes.Add("onclick", "myFunction();")

    Please, review this thread for solutions. I hope you will find an applicable one for your requirements as well.

    All the best,
    Konstantin Petkov
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
Back to Top