Showing posts with label SharePoint infinite scroll display template. Show all posts
Showing posts with label SharePoint infinite scroll display template. Show all posts

Wednesday, 30 April 2014

SharePoint infinite scroll display template

SharePoint infinite scroll display template
Open Control Template
When you add post render, you can hide _#= ctx.RenderGroups(ctx) =#_
Now how to add post render
AddPostRenderCallback(ctx, function()
{
});
Or
$addRenderContextCallback(ctx, "OnPostRender", function () {
myCustomjsfunction(ctx);
});
function myCustomjsfunction(ctx){
/* Try to get the visible div and create if if nesessary. */
var visibleOutPut=document.getElementById('cbs.VisibleOutput');
if($isNull(visibleOutPut)){
//Create the visible div.
visibleOutPut=document.createElement("ul");
visibleOutPut.setAttribute("id", "cbs-VisibleOutPut");
visibleOutPut.className="cbs-List";
$('#Hidden').patent().parent().prepend(visibleOutput);
}
/* Copy all of the LIs in hiddenOutPut tp visibleOutPut. */
var hiddenOutPut=$('#Hidden');
var items=hiddenOutPut.children('li');
items.each(function(i){
visibleOutPut.appendChild(items[i].cloneNode(true));
});
/* Register for the scrolling event */
$('#s4-workspace').scoll(function() {
//Check if we're at the bottom of the page.
var scrollPostion=$('#s4-workspace').scrollTop() + $('#s4-workspace').height();
if(scrollPosition >= $('#s4-bodyContainer')height()){
/* This is where the magic happens */
//get paginginfo from the search context.
var paginfInfo= ctx.ClientControl.get_pagingInfo();
var lastPage=pagingInfo[pagingInfo.length - 1];
//if lastPage = -2, there are more search results..
var hasNextpage=lastPage.pageNumber==-2;
if(hasNextPage){
//if there are more items..
ctx.ClientControl.page(lastPage.startItem);
}
};
Go through below video from 45min onwards..
http://channel9.msdn.com/Events/SharePoint-Conference/2012/SPC246