[CLOSED] Select all records on the client paged grid

  1. #1

    [CLOSED] Select all records on the client paged grid

    Hello

    For sample code I just need to borrow this one : https://examples5.ext.net/#/GridPane...box_Selection/

    my problem is that "select all " checkbox select just active page ( even the store is paged on client)

    is there a way how to make checkbox working to select all grid pages?

    I found this relativelly old thread that suggest custom config for the selection model - is that still accurate way of doing that?


    https://forums.ext.net/showthread.php?26559

    Thanks Louise
    Last edited by fabricio.murta; May 26, 2021 at 6:43 PM.
  2. #2
    Hello, Louise!

    I'm afraid this still is the solution to employ the desired behavior. The selection is made "view-level", and said "view" doesn't know in-depth what the store is. And, according to the Ext.selectionCheckboxModel.selectAll() documentation, the action is "by design" meant to select only whatever is on the view, so there may also be problems with this (needs confirmation) when using buffered grids like in infitine scrolling example.

    This also explains why, even if you have local paging (paged on client), the "select all" checkbox will only and only select the current page worth of data.

    For local paging it is less of a problem but, when remote paging is involved, this simple "select all" checkbox may need to either pass an arbitrary "I have all selected" bit, or make a full round-trip to get from server the selection when this is triggered and the current selection needs to be passed back to server.

    Let us know if the thread you found is out-of-date and you can't use it on current Ext.NET version!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    OK
    thanks for reply after internal discussion we decided to go with "select page" only

    Is there a way to add tooltip to the select all checkbox (the on in top left corner) saying "Select records on current page"

    Thanks
    Louise
  4. #4
    Hello again, Louise!

    Just create a standalone tooltip and as a target make it point to the grid's check column header (or the checkbox itself).

    <ext:ToolTip runat="server" Html="Check all in this page">
        <CustomConfig>
            <%--<ext:ConfigItem Name="target" Value="document.getElementsByClassName('x-column-header-checkbox')[0].id" Mode="Raw" />--%>
            <ext:ConfigItem Name="target" Value="App.GridPanel1.down('checkcolumn').id" Mode="Raw" />
        </CustomConfig>
    </ext:ToolTip>
    Commented out is a second approach; we can't explicitly set the column's ID from the checkbox selection model; although the ID may be predictable, changing components in the page will make the ID change; but in case you want performance over lower maintenance, you can just run the custom code and place its result in the tooltip, for example:

    <ext:ToolTip runat="server" Html="Check all in this page" target="checkcolumn-1029" />
    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  5. #5
    Ok thanks

    This is my final markup, in order to display tooltip in each grid on the page ( I hae about 20 of them)


     <ext:ToolTip runat="server" Html="Select All on current page">
                            <CustomConfig>
                                <ext:ConfigItem Name="target" Value="Ext.getBody().el" Mode="Raw" />
                                <ext:ConfigItem Name="delegate" Value=".x-column-header-checkbox" Mode="Value" />
                            </CustomConfig>
                        </ext:ToolTip>
    Feel free to close this thread
    Louise
  6. #6
    Hello again, Louise!

    That was smart; a single tooltip and a bit of tinkering, you applied the tooltip everywhere you wanted!

    With this approach you can even either (a) use two tooltips with different text for checked and unchecked panels or (b) set tooltip contents depending on check state as it is about to be displayed.

    (a)
    <ext:ToolTip runat="server" Html="Check all in this page" Delegate="div.x-column-header-checkbox:not(.x-grid-hd-checker-on)">
        <CustomConfig>
            <ext:ConfigItem Name="target" Value="Ext.getBody().el" Mode="Raw" />
        </CustomConfig>
    </ext:ToolTip>
    <ext:ToolTip runat="server" Html="Uncheck all in this page" Delegate="div.x-column-header-checkbox.x-grid-hd-checker-on">
        <CustomConfig>
            <ext:ConfigItem Name="target" Value="Ext.getBody().el" Mode="Raw" />
        </CustomConfig>
    </ext:ToolTip>
    (b)
    <ext:ToolTip runat="server" Delegate="div.x-column-header-checkbox">
        <CustomConfig>
            <ext:ConfigItem Name="target" Value="Ext.getBody().el" Mode="Raw" />
        </CustomConfig>
        <Listeners>
            <BeforeShow Handler="this.setHtml((item.triggerElement.classList.contains('x-grid-hd-checker-on') ? 'Uncheck' : 'Check') + ' all in this page');" />
        </Listeners>
    </ext:ToolTip>
    Well, anyway, guess we're good to mark this as closed, right? Thanks for sharing the solution that worked for you!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 3
    Last Post: Mar 13, 2020, 10:55 PM
  2. Replies: 11
    Last Post: Oct 11, 2018, 3:34 PM
  3. Replies: 0
    Last Post: May 22, 2012, 5:39 PM
  4. Replies: 3
    Last Post: Jun 29, 2010, 2:54 PM
  5. [CLOSED] [1.0] Paged grid displays all records on store's reload
    By danielg in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jan 25, 2010, 11:26 AM

Posting Permissions