0

I am using SP2013 on-premise. On a list view all the columns' header come with a filter+sorter function. It is not useful on some columns (e.g. photo, which show a picture and no point to sort, and calculated columns)

May I know how to disable some of column headers' filter and sorting?

0

Use the custom client side rendering: https://www.codeproject.com/Articles/620110/SharePoint-Client-Side-Rendering-List-Views

I often override the RenderItemTemplate in order to customize the entire list w/o using jQuery. In fact, I copy and paste the entire function and change the for loop in order to customize the rendering of the single columns.

Add a ScriptEditorWebPart before your ListView and add the <script> source.

RenderItemTemplate = function(c) {
    var k = c.CurrentItem,
        d = c.ListSchema,
        i = c.CurrentItemIdx,
        h = i % 2 == 1 ? "ms-alternating " : "";
    if (FHasRowHoverBehavior(c)) h += " ms-itmHoverEnabled ";
    var a = [];
    a.push('<tr class="');
    a.push(h);
    if (d.TabularView != undefined && d.TabularView == "1") {
        a.push("ms-itmhover");
        a.push('" oncontextmenu="');
        if (Flighting.VariantConfiguration.IsExpFeatureClientEnabled(249) || !DoesListUseCallout(c)) a.push("return ShowCallOutOrECBWrapper(this, event, false)");
        else a.push("return ShowCallOutOrECBWrapper(this, event, true)")
    }
    a.push('" iid="');
    var j = GenerateIID(c);
    a.push(j);
    a.push('" id="');
    a.push(j);
    a.push('" role="row">');

    function g(a) {
        IsInfiniteScrollSupported(c) && c.ListData != null && i == c.ListData.Row.length - 1 && a.push('" onfocus="scrollManager.ScrollHandler(this)')
    }
    if (d.TabularView != undefined && d.TabularView == "1") {
        a.push('<td class="ms-cellStyleNonEditable ms-vb-itmcbx ms-vb-imgFirstCell');
        g(a);
        if (ListModule.Settings.SupportsDoclibAccessibility) a.push('" tabindex="0" role="rowheader" aria-label="' + Encoding.HtmlEncode(window.ListView.Strings.L_select_deselect_item_alt) + '"><div role="checkbox" class="s4-itm-cbx s4-itm-imgCbx" tabindex="-1');
        else a.push('" tabindex="0"><div role="checkbox" class="s4-itm-cbx s4-itm-imgCbx" tabindex="-1');
        BrowserDetection.userAgent.firefox && g(a);
        ListModule.Settings.SupportsDoclibAccessibility && a.push('" aria-checked="false');
        a.push('"><span class="s4-itm-imgCbx-inner"><span class="ms-selectitem-span"><img class="ms-selectitem-icon" alt="" src="');
        a.push(GetThemedImageUrl("spcommon.png"));
        a.push('"/></span></span></div></td>')
    }
    for (var f = d ? d.Field : null, e = 0; e < f.length; e++) {
        var b = f[e];
        if (b.GroupField != null) break;
        a.push('<td role="gridcell" class="');
        e == f.length - 1 && b.CalloutMenu != "TRUE" && b.listItemMenu != "TRUE" && a.push("ms-vb-lastCell ");
        if (b.css == null) {
            b.css = GetCSSClassForFieldTd(c, b);
            if (b.CalloutMenu == "TRUE" || b.ClassInfo == "Menu" || b.listItemMenu == "TRUE") {
                b.css += '" IsECB="TRUE';
                if (b.CalloutMenu == "TRUE") b.css += '" IsCallOut="TRUE';
                if (b.ClassInfo == "Menu" || b.listItemMenu == "TRUE") b.css += '" height="100%'
            }
        }
        c.CurrentFieldSchema = b;
        a.push(b.css);
        a.push('">');
        a.push(spMgr.RenderField(c, b, k, d));
        a.push("</td>");
        c.CurrentFieldSchema = null
    }
    a.push("</tr>");
    return a.join("")
};

There is also a RenderHeaderTemplate function in oder to customize the columns headers:

RenderHeaderTemplate = function(b, e) {
    var d = b.ListSchema,
        i = b.ListData,
        a = [];
    if (e == null) e = true;
    a.push(RenderTableHeader(b));
    if (ListModule.Settings.SupportsDoclibAccessibility) {
        a.push('<thead role="presentation" id="');
        a.push("js-listviewthead-" + b.wpq);
        a.push('"><tr valign="top" role="row" class="ms-viewheadertr')
    } else {
        a.push('<thead id="');
        a.push("js-listviewthead-" + b.wpq);
        a.push('"><tr valign="top" class="ms-viewheadertr')
    }
    if (DOM.rightToLeft) a.push(" ms-vhrtl");
    else a.push(" ms-vhltr");
    a.push('">');
    if (d.TabularView != undefined && d.TabularView == "1") {
        a.push('<th class="ms-headerCellStyleIcon ms-vh-icon ms-vh-selectAllIcon" scope="col" role="columnheader">');
        RenderSelectAllCbx(b, a);
        a.push("</th>")
    }
    if (e) {
        var f = d ? d.Field : null,
            g = 1;
        for (var h in f) {
            var c = f[h];
            if (c.DisplayName == null) continue;
            if (c.GroupField != null) break;
            c.counter = g++;
            a.push(spMgr.RenderHeader(b, c));
            IsCSRReadOnlyTabularView(b) && (c.CalloutMenu == "TRUE" || c.listItemMenu == "TRUE") && a.push('<th role="presentation"></th>')
        }
    }
    d.TabularView == "1" && b.BasePermissions.ManageLists && b.ListTemplateType != 160 && a.push('<th class="ms-vh-icon" scope="col" title=""><span class="ms-addcolumn-span" role="presentation"> </span></th>');
    a.push("</tr>");
    a.push("</thead>");
    if (Flighting.VariantConfiguration.IsExpFeatureClientEnabled(146)) {
        WriteEngagementLog("SPPOP_DragAndDropAttract");
        WriteStart("SPPOP_DragAndDropAttractStart");
        if (ShouldShowDragDropAttractBox(b)) {
            a.push('<caption class="ms-dragDropAttract"><div class="ms-attractMode ms-dragDropAttract ms-hideWhenFileDrag">' + window.ListView.Strings.L_SPDragAndDropAttract + "</div></caption>");
            WriteSuccess("SPPOP_DragAndDropAttractSuccess")
        } else WriteFailure("SPPOP_DragAndDropAttractFail")
    } else if (Flighting.VariantConfiguration.IsExpFeatureClientEnabled(178)) {
        WriteEngagementLog("SPPOP_DragAndDropAttractB");
        WriteStart("SPPOP_DragAndDropAttractBStart");
        if (ShouldShowDragDropAttractBox(b)) {
            a.push('<caption class="ms-dragDropAttract"><div class="ms-metadata ms-dragDropAttract-subtle ms-hideWhenFileDrag">' + window.ListView.Strings.L_SPDragAndDropAttract + "</div></caption>");
            WriteSuccess("SPPOP_DragAndDropAttractBSuccess")
        } else WriteFailure("SPPOP_DragAndDropAttractBFail")
    } else if (Flighting.VariantConfiguration.IsExpFeatureClientEnabled(311)) WriteEngagementLog("SPPOP_NoDragAndDropAttract");
    else WriteEngagementLog("SPPOP_DragAndDropAttractUserFlightError");
    return a.join("")
};
3

You mention jQuery, but it can be done without.

SharePoint 2013 has its own subset of jQuery called mQuery

So a (rather brute) method is to replace all html inside the TH tags with its own label (from the A tag)

EnsureScriptFunc('mQuery.js', 'm$', function() {
    m$('[id^=diidSort]').forEach(function(tag){
        if(tag.tagName==='A'){
            tag.closest('TH').innerHTML=tag.text;
        }
    })
});

If you do have jQuery loaded it becomes:

$.each( $("[id^=diidSort]") , function () {
    $(this).closest('th').html(this.text);
});
  • The jquery approach, will not work on people/group approach because it doesn't create an element with id=diidsort..., so in that case you need to find the people/group field with display name and find the closest th and change the html of it, like below $("[displayname^=AssignedTo]").closest('th').html("AssignedTo") – Karthik Jaganathan Jul 17 '17 at 10:18
0

We can hide the SharePoint list filtering option just by simply using the style below in the respective page,

<style type="text/css">
.ms-headerSortArrowLink , .ms-core-menu-box{
  display: none;
}
</style>

where, .ms-headerSortArrowLink - is the arrow icon class .ms-core-menu-box - is the filter menu box class

  • Could this approach hide only specific column not all the column? – Mark L Aug 14 at 16:36
-1

you may also try:

/** disable filtering */
$("div.ms-vh-div").attr("filterdisable", "TRUE");
/** disable sorting */
$("div.ms-vh-div").attr("sortdisable", "TRUE");
$("div.ms-vh-div").attr("sortfields", "TRUE");
$.each($("div.ms-vh-div"), function () {
    $(this).html($(this).find("a").html());
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.