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