Clicking #ManualRefresh causes loss of formatting in list view web part

Question

SP OnPrem 2019

I have a list view web part on my form and I enabled "Show Manual Refresh Button". When I click the button manually (or with code), the view updates as expected, but it causes a loss of formatting on the view.

In particular, Setting Column Widths and Removing the default Sort options on all columns.

Anything done in css seems to remain in place, like custom fonts.

It's the customizations done via script that get lost.

How I'm clicking the Manual Refresh button:

document.getElementById('ManualRefresh').click();

or

$('#ManualRefresh').click();

(But it also occurs when I click it manually.)

These are the functions I use to add the formatting:

function DisableListViewSorting(){
    //Disable all sort options in ALL list view web parts on this form
    //called from doc.ready
    //hide sort arrows
    $(".ms-listviewtable th").each(function(){       
        $(this).attr("onmouseover","");
        $(this).attr("onmousedown","");
    });
    //hide <a> link on column label
    $.each( $("[id^=diidSort]") , function () {
        $(this).parent().html("<span>"+$(this).text()+"</span>");       
    });
};


function SetListViewWebPartColumnWidths(){
    //Set width of individual columns here

  //Comments web part
    //Created
    $("div.ms-vh-div[DisplayName='Created']").attr("style", "width: 120px");

    //Created By
    $("div.ms-vh-div[DisplayName='Created By']").attr("style", "width: 120px");

    //Title - used to display Open link
    $("div.ms-vh-div[DisplayName='']").attr("style", "width: 20px");

    //Comment
    $("div.ms-vh-div[DisplayName='Comment']").attr("style", "min-width: 600px");

};

After triggering the Manual Refresh I've tried calling these functions again. I can see they run and set the custom widths for about a 1/10 of a second, but then they revert back to the smaller size and the sorting is enabled.

So the Manual Refresh is making these changes invalid.

Any ideas?

Thank you

Answer 1

Solved it by moving the 2 formatting functions to the JSLink file.

In the JSLink call the functions like this:

var overrideCtx = {};
overrideCtx.Templates = {};
overrideCtx.Templates.Fields = {
    'LinkTitleNoMenu':{'View': GetTitleSpecial},  //Title field with link
    'TimeDifference':{'View': GetActivityLogTimeDifference},
    'ID':{'View': AddActivityLogStopButton},
    };

//Call custom formatting functions
overrideCtx.OnPostRender = [DisableListViewSorting,SetListViewWebPartColumnWidths];

SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);

After the Manual Refresh these options now stay in place. Works in Chrome and IE 11.