Custom Grid Sorting

[jbk68]

Not sure if this is currently available or if it's something KTL can do. I like to be able to show the sorted columns on a Grid in bold and/or have the sorted column be a different color. For example, if column 1 is the "chosen" sorted column, all of columns 1's data would be "bold" and "red". If user changes the sort column to column 2, column 2's data would now be "bold" and "red"

[CSWinnall]

Hi Jon

At the moment it is not a KTL thing but a little code could accomplish this:

$(document).on('knack-view-render.any', function (event, view) {
// Select the table headers with class 'sorted-asc' or 'sorted-desc'
        $(`#${viewKey} th.sorted-asc, #${viewKey} th.sorted-desc`).each(function() {
            // Get the index of the table header
            const index = $(this).index();

            // Select the corresponding cells in each row and change their background color
            $('tr').each(function() {
                $(this).find('td').eq(index).css({'background-color': 'red', 'font-weight': 'bold'}); // replace 'yellow' with your desired color
            });
        });
});

If you already have a view render .any put the inner code in there. Hope this helps
Craig

[jbk68]

Thanks Craig for the script. I inserted my actual view (view_262) and I couldn't get it to work. When I applied you code, it actually created a frame around my Grid/Table and the Knack spinner just keep spinning when I clicked a column.

[CSWinnall]

Sorry just found another thing if this is applied to a table that is grouped it changes the grouped row colour as well so the new code is:

// Select the corresponding cells in each row and change their background color
   $(`#${viewKey} tbody tr:not(.kn-table-group)`).each(function() {
         $(this).find('td').eq(index).css({'background-color': 'rgb(251 248 227)', 'font-weight': 'bold'}); // replace 'yellow' with your desired color
   });

[CSWinnall]

Hi Jon

My apologies I sent you my code instead of the more generalised code. I have re-written this code so that it should work for you:

$(document).on('knack-view-render.view_262', function (event, view) {
// Select the table headers with class 'sorted-asc' or 'sorted-desc'
        $(`#${view.key} th.sorted-asc, #${view.key} th.sorted-desc`).each(function() {
            // Get the index of the table header
            const index = $(this).index();

            // Select the corresponding cells in each row and change their background color
            $(`#${view.key} tbody tr:not(.kn-table-group)`).each(function() {
                $(this).find('td').eq(index).css({'background-color': 'red', 'font-weight': 'bold'}); 
            });
        });
});

[jbk68]

Hopefully we can get a keyword (ie _tbs) for this feature. KTL makes it so easy for guys (like myself) with little to no time or coding experience. When you get your code perfected, let me know.

Thanks again... JON

[jbk68]

Hey Craig, that new code is working as expected... I changed it to instead of the background red, so have the font color red.

As always, thank you very much Craig.

[cortexrd]

There you go!! Another cool KTL keyword: _csc for Colorize Sorted Column
Will work in Grid and Search views.

See you in a next release soon...

Norm

[jbk68]

Thanks Norm... JON

[jbk68]

Question for you Craig, until Norm implements the new keyword _csc for basically doing what the code you provided, how would I use this code on multiple views (ie view_262 & view_301, etc...). I know that I can place individual code for each view but would like to use you code for multiple views... JON

[CSWinnall]

I have just added to the KTL so hopefully it will be with you soon.
The only way to do this would be to add it in a .any view render with an array of views then check to see if the view is on the page doing something like this:

const viewIds = ['view_262', 'view_301']
const foundViewIds = viewIds.filter(viewId => $(`#${viewId}`).length > 0);
foundViewIds.forEach(viewId => {
      $(`#${viewId} th.sorted-asc, #${viewId} th.sorted-desc`).each(function() {
            // Get the index of the table header
            const index = $(this).index();

            // Select the corresponding cells in each row and change their background color
            $(`#${viewId} tbody tr:not(.kn-table-group)`).each(function() {
                $(this).find('td').eq(index).css({'background-color': 'red', 'font-weight': 'bold'}); 
            });
        });
});

Craig

[jbk68]

Got it, thank you.

[cortexrd]

I am about to make a MAJOR release today hopefully.
I will try very hard to squeeze it in.

Norm

[jbk68]

Thank you.

[cortexrd]

Jon,

You've got your keyword! It's in v0.21.0

It will be _scs for Sorted Column Style
See documentation for details.

Norm

[jbk68]

Yeah I was just reading all your improvements and fixes for v 0.21.0.

Appreciate all you do... JON