SharePoint List Sticky Header

Question

SharePoint List Sticky Header

ManasaGowda 0

We have a list in classic SharePoint site. We have added the script to hide and show data based on condition but after adding that script, sticky header is not supporting in quick edit.

Requirement:

There is a column called Status (Choice field ) values are Closed and Open.

If user try to edit the row and status is Closed, data will not be visible in the quick edit.

To achieve the above requirement we are using JavaScript. After adding this script SharePoint list sticky header is collapsing in the quick edit.

Note:

We are using custom script to create sticky header.

RaytheonXie_MSFT 40,486 Reputation points Microsoft External Staff

2023-03-31T06:24:20.65+00:00

Hi @ManasaGowda

Could you share the code for further testing?

ManasaGowda 0

Please find the below code.

<script src="https://completecoherence.sharepoint.com/sites/heaven/SiteAssets/JS/jquery-3.2.1.min.js"></script>
<script src="https://completecoherence.sharepoint.com/sites/heaven/Style Library/js/Headers.js"></script>



<style type='text/css'>
#MSOZoneCell_WebPartWPQ4{
margin-left:1px;
}

.ms-alternating{
background-color: lightgrey !important;
}
</style>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>


</style>

<body>
  <div id="quickModeCss">
      
  </div>
<button type="button" id="actbutton" style="background: chartreuse;border-radius: 12px;margin-left: 179px;
    margin-top: -98px;">View All</button>
</body>
<script>
   
(function () {
            var overrideContext = {};
            overrideContext.Templates = {};
           overrideContext.OnPreRender= function(ctx) {
                if (!ctx.inGridMode){  
                           
                   var sheet = document.getElementById("quickModeCss");  
                   document.addEventListener("click", myFunction);                    
                  function myFunction() {   
                            sheet.disabled = true;                                                 
                   sheet.parentNode.removeChild(sheet);
                   }
                   
                }
            }              
            overrideContext.OnPostRender = function (Ctx) {
                if (ctx.inGridMode) {
                    var rows = ctx.ListData.Row;
                    var cssStr = "";
                    for (var i = 0; i < rows.length; i++) {
                        var isCompleted = rows[i]["Closed"] == "Closed";
                        if (isCompleted) {
                            var rowElementId = GenerateIIDForListItem(ctx, rows[i]);
                            cssStr += "tr[iid='" + rowElementId + "']{display:none !important;}"
                        }
                    }
                   if ($('#quickModeCss').length < 1) {
                        $("<style id='quickModeCss' type='text/css'>" + cssStr + "</style>").appendTo("head");
                    }
                }  

            };
            SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideContext);
 
        })();


</script>
</html>

ManasaGowda 0 Reputation points

2023-04-03T06:35:29.8133333+00:00

Hi RaytheonXie_MSFT

Any luck? did you find any solution?

Awaiting for you reply.

1 answer

Your answer

RaytheonXie_MSFT 40,486 Reputation points Microsoft External Staff

2023-03-31T06:24:20.65+00:00

Hi @ManasaGowda

Could you share the code for further testing?
ManasaGowda 0 Reputation points

2023-03-31T06:32:34.0433333+00:00

Please find the below code.

<script src="https://completecoherence.sharepoint.com/sites/heaven/SiteAssets/JS/jquery-3.2.1.min.js"></script> <script src="https://completecoherence.sharepoint.com/sites/heaven/Style Library/js/Headers.js"></script> <style type='text/css'> #MSOZoneCell_WebPartWPQ4{ margin-left:1px; } .ms-alternating{ background-color: lightgrey !important; } </style> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <script src="https://code.jquery.com/jquery-1.10.1.min.js"></script> <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> </style> <body> <div id="quickModeCss"> </div> <button type="button" id="actbutton" style="background: chartreuse;border-radius: 12px;margin-left: 179px; margin-top: -98px;">View All</button> </body> <script> (function () { var overrideContext = {}; overrideContext.Templates = {}; overrideContext.OnPreRender= function(ctx) { if (!ctx.inGridMode){ var sheet = document.getElementById("quickModeCss"); document.addEventListener("click", myFunction); function myFunction() { sheet.disabled = true; sheet.parentNode.removeChild(sheet); } } } overrideContext.OnPostRender = function (Ctx) { if (ctx.inGridMode) { var rows = ctx.ListData.Row; var cssStr = ""; for (var i = 0; i < rows.length; i++) { var isCompleted = rows[i]["Closed"] == "Closed"; if (isCompleted) { var rowElementId = GenerateIIDForListItem(ctx, rows[i]); cssStr += "tr[iid='" + rowElementId + "']{display:none !important;}" } } if ($('#quickModeCss').length < 1) { $("<style id='quickModeCss' type='text/css'>" + cssStr + "</style>").appendTo("head"); } } }; SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideContext); })(); </script> </html>
ManasaGowda 0 Reputation points

2023-04-03T06:35:29.8133333+00:00

Hi RaytheonXie_MSFT

Any luck? did you find any solution?

Awaiting for you reply.

Answer 1

ManasaGowda 0

Can anyone please help me to resolve the issue.

Share via

SharePoint List Sticky Header

1 answer

Your answer