Disable List Row Based On Status Column Value

Question

There is a requirement in the SharePoint list, when user change the status value to closed, closed row should be "ready-only/Disable". Nobody should edit the closed lines.

Below is the Script and Article link to achieve disable a row in quick edit based on status change.

https://social.technet.microsoft.com/Forums/en-US/acefe274-cf8e-4a58-a87b-a148345813a1/disable-a-row-in-quick-edit-using-jquery

<script>
    
(function () {
debugger
            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 + "']{visibility: collapse !important;}"
                        }
                    }
                   if ($('#quickModeCss').length < 1) {
                        $("<style id='quickModeCss' type='text/css'>" + cssStr + "</style>").appendTo("head");
                    }
                }  

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

</script>

Issue:

when user click on quick edit closed rows will not be visible but What we found was if the user drags data across a closed hidden line, the hidden line will change

Row number
1	OPEN	Change made here and dragged to row 4 and 5 will change 2 and 3 even though you cant see them
2	CLOSED
3	CLOSED
4	OPEN
5	OPEN

Please any one help me on fixing this issue.

Let me know your preferred e-mail so I can share the video for more details on issue.

Answer 1

Hi @Manasa

In your code, when the user clicks on quick edit, you've dynamically generated a <style> tag with CSS rules that will hide closed rows. However, you also mentioned that if the user drags data across the closed hidden line, the hidden line will change.

From your description, you want to prevent users from changing the style of hidden rows by dragging. To fix this, you can try using the CSS pointer-events property to disable mouse events, thus preventing the user from dragging the hidden row.

cssStr += "tr[iid='" + rowElementId + "']{visibility: collapse !important; pointer-events: none;}"

In this way, no matter how the user drags the data, the hidden row will remain invisible and will not have any effect on the user's operation.

However, considering that browsers may not support CSS styles, it is not recommended to use IE.But considering that the browser may not support CSS styles, it is not recommended to use IE. Or tell me the browser you use

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best Regards

Cheng Feng