Hide Column In OOTB SharePoint Gannt View And Datasheet View

In this blog, I will explain, how to hide the columns in SharePoint OOTB Gannt view and DataSheet view in very easy way.

Problem

In one of the my project, I have to hide the columns in SharePoint OOTB Datasheet view and Gannt view, using JavaScript/jQuery.

 

Solution

 

After search many times, on the above problem, I have found that SharePoint OOTB Datasheet view and Gannt View are used JSGrid to quickly edit the list items in SharePoint.

 

To hide the columns in both the views, we need to first identify View ID for Gannt View or DataSheet View. 

 

The guid is of the Gannt View. You can snoop it. e.g. from page source. Search for g_ViewIfToViewCounterMap. 

There will be only one such place, in case you have one Gannt View or DataSheet View on the page. The GUID to the right is exactly, what you need.

 

After getting GUID for Gannt or Datasheet view, we need to write the code, given below, in document.ready or window.load function to hide the columns in Gannt view.

 

Code for DataSheet View 

$(document).ready(function() {
    var viewId = "{E41180E8-CCE3-424A-A525-9A0A6F19DF13}"; // Put Datasheet view GUID
    var jsGridContainer = $get("spgridcontainer_" + g_SPGridInitInfo[viewId].jsInitObj.qualifier); // It will return jsgrid container
    var jsGrid = jsGridContainer.jsgrid; // Find jsgrid from jsgrid container
    var columns = jsGrid.GetColumns(); // All columns in Datasheet View
    for (var i in columns) {
        columns[i].isSortable = false; // If we want to disable sorting in all fields
        columns[i].isAutoFilterable = false;
    }
    jsGrid.UpdateColumns(new SP.JsGrid.ColumnInfoCollection(columns));
    // Hide master lookup column
    jsGrid.HideColumn("Column Name");
});

Code for Gannt View 

$(document).ready(function()
{
$("div [id$='_ListViewWebPartJSGrid']")[0].jsgrid.HideColumn("Column Name");
});