OnPostRender not working on grouped list view web part
-
29-12-2020 - |
質問
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.
解決
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;
}
}