SharePoint: Hide list rows with CSR

Problem

I needed to hide certain rows on a list view on SharePoint 2013, namely all items that contained either _ or @ characters. I couldn’t use normal list view filtering as there is no “NOT CONTAINS” clause in CAML.

Solution a.k.a dirty hack

I’m not too happy with the outcome, but I just couldn’t figure out how to override item rendering and only render item row if Title of the item didn’t contain the characters in question. What I ended up doing was using Client Side Rendering together with jQuery and postRenderHandler to remove the TR rows from DOM.

I didn’t want to customize the XSLT of the XsltListViewWebPart and use a simple XSL:IF to filter out the items because as soon as I customized the XSLT in SharePoint Designer, the UI of the list reverted to SP2010 look and feel. I really wanted to maintain the SP2013 look.

Oh, and the code, put it into a file, and reference it from JSLink on your list view web part:

var MiPortalViews = MiPortalViews || {};

(function () {
  var MiPortalOverrides = {};
  MiPortalOverrides.Templates = {};

  MiPortalOverrides.OnPostRender = [];
  MiPortalOverrides.OnPostRender.push(postRenderHandler);

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

function postRenderHandler()
{
    j("a:contains(_):contains(@)").closest("tr").remove(); 
}