RSS

Tag Archives: javascript

Advance paging in SharePoint 2010 using Client Object Model and jQuery


In this tutorial I will show you new way of creating custom paging that work with SharePoint 2010 or SharePoint 2013 by using Cleint Object Model and jQuery.

Demo

Description

This demo is using custom paging approach but I’m injecting data on same page instead of navigating between pages by using jQuery.

Note: This code should work not only on lists but it can work with any different data source like document library ,Image Library and so on

Advantages

The are many advantages of this Advance Custom paging as follow

  • Work great with large lists because you do not need to navigate between pages.
  • It’s javascript which means is cleint side ,so need for post back each unlike standard custom paging.
  • Clean HTML tags because I’m using Table- less table by using DIV tag

Prerequisites

To run this code properly you need the following

  • Create Custom List and name it “Products”
  • Create New Cloumn in Products list and name it Company,so you have now two column Title and Company
  • Try to fill Products list with some data
  • How it work

    The idea is sample ,you just need to work with SharePoint Client Object Model but the most important thing to note is ListItemCollectionPosition and row limit as well.

     <script>
    var listItems;
    var query;
    var targetList;
    var clientContext;
    
    function LoadData() {
    
    $('#divPostsLoader').html('<img src="../../../_layouts/Images/AdvancePaging/ajax-loader.gif">');
    clientContext = new SP.ClientContext();
    targetList = clientContext.get_web().get_lists().getByTitle('Products');
    query = new SP.CamlQuery();
    var RowCount = 3;
    //Specifying the RowLimit will determine how many items will be fetched in one call to the server.
    query.set_viewXml("<View><RowLimit>"+RowCount+"</RowLimit></View>");
    listItems = targetList.getItems(query);
    clientContext.load(listItems);
    clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
    }
    
    function onQuerySucceeded() {
    
    var title, company;
    var listEnumerator = listItems.getEnumerator();
    //Create Header
    $("#Result").append("<div class='div-table-row'><div class='div-table-col'>Title</div><div class='div-table-col'>Name</div>");
    $("#divPostsLoader").empty();
    while (listEnumerator.moveNext()) {
    title = listEnumerator.get_current().get_item("Title");
    company = listEnumerator.get_current().get_item("Company");
    //Create tableless using DIV
    $('#Result').append("<div class='div-table-row'>");
    $('#Result').append("<div class='div-table-col'>" + title + "</div><div class='div-table-col'>" + company + "</div>");
    $('#Result').append("</div>");
    }
    }
    
    function onQueryFailed(sender, args) {
    alert('Request failed. \nError: ' + args.get_message() + '\nStackTrace: ' + args.get_stackTrace());
    }
    
    //Call the function after the sp.js is loaded.
    ExecuteOrDelayUntilScriptLoaded(LoadData, "sp.js");
    function loadMoreData() {
    $('#divPostsLoader').html('<img src="../../../_layouts/Images/AdvancePaging/ajax-loader.gif">');
    
    //Gets the id of the last element from the returned collection along with the query.
    var position = listItems.get_listItemCollectionPosition();
    
    if (position != null) {
    $("#LoadBtn").attr("disabled", "disabled");
    query.set_listItemCollectionPosition(position);
    listItems = targetList.getItems(query);
    clientContext.load(listItems);
    //Call the other function to load  data from list
    clientContext.executeQueryAsync(Function.createDelegate(this, this.onLoadQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
    }
    else {
    $('#divPostsLoader').empty();
    $("#LoadBtn").attr("value", "No more data found");
    $("#LoadBtn").attr("disabled", "disabled");
    }
    }
    function onLoadQuerySucceeded() {
    var title, company;
    var listEnumerator = listItems.getEnumerator();
    while (listEnumerator.moveNext()) {
    title = listEnumerator.get_current().get_item("Title");
    company = listEnumerator.get_current().get_item("Company");
    $("#divPostsLoader").empty();
    //Create tableless using DIV
    $('#Result').append("<div class='div-table-row'>");
    $('#Result').append("<div class='div-table-col'>" + title + "</div><div class='div-table-col'>" + company + "</div>");
    $('#Result').append("</div>");
    }
    $("#LoadBtn").removeAttr("disabled");
    
    }
    
    </script>
    

    as you can see you need to specify the row list (3,4,..etc) then loading data.After that when you click the button it will return next rows and so on until position equal null.

    Source Code

    The Source code of this article can be found on the following link

    http://code.msdn.microsoft.com/Advance-paging-in-81934f2b

Advertisements
 
1 Comment

Posted by on September 29, 2012 in jquery, SharePoint

 

Tags: , , , , , , , ,

Infinite Scroll images Like Bing and Google


Introduction

One of the must annoying thing when working with large data is how to loading this data to your page?

The common solution is paging but paging itself will not help too much you can end with hundred or thousands of page numbers.So new solution now is on the surface and it’s called “Infinite Scroll”.Infinite Scroll allow you to load chunk of data when you scroll down of the page and inject it inside the page, it will load data each time you scrolling down on the page.

Note:Before you start you can download code from here ( Please do not forget to rate it)

Infinite Scroll images Like Bing and Google

Demo

(Click on the image to see the result)

IScroll

Description

As I told you in the introduction Infinite Scroll is becoming more and more popular it’s in everywhere starting with Bing,Google,Facebook,Twitter,Linkedin.etc.

The idea of infinite scrolling is so simple and it can be summarized in the following diagram which is part of Scott Hanselmen Article

Infinite Scroll WebSites via AutoPagerize – Hacky, but the beginning of something cool

My Sample will show you how to Display a list of images like Bing and Google but this is not the only thing,you can take the advantage of idea behind infinite scrolling and implement the same concept everywhere.

The following code snippet will be called when you scroll to the last of the page

[WebMethod]
public static string LoadImages(int Skip, int Take)
{
System.Threading.Thread.Sleep(2000);
StringBuilder GetImages = new StringBuilder();
string Imagespath = HttpContext.Current.Server.MapPath("~/Images/");
string SitePath = HttpContext.Current.Server.MapPath("~");
var Files = (from file in Directory.GetFiles(Imagespath) select new { image = file.Replace(SitePath, "") }).Skip(Skip).Take(Take);
foreach (var file in Files)
{
var imageSrc = file.image.Replace("\\","/").Substring(1); //Remove First '/' from image path
GetImages.AppendFormat("<a>");
GetImages.AppendFormat("<li>");
GetImages.AppendFormat(string.Format("<img src='{0}'>", imageSrc));
GetImages.AppendFormat("</li>");
GetImages.AppendFormat("</a>");

}
return GetImages.ToString();
}

VB.Net part

<WebMethod()> _
Public Shared Function LoadImages(Skip As Integer, Take As Integer) As String
System.Threading.Thread.Sleep(2000)
Dim GetImages As New StringBuilder()
Dim Imagespath As String = HttpContext.Current.Server.MapPath("~/Images/")
Dim SitePath As String = HttpContext.Current.Server.MapPath("~")
Dim Files = (From file In Directory.GetFiles(Imagespath) Select New With { _
Key .image = file.Replace(SitePath, "") _
}).Skip(Skip).Take(Take)
For Each file As Object In Files

Dim imageSrc = file.image.Replace("\", "/").Substring(1) 'Remove First '/' from image path
GetImages.AppendFormat("<a>")
GetImages.AppendFormat("<li>")
GetImages.AppendFormat(String.Format("<img src='{0}'/>", imageSrc))
GetImages.AppendFormat("</li>")
GetImages.AppendFormat("</a>")
Next
Return GetImages.ToString()
End Function

JavaScript part

$(document).ready(function () {
var Skip = 49; //Number of skipped row
var Take = 14; //
function Load(Skip, Take) {
$('#divPostsLoader').html('&lt;img src="ProgressBar/ajax-loader.gif"&gt;');

//send a query to server side to present new content
$.ajax({
type: "POST",
url: "Grid.aspx/LoadImages",
data: "{ Skip:" + Skip + ", Take:" + Take + " }",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {

if (data != "") {
$('.thumb').append(data.d);
}
$('#divPostsLoader').empty();
}

})
};
//Larger thumbnail preview

//When scroll down, the scroller is at the bottom and fire the Load ()function
$(window).scroll(function () {

if ($(window).scrollTop() == $(document).height() - $(window).height()) {
Load(Skip, Take);

//Any number you want
Skip = Skip + 14;
}
});
})

Summery :

Infinite scroll is every where now ,this sample show give good starting point.It’s not only loading images you can load any thing you want start from images,text data and even load pages inside the page.

I hopefully you like the sample and really appreciate your comments and feedback
.

Regards.

 
2 Comments

Posted by on February 26, 2012 in ASP.NET, C#, jquery, VB.NET

 

Tags: , , , , , , , , ,