Change sorting arrow icon

0
Hi everyone,   I was wondering if it is possible to change this sorting arrow (marked yellow) from the data grid 2 into an other icon     Is there any setting for that or has anyone done this before?   Thanks, Lenny
asked
2 answers
1

Hi Lenny, 

 

I have done this by using the :after pseudo-element on the .th class, with an [aria-sort] attribute. I simply hide the svg, then add an icon in the :before or :after—in this example I have used both :before and :after because I needed 2 arrows with a different color to be displayed at the same time

image.png

image.png

image.png

Now for the CSS, I'll paste a simplified version: 

.widget-datagrid {
    .th[aria-sort] {
        .svg-inline--fa {
            display: none; // hide the initial svg
        }

        // general styling for both :before and :after
        &:before,
        &:after {
            font-family: "Atlas_Core$Atlas"; // this is the font used for Atlas icons
            position: absolute;
            right: 0;
            font-size: 12px;
        }

        // icon(s) you want to display when there is no sorting applied
        &[aria-sort="none"] {
            &:before {
                content: "\e926"; // this is the code used for the icon, I'm not sure if Atlas uses variables for this now, but you can find out which one to use by (for example) adding an icon to a button, then inspecting the button in your browser to see which code is used for that icon :)
            }

            &:after {
                content: "\e913";
            }
        }

        // icon(s) you want to display when sorting is set to ascending
        &[aria-sort="ascending"] {
            &:before {
                content: "\e926";
                font-size: 14px;
            }
        }

        // icons you want to display when sorting is set to descending
        &[aria-sort="descending"] {
            &:before {
                content: "\e913";
                font-size: 14px;
            }
        }
    }
}

 

Let me know if you can get it to work :) good luck!

answered
0

Hi Lenny,

There isn’t a built-in setting in Mendix to change the sorting arrow icon in a Data Grid 2. However, it’s possible to customize it through front-end styling with some custom CSS adjustments.

answered