jQuery UI Widgets Forums Grid Single sort, multi sort issue

Tagged: 

This topic contains 16 replies, has 2 voices, and was last updated by  robf 9 months ago.

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
  • Single sort, multi sort issue #134641

    robf
    Participant

    Hello,

    I’ve run into a display issue when using the grid single-sort and multi-sort feature.

    I give the user the option to change from single to multi sort and I save their settings.

    I have four columns: A, B, C, D

    I single-sort on C and it correctly shows one arrow indicating the sorted column.

    I switch to multi-sort and sort on columns A,B,C. I see the arrows and numbers indicating the sort precedence.

    When I then switch back to to single-sort, only column C is correctly sorted however, the number showing precedence (3) still remains visible in the column header.

    Is this a bug or some type of setting I need to change?

    Please see snapshot here: https://ibb.co/Hz9WgLj

    Thanks.
    Rob

    Single sort, multi sort issue #134646

    admin
    Keymaster

    Hi Rob,

    Could you share a jsfiddle sample how you use these features?

    Regards,
    Peter

    jQWidgets Team
    https://www.jqwidgets.com/

    Single sort, multi sort issue #134651

    robf
    Participant

    Not sure if this message made it through after edit…

    Hi Peter,

    I am sort of baffled by something. When I add sortmode: ‘many’ in my code it shows SORT PRECEDENCE numbers in the columns headers – same as the pic I shared here https://ibb.co/Hz9WgLj

    When I look at the sort examples in the demos, and then in the fiddles, it only shows multiple asc/desc arrows for the sorted columns.

    I did not add anything in my code to append those numbers shown. Don’t even know HOW I’d do this.

    Can you at least tell me if YOUR code does this somewhere? A particular version? A setting?

    I’m at a loss on this.

    One thing that I see in my grid rendering is an iconscontainer and one of the child nodes shows order=”1″ .

    Does that help?

    `<div class=”iconscontainer” style=”height: 47.998px; margin-left: -32px; display: block; position: absolute; left: 100%; top: 0%; width: 32px;”>
    <div class=”filtericon jqx-widget-header jqx-widget-header-light” style=”height: 47.998px; float: right; display: none; width: 16px;”>
    <div class=”jqx-grid-column-filterbutton jqx-grid-column-filterbutton-light” style=”width: 100%; height:100%;”/>
    </div>
    <div class=”sortasc jqx-widget-header jqx-widget-header-light” style=”height: 47.998px; float: right; display: none; width: 16px;”>
    <div class=”jqx-grid-column-sortascbutton jqx-grid-column-sortascbutton-light jqx-icon-arrow-up jqx-icon-arrow-up-light” style=”width: 100%; height:100%;”/>
    </div>
    <div class=”sortdesc jqx-widget-header jqx-widget-header-light” style=”height: 47.998px; float: right; display: none; width: 16px;”>
    <div class=”jqx-grid-column-sortdescbutton jqx-grid-column-sortdescbutton-light jqx-icon-arrow-down jqx-icon-arrow-down-light” style=”width: 100%; height:100%;”/>
    </div>
    <!– ORDER=”1″ IS SETTING THE NUMBER ON THE COLUMN HEADER–>
    <div class=”sorticon jqx-widget-header jqx-widget-header-light ascending” order=”1″ style=”height: 47.998px; float: right; visibility: inherit; width: 16px;”>
    <div class=”jqx-grid-column-sorticon jqx-grid-column-sorticon-light jqx-icon-arrow-down jqx-icon-arrow-down-light” style=”width: 100%; height:100%;”/>
    </div>
    </div>

    Single sort, multi sort issue #134657

    admin
    Keymaster

    Hi robf,

    The sort order indexes depend on the theme used. For example, in the fluent theme, the style is defined in the .jqx-grid-column-header-fluent[sort][sort-index] .sorticon:before CSS. If you wish, you can override and remove these, by setting content: ”; after defining this CSS class.

    Best regards,
    Peter Stoev

    jQWidgets Team
    https://www.jqwidgets.com/

    Single sort, multi sort issue #134666

    robf
    Participant

    Hi Peter,

    Is there a way to turn off the INDEXES on column headers only when in SINGLE sort mode? Because they continue to show up even if there is only ONE column sorted (in single sort).

    I have a toggleSort() method where I check if I should change state to single sort or multi-sort. I then save the columns that were sorted on so I can use them again when the user changes the state.

    So, can I have something like:

    toggleSort()
    {
       if ($("#jqxgrid").jqxGrid("sortMode") === "one)
       {
          //  Modify some CSS and turn OFF indexes
        }
       else {
          //  Modify some CSS and turn ON indexes
        }
    }
    }

    Thank you!
    Rob

    Single sort, multi sort issue #134671

    admin
    Keymaster

    Hi Rob,

    It’d be better to turn them off with CSS only. We do not have built-in API in jqxGrid to do that. My suggestion is to remove them by overriding the sort indexes in the CSS.

    Best regards,
    Peter Stoev

    jQWidgets Team
    https://www.jqwidgets.com/

    Single sort, multi sort issue #134672

    robf
    Participant

    Hi Peter,

    FYI: I am using the light theme, which is apparently a ‘fluent’ theme.

    I think I am following what you are saying, but if I override the CSS then aren’t I completely losing the index numbering on columns for the MULTISORT? It seems that way.

    I only want to stop the INDEX numbering showing on the SINGLE sort. It seems I cannot make that behavior go away.

    I even went to this extreme, which seems unnecessary (sorticon2):

    .jqx-grid-column-header-light[sort][sort-index] .sorticon2 {
        align-items: center;
        width: 45px;
        flex-direction: row-reverse;
        margin-right: 5px;
    }
    
    .jqx-grid-column-header-light[sort][sort-index] .sorticon2:before {
        content: '';
        font-size: 11px;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        background: none;
        color: none;
        padding: 5px;
        margin-left: 5px;
        height: 8px;
        box-sizing: content-box;
    }

    And then in my JS code, I am removing/adding classes:
    $('.jqx-grid-column-header-light[sort][sort-index] .sorticon').removeClass("sorticon").addClass("sorticon2")

    Please note, even with THAT logic, the mysterious INDEX number will STILL shows up when in single sort mode.

    I know I could always choose a non-fluent theme, which is basically the same as overriding the CSS, but I really hate to lose the feature to have the index numbers show on the multisort.

    Please share any other ideas.

    Thanks, again.
    Rob

    Single sort, multi sort issue #134675

    admin
    Keymaster

    Hi rob,

    “FYI: I am using the light theme, which is apparently a ‘fluent’ theme.” – no, they are quite different themes. The light theme is one of our standard themes, while the Fluent theme follows the design principles of the Fluent design and has different styling, animations, layouts, etc.

    Could you share a jsfiddle which shows exactly what you do so I can debug your code?

    Best regards,
    Peter Stoev

    jQWidgets Team
    https://www.jqwidgets.com/

    Single sort, multi sort issue #134677

    robf
    Participant

    Hi Peter,
    Thanks for replying.

    I created the following fiddle to show the behavior: https://jsfiddle.net/rfossella/bhaozv8e/120/

    I included lots of code comments to describe the methods. I also include DEMO comment in the app to describe the issue I am facing.

    Hope this helps!
    Thanks.
    Rob

    Single sort, multi sort issue #134679

    admin
    Keymaster

    Hi Rob,

    You can add this to your toggle code:

    document.querySelectorAll('#jqxgrid [sort-index]').forEach((item) => {
    item.removeAttribute('sort-index');
    });

    By doing this, the sort indexes would not be displayed when the grid is switched from multiple sort to single sort mode.

    Best regards,
    Peter Stoev

    jQWidgets Team
    https://www.jqwidgets.com/

    Single sort, multi sort issue #134692

    robf
    Participant

    Hi Peter,
    Thank you. That helped with that issue.

    I have a follow-up question, please.

    When I switch from single sort to multi-sort I get the sort info – i.e. ‘getsortinformation’. This shows something like:

    {"sortcolumns":[
    {"dataField":"lastname","ascending":true},{"dataField":"firstname","ascending":true},{"dataField":"sequence","ascending":true}],
    "sortcolumn":"sequence","sortdirection":{"ascending":true,"descending":false}}

    I use the “sortcolumns” to save the state of the sorted columns so I can reset to that state when I switch sort mode.

    However, I notice that even when in single sort mode, each time I click on a new column that sortcolumns array grows, although I would expect it to show only a single item in the array with the currently sorted column. I rely on that list to reset the sort, regardless if I go back to single or multi sort. What ends up happening is, it doesn’t properly set the sorted column when I go back to single sort, since the last item in the list does not truly reflect the last clicked on column.

    Please see the updated fiddle below which includes a “View Sort Info” button. Notice when in single sort mode that each time you click on a column it keeps adding items to the sortcolumns list. If this is the intended behavior, can you explain why? Or possibly offer a better way to handle it? Would I need to manually clear out the items in that array?

    https://jsfiddle.net/rfossella/bhaozv8e/144/

    Please make sure you switch sort modes to see the full effect of losing the last single sort setting.

    Thank you!
    Rob

    Single sort, multi sort issue #134700

    admin
    Keymaster

    Hi robf,

    I would suggest you to clear the items in the array. When you switch the sort modes, you can do this: $("#jqxgrid").jqxGrid('sortcolumns', []);

    Best regards,
    Peter Stoev

    jQWidgets Team
    https://www.jqwidgets.com/

    Single sort, multi sort issue #134701

    robf
    Participant

    Hi Peter,

    Unfortunately that does not solve the issue as I am still relying on the state of the sortColumns to reset the sort when the mode is switched. The fact the sort columns array keeps building up in single sort mode, instead of only including one column still presents a problem.

    I updated fiddle with your suggestion: https://jsfiddle.net/rfossella/bhaozv8e/149/

    Rob

    Single sort, multi sort issue #134707

    admin
    Keymaster

    Hi Rob,

    There’s an issue in the code. The $(“#jqxgrid”).jqxGrid(‘sortcolumns’, []); is added at the bottom of the method, but before that, you get the sort info. This code should be moved to the top of the method.

    Best regards,
    Peter Stoev

    jQWidgets Team
    https://www.jqwidgets.com/

    Single sort, multi sort issue #134715

    robf
    Participant

    Hi Peter,
    Moving the code to the top of the toggleSortMode method cause the multisort options to not be “remembered” correctly.
    In single mode, click on a column; then switch to multisort and select 4 columns, then switch to single, but not click anything, then switch back to multi, the columns are correctly remembered.

    Then go back to multisort and select another column, then switch to single, click on different column, then switch back to multi, the columns are no longer correctly remembered, and in some instances the SINGLE sort column is added to the multisort.

    I guess I am still trying to understand why the sortColumns array isn’t automatically cleared when switching modes, since the recommendation is to try and do this manually.

    Thanks again for helping me this.

    https://jsfiddle.net/rfossella/bhaozv8e/161/

    Rob

Viewing 15 posts - 1 through 15 (of 17 total)

You must be logged in to reply to this topic.