0

Hi I have a view where I'm grouping the list based on two columns and I would like to add some CSS to the cells containing "Green", "Red" etc.

I have created a JS method colorCoding which takes care of coloring the cell containing the desired words.

I am calling the color coding method like this in my code

SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() {

      SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
        OnPreRender: function(ctx) {
            console.log("calling color coding inside OnPreRender");
            colorCoding();
            console.log("color coding called inside OnPreRender");
        },// close OnPostRender
        OnPostRender: function(ctx) {
            console.log("calling color coding inside OnPostRender");
            colorCoding();
            console.log("color coding called inside OnPostRender");
        }// close OnPostRender
      });// close RegisterTemplateOverrides

    }); // close executeFunc

It worked very well on the view when there was no grouping. But started to fail once I applied grouping to the list view. On sorting or filtering any of the columns the color coding is called as expected. I need OnPostRender to be called on expanding a group. It looks like OnPostRender is not called on expanding a group.

1

I found the answer here. It uses hooking into ProcessImn SharePoint function which supposedly gets called on expanding any group according to the answer.

I modified my code as below and it is now working

SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() {
        callColorCodingOnGroupExpand();
      SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
        OnPreRender: function(ctx) {
            console.log("calling color coding inside OnPreRender");
            colorCoding();
            console.log("color coding called inside OnPreRender");
        },// close OnPreRender
        OnPostRender: function(ctx) {
            console.log("calling color coding inside OnPostRender");
            colorCoding();
            console.log("color coding called inside OnPostRender");
        }// close OnPostRender
      });// close RegisterTemplateOverrides

    }); // close executeFunc


    function callColorCodingOnGroupExpand()
    {

        //Hook into SharePoint event to fix all links in group-by tables.
        var oldExpand = ProcessImn;

        ProcessImn = function(){
            var results = oldExpand.apply(this, arguments);

            colorCoding();

            return results;
        }
    }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.