Best Practices For Hiding Columns With Csr While Retaining Quick Edit Functionality In Sharepoint

The Core Issue of Losing Quick Edit

The Quick Edit feature in SharePoint allows users to swiftly make in-line edits to list items without navigating away from the page. This enables efficient bulk editing of multiple list entries. Unfortunately, hiding columns in SharePoint using traditional methods disables the highly utilized Quick Edit functionality. When columns are hidden server-side, the Quick Edit option for list items no longer appears. This creates a troublesome trade-off between improving list usability by hiding unnecessary columns, and retaining the productivity benefits of Quick Edit.

Quick Edit Enables Rapid Bulk Editing

The Quick Edit option gives users a streamlined interface to make updates to multiple list items directly on the page. Fields can be efficiently edited in bulk without opening each item individually. This allows users to quickly modify and standardize information in SharePoint lists without costly clicks between items.

Hiding Columns Disables This Useful Feature

Unfortunately, hiding columns using the traditional approach of modifying views at the server level also removes the Quick Edit functionality. Because Quick Edit relies on the full underlying data to populate its editing fields, hiding columns server-side essentially disables this feature. Users are forced to choose between reducing clutter by hiding columns, and retaining the coveted Quick Edit tool. This limiting trade-off restricts both list usability and editable flexibility.

Retaining Quick Edit with CSR

Client-side rendering (CSR) provides a clever solution that hides columns to improve SharePoint list layouts while keeping Quick Edit intact. Because CSR hides columns using JavaScript after the page loads, the server-side Quick Edit tool still has full access to the underlying list data. This allows columns to be concealed from view, without disabling in-line editing capabilities.

Client-Side Rendering Defers Column Hiding

With client-side rendering, column visibility is determined by JavaScript code rather than server settings. Columns remain available server-side, while being hidden from user view after page load. This client-side deferral means Quick Edit remains functional regardless of the visible layout.

Quick Edit Stays Fully Functional

Since CSR hides columns after the page is rendered, Quick Edit retains its access to all column data on initial load. It populates its editing fields from the full set of available columns before any are hidden. With every column still intact server-side, Quick Edit continues functioning regardless of the columns visually made available to users. CSR allows columns to be hidden from view without disabling Quick Edit.

CSS Code for Hiding Columns

Here is example CSS code that can hide columns using client-side rendering while keeping Quick Edit accessible:

/* Hide Created and Modified Columns */
.ms-vb2 .ms-vb-title[DisplayName='Created'], 
.ms-vb2 .ms-vb-title[DisplayName='Modified']
{
     display: none !important;
}

Hides “Created” and “Modified” Columns

This code targets the “Created” and “Modified” columns specifically to hide them from view on initial page render. The ms-vb CSS class applies the hide rule to the column headers and cells after load.

Other Columns Can Be Hidden By Adapting Code

Additional columns can be hidden by adding the corresponding DisplayName selector and ms-vb class reference. For example, to hide a column titled “Status” the code would be:

 
.ms-vb2 .ms-vb-title[DisplayName='Status'],
.ms-vb2 .ms-vb-title[DisplayName='Created'],
.ms-vb2 .ms-vb-title[DisplayName='Modified']
{
   display: none !important;
}

With this flexible approach, any unnecessary SharePoint columns can be concealed while keeping Quick Edit enabled.

Additional Recommendations

When hiding SharePoint columns through client-side rendering to retain Quick Edit abilities, keep these additional best practices in mind:

Test Functionality Thoroughly After Deploying

Be sure to rigorously test the Quick Edit interface after deploying CSR column hiding code. Verify bulk editing functions properly and fully for all list items. Check different user permission levels to ensure consistency.

Consider Implications for Permissions and Workflows

Evaluate whether hiding certain columns from view could impact required permissions or approval workflows. Some dependencies may need to be reconfigured after hiding columns. Address these considerations before broad user adoption.

With thoughtful testing and adaptation where necessary, client-side rendering provides an elegant option to conceal SharePoint columns while retaining versatile Quick Edit capacities. Hiding distracting fields through CSR empowers users with simpler list views and bulk actions.