1. #1
    Sencha Premium Member
    Join Date
    Apr 2011
    Posts
    55
    Vote Rating
    1
    abhilashca is on a distinguished road

      0  

    Question Unchecking checkbox in column header of CheckboxSelectionModel

    Unchecking checkbox in column header of CheckboxSelectionModel


    Hello,

    I have a grid with CheckBoxSelectionModel. Selecting the header checkbox checks all the records and deselecting the checkbox unchecks all the records, of course which is the behavior. My grid has a delete button to delete the selected/all records and is working fine.

    Now my problem is, when I check the checkbox at the header (so that entire records will be selected) and hits my delete button, the entire records in the grid is getting deleted. But, the checkbox selection in the column header still remains as checked.

    I used the code: grid.getSelectionModel().clearSelections(false); after deletion. I guess, this code is only applicable to records in the grid and has nothing to do with the column header part. Is there any way, I can deselect the chekbox in the header?

    On a detailed investigation, I's surprised to know that the checkbox displayed in the CheckBoxSelectionModel is not html checkboxes, but they are images. So my idea of deselecting the checkbox using the DOM concept cannot be applied here. Instead, some kinda CSS trick has to be done.

    Does anyone faced such an issue before? Is there any solution for this?
    Any help will be appreciated.
    Thanks!

  2. #2
    Sencha Premium Member
    Join Date
    Apr 2011
    Posts
    55
    Vote Rating
    1
    abhilashca is on a distinguished road

      0  

    Default


    I wonder! No one tried this yet!

  3. #3
    Sencha User darthwes's Avatar
    Join Date
    Mar 2010
    Posts
    633
    Vote Rating
    -13
    darthwes can only hope to improve

      0  

    Default


    I pulled this from the sencha API docs for Ext 3.4. This is the method that fires when you click a column header:
    Code:
    // private    onHdMouseDown :function(e, t){if(t.className =='x-grid3-hd-checker'){            e.stopEvent();var hd =Ext.fly(t.parentNode);var isChecked = hd.hasClass('x-grid3-hd-checker-on');if(isChecked){                hd.removeClass('x-grid3-hd-checker-on');this.clearSelections();}else{                hd.addClass('x-grid3-hd-checker-on');this.selectAll();}}}
    So, call that function on your header with a dummy Ext.Event object or get the header reference and just .removeClass('x-grid3-hd-checker-on') on it...

    So probably just a Ext.fly to your header cell, then .removeClass on the aformentioned css class should do the trick. Happy hunting!
    Wes

  4. #4
    Sencha Premium Member
    Join Date
    Apr 2011
    Posts
    55
    Vote Rating
    1
    abhilashca is on a distinguished road

      0  

    Default


    Hello darthwes,
    Thanks for the reply.
    Let me take a try and will come back soon

  5. #5
    Sencha Premium Member
    Join Date
    Apr 2011
    Posts
    55
    Vote Rating
    1
    abhilashca is on a distinguished road

      0  

    Default


    Hello darthwes,
    That was tricky. It working now.

    Here is the complete solution for that: http://stackoverflow.com/questions/7...r-not-updating

  6. #6
    Sencha User
    Join Date
    Feb 2013
    Posts
    9
    Vote Rating
    0
    jpurni is on a distinguished road

      0  

    Default


    Hi ,

    I am facing similar issue with TREE GRID. But as tree uses tree store the above code doesnt work. Is there any way to do it in TREE GRID ?

Thread Participants: 2

Tags for this Thread

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar