Custom Filter in JSLink

Question

I have added a List View webpart in a page and attached a JSLink to it.The list contains 6000 items but I was able to handle it with pagination in JSLink. I want to create custom filter with checkboxes.On selection of each checkbox,I want to filter the List that is to repopulate the JSLink on each click on checkbox. Mutli select should work. 

Here is my full code of JSLink

window.BlogArchive = window.BlogArchive || {};
window.BlogArchive.Post = {
    customItemHtml: function (ctx) {
  var articleItemHtml ="<tbody><tr><td>" + ctx.CurrentItem.Title + "</td>";
  articleItemHtml +="<td>"+ ctx.CurrentItem.CompanyDescription +"</td>";
  articleItemHtml +="<td>"+ GetLookupValues(ctx.CurrentItem.Sectors, "lookupValue") +"</td>";
        return articleItemHtml;
    },
    pagingControl: function (ctx) {
        var firstRow = ctx.ListData.FirstRow;
        var lastRow = ctx.ListData.LastRow;
        var prev = ctx.ListData.PrevHref;
        var next = ctx.ListData.NextHref;
        var html = "</tbody></table></div><div class='Paging'>";
        html += prev ? "<a class='ms-commandLink ms-promlink-button ms-promlink-button-enabled btn btn-default' href='" + prev + "'><span class='ms-promlink-button-image'><img class='ms-promlink-button-left' src='/_layouts/15/images/spcommon.png?rev=23' /></span></a>" : "";
        html += "<span class='ms-paging'><span class='First'>" + firstRow + "</span> - <span class='Last'>" + lastRow + "</span></span>";
        html += next ? "<a class='ms-commandLink ms-promlink-button ms-promlink-button-enabled btn btn-default' href='" + next + "'><span class='ms-promlink-button-image'><img class='ms-promlink-button-right' src='/_layouts/15/images/spcommon.png?rev=23'/></span></a>" : "";
        html += "</div>";
        return html;
    },

};
function GetLookupValues(inputArry, originalColumnName)   
{  
    var retHtml = "";  
    if (inputArry != null)   
    {  
        for (var loopcnt = 0; loopcnt < inputArry.length; loopcnt++) {  
            if (typeof(inputArry[loopcnt][originalColumnName]) != 'undefined' && inputArry[loopcnt][originalColumnName] != null) {  
                retHtml += inputArry[loopcnt][originalColumnName];  
            }  
        }  
    }  
    return retHtml;  
}  
// anonymous self-executing function to setup JSLink templates on page load..
(function () {
    var overrideCtx = {};
    overrideCtx.Templates = {};


    //Tempate overrides
    overrideCtx.Templates.Header = "<script type='text/javascript' src='/mysites/SiteAssets/js/bootstrap.min.js'></script><link rel='stylesheet' href='/mysites/SiteAssets/css/bootstrap.min.css'><h1>Companies</h1><div class='table-responsive'><table class='table table-hover'><thead><th> Title </th><th> Company Description </th><th> Sectors </th></thead>";
    overrideCtx.Templates.Item = window.BlogArchive.Post.customItemHtml;
    overrideCtx.Templates.Footer = window.BlogArchive.Post.pagingControl;


    //BaseViewID = 1 means default View
    overrideCtx.BaseViewID = 1;
    overrideCtx.ListTemplateType = 100;

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

Please suggest me a solution.Thank you in Advance

Answer 1

Hi Akhil,

You could use Choice Filter web part to connect to the List View Webpart and do the filter.

This link might help you 

https://www.youtube.com/watch?v=QX1canjoM0w

But if you want to introduce custom filter with only "check box", you could follow the below url to do that

https://support.office.com/en-us/article/Use-the-HTML-Form-Web-Part-to-filter-and-display-data-in-another-Web-Part-860b681c-38ad-43ff-a036-a60868497ff7

Another Option  :  you could use Jquery to do a customized simple text search

http://www.bentedder.com/create-a-jquery-sharepoint-instant-searchfilter/

Hope these options helps.

---

Sivabalan

Answer 2

Hi Akhil,

In SharePoint, there is a way to filter a list view is doing customization on the query string, it supports multiple fields filtering:

http://techtrainingnotes.blogspot.jp/2012/03/sharepoint-search-filter-or-sort-lists.html

http://sharepointificate.blogspot.jp/2012/12/filtering-listviews-with-url-query.html

Thus, a suggestion is that, you can set the logic of the filtering controls in the JSLink, redirect to the URL with different query string dynamically to filter the list view eventually.

Please let me know if there is still any question about it.

Best regards,

Patrick

---

TechNet Community Support
Please remember to mark the replies as answers if they help, and unmark the answers if they provide no help. If you have feedback for TechNet Support, contact [e-mail].