The List View Web Part has great capability for filtering displayed data using the web parts header controls..
As an example, what I want to build is a UI which allows me to filter a LVWP using Year and Month controls shown below..
So when I click on a Year, the LVWP is filtered by that year..
And likewise for the Month..you get the picture
In the screenshots above, the columns I’m filtering by are present in the view, but they don’t have to be I’ve only shown them there for demonstration purposes.
This can be done in both 2010 and 2013, though the code is different; in 2013 we call the RefreshPaging function and in 2010 we call the page postback function __doPostBack using the control id of the LVWP with correctly formed event arguments – if you’ve ever done any work with the SPGridView control this will sound familiar.
In my implementation I’m using Knockout to manage the filter UI and subscriptions to the Knockout Year/Month observables to perform the actual filtering.
Looking into the implementation the code in
pd.FilterLibraryViewModel is just the knockout viewmodel, the code in
pd.FilterLibraryApp is whats sets things up and performs the filtering.
locateListView function ensures that the
inplview.js file is loaded (via SOD) and calls
InitAllClvps(). It then looks through the list of
ContextInfo objects looking for the one for our list view web part. It then performs some object mangling to get things right for the filtering to work – you’ll have to delve deep into
inplview.js to see why, but this is just what SharePoint requires.
Having got everything setup, when clicking on a Year or Month the
onFilterChange function is called in response to a change in the viewmodel observables, this works out the filter url required based on the viewmodel observable state and calls the
(inplview.js) function – the list view web part then gets filtered in place without requiring a post back.
Views with Person/Group Columns
For some reason I’ve yet to fathom, when you include an Person/Group column in the view, in-place filtering does not work and a full page postback occurs.
Although not the subject of this post, the sample code included here also includes a text box which filters the table rows of the list view web part, but only the rows currently displayed.
How to Use.
Simply drop a list view web part on to a page and configure the view as you’d like it, then drop a content editor web part onto the page and configure it to point to the HTML file – which includes the script and CSS files.
Links to Resources