Click here to Skip to main content
13,591,301 members
Click here to Skip to main content
Add your own
alternative version

Tagged as


54 bookmarked
Posted 7 Jan 2010
Licenced Ms-PL

Facebook Inbox style grid using jQuery, CSS, JSON, and ASP.NET

, 7 Jan 2010
Rate this:
Please Sign up or sign in to vote.
An article on how to show records in a Facebook Inbox style grid.


This is a grid like Facebook Inbox style. This grid gives us the possibility of binding data and adding Facebook style events like removing the current row, expanding a row, and linking to another page.

The control uses the following methods:

  • Send a jQuery AJAX request to a web server to get news in JSON format
  • Create rows and columns and bind data to table rows
  • Set the control style after data binding
  • Interact with user
  • Change and set styles
  • Do jQuery effects

The grid control uses ASP.NET to gather data from a data storage (for example: database, XML file, RSS, ...), and send it to the client and bind it to a grid.

This component uses the Open Source Json.NET library to make working with JSON formatted data in .NET easier. The key features include a flexible JSON serializer for quickly converting .NET classes to JSON and back again. Read more about the Json.NET library (code, sample, and documentation) here. Read more about the jQuery Cycle plug-in here.

Using the Code

All you need to use this control is:

  • Reference the needed resources in your HTML page (.aspx page) and embed the UserControl in your .aspx page.
  • <%@ Page Language="C#" 
      AutoEventWireup="true" CodeFile="homePage.aspx.cs" 
      Inherits="_homePage" %>
    <%@ Register Src="~/FBInbox.ascx" 
      TagName="FBInbox" TagPrefix="ctrl" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    <html xmlns="">
    <head runat="server">
        <link href="facebook.css" 
          rel="stylesheet" type="text/css" />
        <script src="jquery.js" 
        <script src="jquery.cycle.all.min.js" 
        <script src="Facebook.js" 
        <script src="jquery.floatobject-1.0.js" 
    <title>Facebook Inbox</title>
        <form id="form1" runat="server">
        <img src="Images/facebook.png" />
        <ctrl:FBInbox runat="server" id="FBInbox1" />
  • Start the control by calling the JavaScript Grid2() function at the end of the control DOM. This function sends an AJAX request to the server, gets data in JSON format, and binds data to the grid control.
  • <script type="text/javascript">
        new Grid2('#Container');

Facebook Inbox Grid Functions

BindInboxRows: function() {

//public var
var myInbox;

//create Grid rows and columns 
for (var index = 0; index < this.Inbox.length; index++) { 
    this.getElement('.facebookTable').append($('<tr><td width=200>' + 
      '</td><td width=480></td><td class="closeTD" ' + 
      'width=20><div class="closeDiv">X</div></td></tr>'));
    this.getElement('.facebookTable tr:eq(' + index + ') td:first').append($(
      '<img width=50 height=50 align=middle />').attr(
    this.getElement('.facebookTable tr:eq(' + index + 
      ') td:eq(0)').append($('<span></span>').text(' '));
    this.getElement('.facebookTable tr:eq(' + index + ') td:eq(0)').append($(
      '<a id=titleLink target=_blank></a>').text(this.Inbox[index].Title));
    this.getElement('.facebookTable tr:eq(' + index + ') #titleLink').attr(
      'href', this.Inbox[index].LinkSrc);this.getElement(
      '.facebookTable tr:eq(' + index + ') td:eq(1)').append($(
      '<div class="desc"></div>').text(
      this.Inbox[index].Summary.substring(0,70) + ' ...' ));

// add click event to desc column
    $(this).animate({height: '100px'}, 500); 
    var RowIndex =$(this).parent().parent().attr('sectionRowIndex'); 

//add click event to close button

    var RowIndex = $(this).parent().parent().attr('sectionRowIndex'); 
    $(this).fadeOut('slow', function() {$(this).parent().parent('tr').remove();}); 

//add RollOver event to close button
}, function() {


BindInbox: function() {
    var that = this;

In the client, we use jQuery to call a server method, sending it an AJAX request.

//call ASP.NET page method asynchronous (send and recives data in JSON format) PageMethod:

function(fn, paramArray, successFn, errorFn) {
    var pagePath = window.location.pathname;
    var that = this;
    //Call the page method
        type: "POST",
        url: pagePath + "?Callback=" + fn,
        contentType: "application/json; charset=utf-8",
        data: paramArray,
        dataType: "json",
        //that is a reference to the object calling this callback method
         success: function(res) { successFn(res, that) },
      error: errorFn

It also needs a server side mechanism to gather data, convert it to JSON format, and send it to the client. And at the server side, we have this:

// Callback routing

public void HandleCallbacks()
    // *** We have an action try and match it to a handler
    switch (Request.Params["Callback"])
        case "fillGrid":
    Response.StatusCode = 500;
    Response.Write("Invalid Callback Method");

public void FillGrid(){

    List<GridItem> lsttst = new List<GridItem>();
    lsttst.Add(new GridItem(this.ResolveUrl("~/images/img1.jpg"), 
           "Arlen Navasartian", 
           "My name is Arlen Navasartian ,I put some useful " + 
           "codes in this site . I believe to share my knowledge with " + 
           "others because I learn from others. I want to thank " + 
           "CodeProject for this opportunity that everyone can share " + 
           "the knowledge with others."));

    lsttst.Add(new GridItem(this.ResolveUrl("~/images/img2.jpg"), 
     "Name Family2", "", 
     "This is a description about image 2 you can read more details " + 
     "about image 2 and read more news about image 2 by clicking the link"));

    lsttst.Add(new GridItem(this.ResolveUrl("~/images/img3.jpg"), 
        "Name Family3", "", 
        "This is a description about image 3 you can read more " + 
        "details about image 3 and read more news about " + 
        "image 3 by clicking the link"));

    lsttst.Add(new GridItem(this.ResolveUrl("~/images/img4.jpg"), 
        "Name Family4", "", 
        "This is a description about image 4 you can read more details " + 
        "about image 4 and read more news about image 4 by clicking the link"));

    lsttst.Add(new GridItem(this.ResolveUrl("~/images/img5.jpg"), 
     "Name Family5", "", 
     "This is a description about image 5 you can read more details about " + 
     "image 5 and read more news about image 5 by clicking the link"));

    Response.ContentType = "application/json; charset=utf-8";

The source code contains comments to illustrate more details about how this control works.


  • 8th January, 2010: Initial version.


This article, along with any associated source code and files, is licensed under The Microsoft Public License (Ms-PL)


About the Author

Arlen Navasartian
Web Developer
United States United States
No Biography provided

You may also be interested in...


Comments and Discussions

GeneralMy vote of 4 Pin
Aamir Shahzad Web Developer4-Jun-13 20:16
memberAamir Shahzad Web Developer4-Jun-13 20:16 
GeneralMy vote of 4 Pin
RusselSSC27-Jan-11 12:16
memberRusselSSC27-Jan-11 12:16 
GeneralExcellent Pin
Pranay Rana20-Dec-10 0:35
memberPranay Rana20-Dec-10 0:35 
QuestionCool stuff Pin
slimtugo16-Dec-10 6:42
memberslimtugo16-Dec-10 6:42 
QuestionSerialize object Pin
Member 55749599-Feb-10 0:37
memberMember 55749599-Feb-10 0:37 
AnswerRe: Serialize object Pin
Arlen Navasartian9-Feb-10 10:25
memberArlen Navasartian9-Feb-10 10:25 
GeneralGood Job Pin
Viresh Shah11-Jan-10 19:26
memberViresh Shah11-Jan-10 19:26 
GeneralRe: Good Job Pin
Arlen Navasartian11-Jan-10 21:09
memberArlen Navasartian11-Jan-10 21:09 
GeneralTry using templates Pin
Steven Berkovitz10-Jan-10 7:21
memberSteven Berkovitz10-Jan-10 7:21 
GeneralRe: Try using templates Pin
Arlen Navasartian10-Jan-10 9:10
memberArlen Navasartian10-Jan-10 9:10 
GeneralMy vote of 1 Pin
LeleHalfon8-Jan-10 0:52
memberLeleHalfon8-Jan-10 0:52 
GeneralRe: My vote of 1 Pin
Simon Capewell8-Jan-10 1:59
memberSimon Capewell8-Jan-10 1:59 
GeneralRe: My vote of 1 Pin
Bassam Saoud25-Jan-10 6:42
memberBassam Saoud25-Jan-10 6:42 
GeneralRe: My vote of 1 Pin
Arlen Navasartian8-Jan-10 8:00
memberArlen Navasartian8-Jan-10 8:00 
GeneralRe: My vote of 1 Pin
asdasdasd2asd13-Jan-10 23:10
memberasdasdasd2asd13-Jan-10 23:10 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web04-2016 | 2.8.180618.1 | Last Updated 8 Jan 2010
Article Copyright 2010 by Arlen Navasartian
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid