Select All Checkbox

9 posts, 0 answers
  1. Michael
    Michael avatar
    66 posts
    Member since:
    Dec 2009

    Posted 27 May 2014 Link to this post

    I'm trying to add a select all checkbox to the header to select/deselect all checkboxes.  The chkSelectAll checks all the checkboxes but doesn't correctly execute the checkbox handler I have below that stores the StudentID in an array.  I do not have the checkbox bound to a column, I just want to have them stored in the checked array. 

    Also, my other problem is when the page is changed, the checkbox looses its state and becomes unchecked.  I would like to retain the checkbox state inbetween page selection.

    KENDO GRID:
    ​ columns.Bound(m => m.StudentID)
    .ClientTemplate("# if(StudentEmail != null) { # <input type='checkbox' class='chkbxq' name='checkedRecords' value='#= StudentID #' /> #} else {# <input type='checkbox' class='chkbxq' name='checkedRecords' value='#= StudentID #' disabled /> #} #").Title("").Width(40).HtmlAttributes(new { style = "text-align:center" }).ClientFooterTemplate("Total:")
    .HeaderTemplate("<input type='checkbox' id='chkSelectAll' class='chkbxq' />").HeaderHtmlAttributes(new { style = "text-align:center" }).Sortable(false);

    JAVSCRIPT:
    var checked = {};

    //handles select/deselect all checkboxes
    ​ $('#chkSelectAll').click(function() {
    debugger;
    $('.chkbxq:checkbox:not(:disabled)').prop('checked', this.checked);
    });




    ​ // handle the click event of all checkboxes
    $(this).delegate(":checkbox", "click", function () {
    debugger;
    // store the checked state of the record (this.value is set to the value of the StudentID property of the data item)
    checked[this.value] = this.checked;
    });
  2. Michael
    Michael avatar
    66 posts
    Member since:
    Dec 2009

    Posted 27 May 2014 Link to this post

    Also notice when I execute the chkSelectAll click event, I'm only selecting those checkboxes that are not disabled, this is a requirement.
  3. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 29 May 2014 Link to this post

    Hello Michael,

    Checkboxes are demonstrated in the following code library,

    http://www.telerik.com/support/code-library/checkbox-column-and-incell-editing

    The only case that is not covered is that the header checkbox is not checked based on the checked checkboxes in the rows, however this could be easily implemented with the help of the dataBound event of the Grid.

    Also I would like to note that autoSync of the dataSource is not enabled so checking the items won't be persisted on the database without explicitly clicking the Save Changes button (other way when you switch pages changes will be lost).

    I modified the code library project to demonstrate the case.

    I hope this helps.

    Kind Regards,
    Petur Subev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  4. Michael
    Michael avatar
    66 posts
    Member since:
    Dec 2009

    Posted 29 May 2014 in reply to Petur Subev Link to this post

    In that example, you have 3 rows.  I put 15 rows and enabled paging..5 rows per page.  When I click on the header checkbox to select all, the rows in pages 2 & 3 are not checked.  I would assume if a user checks the select all checkbox all checkboxes on all pages would be selected.  How would I go about select/deselecting all rows regardless of paging?
  5. Michael
    Michael avatar
    66 posts
    Member since:
    Dec 2009

    Posted 29 May 2014 in reply to Michael Link to this post

    Also, when I go from page to page, the checkboxes are not retained...
  6. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 29 May 2014 Link to this post

    Hello Michael,

    The checkboxes on the different pages are not checked because does pages does not exist on the client. They are retrieved when the user clicks on the particualar page. In order to update records on the different pages without going into them you should create separate Ajax request and send to the server information that all items should be checked/unchecked (this is not related to the Grid at all). Proceed the same way as the master checkbox is somewhere else on the page and you want to change all the records when the checkbox is checked.

    Regarding the persistence while paging, I already explained that changes are not saved to the server because changes are made only on the client side (no saving request is performed). Consider enabling the AutoSync option of the dataSource to send the changes immediately to the server.

    Kind Regards,
    Petur Subev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  7. Laksh
    Laksh avatar
    25 posts
    Member since:
    Mar 2011

    Posted 30 Jun 2015 in reply to Petur Subev Link to this post

    Hi Michael, have you ever found the solution for this issue?
  8. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2199 posts

    Posted 03 Jul 2015 Link to this post

    Hello Laksh,

    My colleague Peter already explained what would be the solution in current case if the "ServerOperation" option of the DataSource is set to true - creating separate Ajax request to get the IDs of the rows on other pages. If the "ServerOperation" option of the DataSource is set to false than you can access the records from other pages by calling the "data" method of the DataSource on the client side. 

    Regards,
    Vladimir Iliev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  9. Michael
    Michael avatar
    66 posts
    Member since:
    Dec 2009

    Posted 03 Jul 2015 in reply to Laksh Link to this post

    no, the user has to go to each page and select the checkbox in the header and then I store the checkbox on the databound event

    function dataBoundGird(e) {

    $('#grid :checkbox').each(function () {
    //set checked based on if current checkbox's value is in checkedArray.
    $(this).attr('checked', jQuery.inArray($(this).val(), checkedArray) > -1);
    });

     

    }

     

     

Back to Top