locked
Trying to do the impossible, Fixed header on a table RRS feed

  • General discussion

  • My LightSwitch HTML adventure continues :)!

    One thing that continues to elude me in LightSwitch HTML is getting the header of a table to stay fixed at the top while scrolling vertically. This seemingly simple task has turned out to be a major undertaking. It is also the number one ask from my clients.

    I have a table on screen and have vertical scrollbars enabled. All of the columns are fixed width. And I do have a hacky solution in place that sort of gives me a fixed header. I modified a solution found on these forums and used JQUERY to clone the header row, loop through the old header and pick up the column widths and apply them to the new header, prepend the new header to the table and remove to original one. This does work... but I (and no one from the post that I picked this method up from) can get the header columns to stay aligned perfectly with the columns in the body of the table. Here is the function that I am working with:

    fixedTableHeader = function (element) {

        var old_th = $(element).find("thead");

        var new_th = old_th.parent().clone(true);

        var col_widths = $(element).find("thead th");

        var thWidths = [];

        new_th.find("tbody").remove();

        //new_th = new_th.wrap("<divmsls-clear msls-presenter-content msls-font-style-normal msls-vauto msls-hscroll\"></div>").parent();

       // new_th = new_th.wrap("<divmlsl-clear msls-row msls-presenter msls-ctl-table msls-vstretch msls-hauto msls-leaf msls-presenter-content msls-font-style-normal msms-fixed-width msls-vscroll msls-rows-layout\" style=\"width: 1200px;\"></div>").parent();

        new_th = new_th.wrap("<divmlsl-clear msls-row msls-presenter msls-ctl-table msls-hauto msls-leaf msls-presenter-content msls-font-style-normal msms-fixed-width msls-vscroll msls-rows-layout\" style=\"width: 1200px;\"></div>").parent();

        col_widths.each(function () {

            thWidths.push($(this).width());

        });

        new_th.find("thead th").each(function (i) {

           

            if (i == 0) {

                $(this).width(thWidths[i]-2);

                //$(this).offset({

            } else {

                $(this).width(thWidths[i]-2);

            }

        });

       

        $(element).before(new_th);

        old_th.remove();

    };

    I have some lines commented out, I am playing around with different combinations of things. Something that I have learned is that LS is applying several css style classes to the tables by default, and these have a big impact on how the table ultimately renders. So I tried applying the same css classes that I saw in the DOM Explorer for the table before I touched it. Better, but still not perfect.

    I think I need to understand more about these css classes. Such as 'msls-clear', 'msls-presenter', 'msls-ctl-table'... I tried searching through the msls-2.5.3.css file and found some of them, but not all. I could not find the msls-ctl-table one, but it must be somewhere, right?

    Can someone shed some light on these css classes for me?

    Part 2. In order to get this working I had to call this function in the postrender of the table. This was problematic as it would grab the column width before the table was fully rendered. Before the data had been loaded and the table was resized. I got around this by putting the function call inside of a "setTimeout" that waited 5 seconds before calling it. This does work, but is there a better way? Can I call this function from another event that would always fire after the table was finished loading?

    Thanks for looking,

    Jeremy


    Jeremy

    Monday, December 18, 2017 3:26 PM