5

I have a list view, containing GUIDs, where I want to filter out some items depending on the result of a REST call made in the onPreRender function in my JSLink. The REST call fetches GUIDs from another list, and if they match the ones in my current list I want to render and display the items. But if they don't, I don't want the item to show at all, it should be removed. Is this possible?

I tried manipulating the ContextInfo and removing the items I didn't want, but that resulted in errors, to no surprise.

So what I want is to remove entire rows from the list view, not just values in a specific field.

12

Option 1. How to remove row in List View

The following example demonstrates how to delete rows via client side rendering

(function () {


   function listPreRender(renderCtx) {

         var excludeRows = [0,2,3];  //row idexes to be excluded

         var rows = renderCtx.ListData.Row; //get current rows
         for(var i = excludeRows.length - 1; i >= 0; i--) {
            var rowIdx = excludeRows[i];  //get row index to exclude 
            rows.splice(rowIdx, 1);  //delete List View Row
            renderCtx.ListData.LastRow = rows.length;  //update ListData.LastRow property
         }        
   }


    function registerListRenderer()
    {
       var context = {};
       context.Templates = {};
       context.OnPreRender = listPreRender;

       SPClientTemplates.TemplateManager.RegisterTemplateOverrides(context);
    } 
    ExecuteOrDelayUntilScriptLoaded(registerListRenderer, 'clienttemplates.js');

})();

Option 2. How to hide row in List View

(function () {

   var excludeRows = [0,2,3];

    function renderListItemTemplate(renderCtx) {
        if(excludeRows.indexOf(renderCtx.CurrentItemIdx) > -1)
        {
           return ''; //do not render row
        }
        return RenderItemTemplate(renderCtx); 
    }


    function registerListRenderer()
    {
       var context = {};
       context.Templates = {};
       context.Templates.Item = renderListItemTemplate;

       SPClientTemplates.TemplateManager.RegisterTemplateOverrides(context);
    } 
    ExecuteOrDelayUntilScriptLoaded(registerListRenderer, 'clienttemplates.js');

})();

Results

Original List View

enter image description here

After enter image description here

  • 1
    I tried option number two and i works perfectly! Thank you so much! – stinaq Feb 25 '14 at 8:03
  • I'm glad it helped :) – Vadim Gremyachev Feb 25 '14 at 8:15
  • 1
    @Vladim: I tried both solutions with some modifications (I have some conditions on how to remove items). It works good so far - but I noticed the paging count is not updated correctly. i.e. I have 7 items left and a page count of 30 - but the paging is displayed with 1-6 and 31-7? What update needs to be done? – fuetty Jan 31 '17 at 11:22
  • how to correct the paging.? – Karthik Jaganathan Jul 14 '17 at 12:50
-3

You need to add an IF statement in your rendering function. Something like:

function CustomItem(ctx) {
 var ret = '';
 if ($.inArray(ctx.CurrentItem.GUID, ArrayOfGUIDs) != -1) {
  ret = '<div>' + ctx.CurrentItem.Title + '</div>';
 }
 return ret;
}

In this example I have used a jQuery function to see if the GUID exists but if you do not have jQuery then use an alternative comparison.

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