With Great Power comes Great Response.write("Ability") : Prototype

Customizing Serialization of Entities in the ADO.NET Data Services Client Library

PhaniRajuYN — Fri, 12 Dec 2008 02:06:00 GMT

This post is inspired by this forum thread :Data services client -- exception on saveChanges

Problem Statement

I have added some custom proeprties to the Entity Types Generated by DataSvcUtil.exe /Add Service Reference / Hand Coded ,
these properties do not exist on the server and should not be sent to the server .
When I try to save an object of a Type which has custom client-Side only properties to the Data Service using AddObject and SaveChanges,
I get the following error :

Error processing request stream. The property name '{PropertyName}' specified for type '{TypeName} is not valid

This error is basically from the server telling the client library that its sending a payload which does not seem to match the definition
of the Entity Type on the server.

We can solve this problem by customizing the Payload that the client generates when it sends the entity to the server.
The DataServiceContext exposes an event called WritingEntity that is fired right before we send the payload over the wire.

Its argumentlist contains ReadingWritingEntityEventArgs which gives you access to the Entity Instance being Serialized ( e.Entity )
and the ATOM Payload (e.Data ) we are about to send to the Server.

Removing a property from the ATOM Payload that is being sent to the server.

void dataContext_WritingEntity(object sender, ReadingWritingEntityEventArgs e) {

    // e.Data gives you the XElement for the Serialization of the Entity 
    //Using XLinq  , you can  add/Remove properties to the element Payload  
    XName xnEntityProperties = XName.Get("properties", e.Data.GetNamespaceOfPrefix("m").NamespaceName);
    XElement xePayload = e.Data.Descendants().Where<XElement>(xe => xe.Name == xnEntityProperties).First<XElement>();
   //The XName of the property we are going to remove from the payload
    XName xnProperty = XName.Get(“{PropertyName}”, e.Data.GetNamespaceOfPrefix("d").NamespaceName);

    //Get the Property of the entity  you don't want sent to the server
    XElement xeRemoveThisProperty = xePayload.Descendants().Where<XElement>(xe => xe.Name == xnProperty).First<XElement>();
    //Remove this property from the Payload sent to the server 
     xeRemoveThisProperty.Remove();

     }
}

Generalizing this further , we want to make it easier to customize the serialization of multiple entity types without having to write
multiple copies of the WritingEntity event handler.
We will add an attribute that specfies that a certain CLR property should not be serialized in the ATOM Payload when the client library
sends the entity to the server.

    /// <summary>
    /// Properties marked with this Attribute are not serialized in the payload when sent to the server
    /// </summary>
    [AttributeUsage(AttributeTargets.Property)]
    public class DoNotSerializeAttribute : Attribute
    {
    }

Now , we change the WritingEntity Event handler to remove any property that has this attribute on it .

        void DataServiceContextEx_WritingEntity(object sender, ReadingWritingEntityEventArgs e)
        {
            // e.Data gives you the XElement for the Serialization of the Entity 
            //Using XLinq  , you can  add/Remove properties to the element Payload  
            XName xnEntityProperties = XName.Get("properties", e.Data.GetNamespaceOfPrefix("m").NamespaceName);
            XElement xePayload = null;
            foreach (PropertyInfo property in e.Entity.GetType().GetProperties())
            {
                object[] doNotSerializeAttributes = property.GetCustomAttributes(typeof(DoNotSerializeAttribute), false);
                if (doNotSerializeAttributes.Length > 0)
                {
                    if (xePayload == null)
                    {
                        xePayload = e.Data.Descendants().Where<XElement>(xe => xe.Name == xnEntityProperties).First<XElement>();
                    }
                    //The XName of the property we are going to remove from the payload
                    XName xnProperty = XName.Get(property.Name, e.Data.GetNamespaceOfPrefix("d").NamespaceName);
                    //Get the Property of the entity  you don't want sent to the server
                    XElement xeRemoveThisProperty = xePayload.Descendants().Where<XElement>(xe => xe.Name == xnProperty).First<XElement>();
                    //Remove this property from the Payload sent to the server 
                    xeRemoveThisProperty.Remove();
                }
            }
        }

We can encapsulate this functionality into its own class and any DataServiceContext type that inherits from this class should be able to
inherit this functionality too .
Complete Source Code :

Using this in your applications :

Create a partial class with the same name as shown above and include it in your application to get this behavior.

Attribute your types with the DoNotSerializeAttribute attribute so that this property is not serialized.

 public class TestType
    {
        public int ID { get; set; }
        /// <summary>
        /// This Property is client-only , should not be sent to the server
        /// </summary>
        [DoNotSerialize]
        public string ClientOnlyProperty { get; set; }
    }

Accessing Cross-Domain ADO.NET Data Services from the Silverlight Client Library

PhaniRajuYN — Tue, 21 Oct 2008 05:36:00 GMT

When we built the client library for Silverlight in Silverlight 2.0 , the underlying Network Stack provided by Silverlight core libraries
was very limited in terms of the Status Codes and Request Verbs that it supported.Our options were :
a) Use the System.Net libraries provided by the agClr and give a limited subset of the functionality available on the desktop.
b) Cook up our own Network stack and provide all the functionality provided on the desktop , in Silverlight.

We went with Option (b) and built a network stack that uses the browser’s underlying XmlHttpRequest object.
This means that the cross domain access available in Silverlight networking stack is not available in our networking stack.

Forums user Ben Hayat asked a question about the guidelines for Cross-Domain access using our Silverlight Client Library .

Now , this is not supported out of the box . But ,you can use the same solution as you would for an Ajax application ,
which is building a server-side proxy that talks to the remote service and is completely transparent to the client library.

Below is a sample Server-Side proxy that would help one talk to Data Services hosted on a different domain than the Silverlight application.

There are a couple of issues that a Server-Side proxy needs to solve for an ADO.NET Data Service ,
a) Appear totally transparent
b) Resolve Identities of resources to appear as they would from the Proxy service and not the original Data Service.

Issue a) is easy , Issue b) is a little more involved.

When the client library receives a Payload back as part of a query ,we construct the entity’s identity based on the following rules,
ex: If you browse to http://ServiceEndpoint/Northwind.svc/Customers('ALFKI') ,the response looks like this :

 <entry xml:base="http://ServiceEndpointNorthwind.svc/" 
       xmlns:d="http://schemas.microsoft.com/ado/2007/08/dataservices" 
       xmlns:m="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata" 
       xmlns="http://www.w3.org/2005/Atom">
<link rel="edit" title="Customers" href="Customers('ALFKI')" /> 
<id>http://ServiceEndpointNorthwind.svc/Customers('ALFKI')</id> 
    <content type="application/xml">
    <m:properties>
     Properties go here 
    </m:properties>
    </content>
</entry>

When we get the above payload back as a response , we create a Customer object and its identity is the value of the <id> field in the payload.
When you make any edits to this Customer object, the edits are sent to the URI specified in the <link rel=”edit”> value of the payload.
Which means that the proxy server has to modify the payload it recieves from the real Data Service to make sure that all links , Id and Edit
point to the proxy Data Service and not the real Data Service. The easiest way to do this is to do a String.Replace replacing all occurrences of the
the original Service end point with the Proxy Service end point in the payload.

Without further stalling , here is the Proxy Handler.

A couple of words of caution so that I can keep my job,

This is only a sample implementation of what a proxy could look like.
Do NOT use this in your production applications.
This is NOT an official solution provided by the ADO.NET Data Services team ,
this is just me illustrating how to write a proxy.
If you download this sample , it means that you understand these rules .
For any problems with this sample , leave a comment on my blog ,
the ADO.NET Data Services Forums is NOT the right place for any issues with this proxy.

Running the sample

Download the sources from the link above.
Open the solution in Visual Studio 2008 and hit F5.
You should see the Silverlight application come up and
get the data from the Data Service hosted in a different application.

The Cross Domain Proxy is a generic AShx handler which receives the requests from the Client library and forwards them onto the
original Data Service , gets the response , changes the ID and Edit Links and returns the response to the Silverlight Client .

Client Sends request to Proxy Handler
Proxy Handler sends the request data to the Original Data Service
Data Service responds with response
Proxy handler reads response and changes the ID and EDIT links in the payload
In case of POST , the Proxy Handler changes the response “Location” Header
so that the identity points to the Proxy Handler and not the Data Service.
Proxy handler returns the response data to the client .

How do I use this in my application ?

The source available for download contains “CrossDomainHandlerBase” which is the class that contains the functionality required
for recieving requests from clients and forwarding the requests onto the Data Service.

Setting up the Server-Side Proxy

Add a Generic ASHX Handler to the application that contains the Web page hosting the Silverlight application ,
1. Right-Click on Project
2. Add –> New Item –> Generic Handler

2. This will create a Generic Handler which implements IHttpHandler.

3. Remove the code stubs for IHttpHandler methods and properties .
4. Replace IHttpHandler with “CrossDomainHandlerBase”.

    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    public class CrossDomainHandler : CrossDomainHandlerBase
    {
        public CrossDomainHandler()
            : base()
        {
            this.DataServiceURI = "URI FOR THE DATA SERVICE";
            this.ProxyServiceURI = "URI FOR THE PROXY SERVICE";
        }
     }

4.From this point on , for all purposes , the Proxy Handler service IS the Data Service

Setting up the Silverlight application for Cross-Domain access

Right-Click on “References” in the Project
Select "Add Service Reference"
In the “Address” field , enter the URI for the proxy service ,
In case of the sample solution provided, the Provider is called “DataProvider”, hence
the code-gen produces the code with a type “DataProvider” derived from DataServiceContext.

When you instantiate the Context in the Silverlight application , always specify the Base URI
as the Proxy Handler’s URI,

DataProvider dataProvider = new DataProvider(
                new Uri("RELATIVE URI FOR THE PROXY SERVICE", 
                            UriKind.RelativeOrAbsolute)
                  );

This is the most important step of all , Party on !!

To do in the near future :

Convert the Handler to be an IHttpAsyncHandler so that we dont block on waiting for the response from the Data Service
Provide better mechanisms for Identity Resolution other than String.Replace .
Write a better demo app than something which binds all the parts of my name to a Grid.
Your suggestion goes here .

GridViewFilterExtender : Filter GridView Rows Client-Side

PhaniRajuYN — Sat, 27 Oct 2007 14:30:38 GMT

Download Source Code and Sample application :

Excel's Filter Dialog My GridView Filter Extender

The above Screen Shots look promising , don't they ?
So, How would one go about building such a control ? Well, I have it laid out in front of you .

1) Find all unique Strings in the same column
2) Build a lookup table that stores the Unique string and the row Indices for the rows that contain the Unique String
3) Once user builds a Filter Expression and clicks on "Ok" , Filter the Rows in the Table based on the Expression.
4) For Now , the Filter Expression can only be a sequence of strings that the user wants to see in the grid.

Ex : If your grid looks like this :

The filter expression would be a comma-separated string that contains the unique strings to match in the rows.

var _currentRowFilter = "Ajax,Moo"

The lookup Table would look like this :

_lookupTable
        Select All    "1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23"    
        Ajax    "1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16"    
        Moo    "17,18,19,20,21,22,23"    

so , if we want to filter the rows , we would need to :

1) Hide all Rows to begin with .
HideRows : this.lookupTable["Select All"]

2) Show only those rows that are found in the lookup table against the filter Terms.
ShowRows :this.lookupTable["Ajax"]

That's about the algorithm / design for the extender to work .
Getting this working is another matter altogether.
Once you have understood this , lets start:

Find all unique Strings in the same column :

once you find all the unique strings in all subsequent rows for the same column , we will need to build the checkbox list that
will allows the user to select the filter Terms. I.e this :

This is a bit tricky , the way one would go about doing this would be :

Find out which Column the Extender is added in .Find the Cell Index of the Column , lets say _cellIndex
For all subsequent rows in the table, Lookup the innerText of the Cell with CellIndex cellIndex.

                  For Each Row
                    Read the innerText of the Cell at CellIndex cellIndex.
                    IF the string read is not yet present in the lookup Table then
                    BEGIN
                         add it to the lookup Table along with the rowIndex of the current Row
                    END
                   ELSE if string is already present in the lookupTable then

                    Begin
                       add the RowIndex to the lookupTable[string] location.
                   END IF

Once you have found all the Unique Strings , build the CheckBoxList and attach the appropriate handlers .

Once user builds a Filter Expression and clicks on "Ok" , Filter the Rows in the Table based on the Expression.

Hide All Rows .
Get all the Rows in the Table other than the header and the footer , _rowsInTable.
Get the Current Search Filter by adding all the strings that are checked in the CheckBoxList.
For each term in the Search Filter , get the appropriate row Indices ,
For each row Index in the Row Indices, _rowIndex
assign the cssClass _inFilterCssClass to the _rowsInTable[_rowIndex].

This is all neat , what if I have multiple columns in my GridView and I want to filter
each succeeding Column depending on the previous Column?

Well, I have thought about that too ..
This is what we would do :
Every FilterExtender (a) can have a Dependent Filter (b) , if filter (b) is used to filter data ( it raises the itemFiltered Event ),
then the Filter (a) has to rebuild its index to remove any index text
that was removed as a result of the filter expression on filter (b).

Important Note about the DependentFilterID

If a FilterExtender (a) has a FilterExtender (b) as its Dependent Filter ID , they both should have the matching values for the
InFilterCssClass and the NotInFilterCssClass attributes.

Set DependentFilterID

In markup

<Raj:GridViewFilterExtender  DependentFilterId="optionListPnl"

JavaScript

$find(<filterBehaviorID>).set_dependentFilterId(<dependentFilterId>)

Attributes :

Name	Description
TargetControlID	ID of the control upon clicking on which , the Filter is shown
OkButtonId	ID of the control upon clicking on which , the FilterExpression is applied and the filter is hidden
CancelButtonId	ID of the control upon clicking on which , the FilterExpression is NOT applied and the filter is hidden
EnableSelectAll	If the filter contains an option to "Select All" Rows
InFilterCssClass	The CssClass applied to all rows which are available from the Filter Expression.
NotInFilterCssClass	The CssClass applied to all rows which are NOT available from the Filter Expression.
FilterPanelID	The Panel Control which contains the Filter

Events :

Name	Description
itemSelected	When any filter Expression is Selected
itemFiltered	When the filter Expression is applied.
onOk	when the Control Referenced by OkButtonId is clicked
onCancel	when the Control Referenced by CancelButtonId is clicked

Subscribing to the Events :

a) Markup :

<Raj:OptionPickerBehavior runat="server" ID="optionListPnl" TargetControlID="btnToggle"
         blah blah blah
         OnOkScript="okClickHandler"
         OnCancelScript ="cancelClickHandler"
         OnClientItemFiltered ="itemFilteredHandler"
         OnClientItemSelected ="itemSelectedHandler">
</Raj:OptionPickerBehavior>

<script language="javascript" type="text/javascript">
            function itemSelectedHandler(element,args)  {
                Sys.Debug.trace( args.get_text() + "   " + args.get_isChecked());
            }
            function itemFilteredHandler(element,args)  {
                Sys.Debug.trace( args.get_item() + "   " + args.get_filterText());
            }
            function okClickHandler(element,args)  {
                Sys.Debug.trace( "Ok Button was clicked" );
            }
             function cancelClickHandler(element,args)  {
                Sys.Debug.trace( "Cancel Button was clicked");
            }
            function traceCall(msg) {
                $get("traceDiv").appendChild(document.createTextNode(msg)); 
            }
 </script>

b) Script

$find("BehaviorId").add_onOk( okClickHandler );

$find("BehaviorId").add_onCancel( cancelClickHandler );

$find("BehaviorId").add_itemFiltered( itemFilteredHandler );

$find("BehaviorId").add_itemSelected( itemSelectedHandler );

That's it for now ! Do give feedback on the control if you get a chance to use it / look at it .

Extending the PhotoGrid to allow Xml DataBinding using JavaScript Enumerations

PhaniRajuYN — Sat, 03 Feb 2007 23:04:06 GMT

If you remember one of my previous posts about the PhotoGrid Control , we talked about the control binding to JSON data .

Today , we talk about using Enumerations in Javascript to allow the PhotoGrid to bind to multiple Data Source Types.

Well, lets get going then....

Constructing the Enumeration

/**** Enumeration to specify the Data Source Type**********/

1) The Constructor for the Enumeration

AtlasDemo.DataSourceType = function(){};

2) Define the different Types of data that can be bound using the Prototype Model .

AtlasDemo.DataSourceType.prototype =
{
    JSON : 0,
    XMLString : 1
}

3) Register the Enumeration using the "registerEnum" function of the ASP.net AJAX framework.

AtlasDemo.DataSourceType.registerEnum("AtlasDemo.DataSourceType");

Modify the  BindGrid Function to accept the type of dataBinding to be performed.

BindGrid : function(dataSourceType)

Using the Enumeration from the client application

as a parameter to the  function  BindGrid ,

function CreateGrid( JSONDataToBeBound )
{
  //Create an instance of the PhotoGrid Control
  var gridElement = new AtlasDemo.PhotoGrid( leftPosition , topPosition,"",0,"tblThumbnails",horizontalOffset,VerticalOffset) ;
  //Set the Data for the PhotoGrid Control
  gridElement.setData(JSONDataToBeBound); 
  //Set the Number of images to be shown in one Page
  gridElement.setPageSize( pageSize );
  //Bind the Grid
  gridElement.BindGrid( AtlasDemo.DataSourceType.JSON  );
  
}

The Xml Data Format Supported by the PhotoGrid Component

<ResultSet totalResultsAvailable="2" totalResultsReturned="2" firstResultPosition="0">
        <Results>
            <Result Title="just-a-little-bit_1024.jpg" Summary="Website: Deviant Art Homepage Download: 1024x768" Url="http:\/\/www.pixelgirlpresents.com\/images\/desktops\/elyse\/just-a-little-bit_1024.jpg"></Result>
            <Result Title="just-a-little-bit_1024.jpg" Summary="Website: Deviant Art Homepage Download: 1024x768" Url="http:\/\/www.pixelgirlpresents.com\/images\/desktops\/elyse\/just-a-little-bit_1024.jpg"></Result>
        </Results>
</ResultSet>

Calling the BindGrid Function With XMl Data

1) Create and append the XML String to  a stringBuilder Object

   var sBuilder = new Sys.StringBuilder("");
    sBuilder.append("<ResultSet totalResultsAvailable=\"2\" totalResultsReturned=\"2\" firstResultPosition=\"0\">");
        sBuilder.append("<Results>");
            sBuilder.append("<Result Title=\"just-a-little-bit_1024.jpg\" Summary=\"Website: Deviant Art Homepage Download: 1024x768\" Url=\"http:\/\/www.pixelgirlpresents.com\/images\/desktops\/elyse\/just-a-little-bit_1024.jpg\"></Result>");
            sBuilder.append("<Result Title=\"just-a-little-bit_1024.jpg\" Summary=\"Website: Deviant Art Homepage Download: 1024x768\" Url=\"http:\/\/www.pixelgirlpresents.com\/images\/desktops\/elyse\/just-a-little-bit_1024.jpg\"></Result>");

        sBuilder.append("</Results>");
    sBuilder.append("</ResultSet>");

2) Set the Data to be rendered by the PhotoGrid Control

PhotoGridGlobalInstance.setData( sBuilder.toString() );

3) Set the DataSource Type to be XML while Binding ..

gridElement.BindGrid( AtlasDemo.DataSourceType.XMLString  );

You are done .. Simple , neat and easy ...

Using the Prototype Model with Microsoft AJAX

PhaniRajuYN — Thu, 01 Feb 2007 21:18:00 GMT

Microsoft Ajax allows you to extend your javaScript Programming framework so that you can emulate OOP practices with Javascript .

A SImple Example is Here

The following is a list of stuff you can Use in javascript with Microsoft Ajax Extensions to javascript

Classes
Namespaces
Inheritance
Interfaces
Enumerations
Reflection

Sounds Neat , doesnt it ?

Well, lets get started ...

We will build a Re-usable Photo Grid Component that you can use in your applications .

PhotoGrid : It will show a grid of thumbnails with Animations associated with Click of each thumbNail.

On Click of the ThumbNail , the ThumbNail will move to a specific location and Resize itself .

The PhotoGird will have the Following Features.

Ability Bind Data in JSON Format
Paging Functionality in Numbers and "Next" and "Prev" Links
Jump to a specific page
Support for Placing the Controls at Specified X and Y Locations
Support for Customising the Horizontal and Vertical Offset between thumbnails
Support for specifying the Number of images in each page.

It will be written as a Client Side Java Script Re-usable Component

Th JSON Data format will be like this

{
"ResultSet":{"totalResultsAvailable":"50014","totalResultsReturned":7,"firstResultPosition":1,
"Result" :
    [
     {
        "Title":"The-Incredibles-Poster-C10219976.jpeg",
        "Summary":"",
        "Url":"http://a1259.g.akamai.net/f/1259/5586/1d/images.art.com/images/-/The-Incredibles-Poster-C10219976.jpeg"

     }
     {
        "Title":"The-Incredibles-Poster-C10219976.jpeg",
        "Summary":"",
        "Url":"http://a1259.g.akamai.net/f/1259/5586/1d/images.art.com/images/-/The-Incredibles-Poster-C10219976.jpeg"

     }
    ]
}

The PhotoGrid Component will convert the Data into something that looks like this

On Clicking of a thumbnail  , it will resize itself automatically , then it will look like this

Now that I  have , hopefully, raised your curiosity . lets build this..

Creating the PhotoGrid Component using Microsoft AJAX Exntensions

1.Register the NameSpace

Type.registerNamespace("AtlasDemo");

2.Declare the Constructor for your class.

AtlasDemo.PhotoGrid = function ( leftPosition , topPosition ,parentControlId ,animatorGlobalIndex ,tableID, horizontalOffset,VerticalOffset ){ 
this._jsonString        = "";
this._gridData          ;
this._pageIndex         = 0;
this._firstImageIndex   = 0;
this._leftPosition      = leftPosition;
this._topPosition       = topPosition;
this._parentControlId   = parentControlId;
this._thumbNailTableId  = tableID;
this._horizontalOffset  = horizontalOffset;
this._loopIndex         = 0 ;
this._verticalOffset    = VerticalOffset;
this._pageSize          =7;
this._startIndex        =0;
this._initialStart      =0;

}

2. Define the functions of the PhotoGrid using the Prototype model .

Syntax:

AtlasDemo.PhotoGrid.prototype = {
  <functionName1>:function([arguments])
  {
    <FunctionBody>
  }
  ,
  <functionName2>:function([arguments])
  {
     <FunctionBody>
  }
}

The Code inside the JS function is specified in this  format , pretty neat  and organised

Actual Function Definitions:

Function Name    : pagesAvailable

Function Purpose : To Return the Number of Pages Available For Paging

Return Value     : JSON Object with the total Number of Pages, Pages available in the Forward Direction and Backward Direction

Input Parameters : None

Function Code:

pagesAvailable:function()
    {
        var totalPages    = parseInt(this._gridData.ResultSet.totalResultsReturned)/parseInt(this._pageSize);
        var pagesForward  = parseInt(totalPages) - ( parseInt(this._pageIndex) +1 ) ;
        var pagesBackWard = parseInt( totalPages - pagesForward ); 
        var jsonStringData = "{\"pagesData\":{\"totalPages\":\""+totalPages+"\",\"pagesForward\":\""+pagesForward+"\",\"pagesBackWard\":\""+pagesBackWard+"\"}}"
        return ( eval( '(' + jsonStringData + ')' ) );
    }

The following are functions inside the Prototype function Declaration, the code is omitted for the purpose of clarity.

    setPageSize:function(pageSize)
    {
        <Function Body>
    },
    setData:function(jsonString)
    {
        <Function Body>
    },
    resetPositions:function( leftPosition , topPosition , animatorGlobalIndex  )
    {
        <Function Body>
    },
    resetAll:function ( jsonString ,leftPosition , topPosition ,parentControlId ,animatorGlobalIndex ,tableID, horizontalOffset,VerticalOffset ){ 
        <Function Body>
    },
    clearResults : function( leftPosition , topPosition , horizontalOffset,VerticalOffset )
    {
        <Function Body>
        
    },
    
    ShowPager:function(shouldIShowThePager,pagerControlHolder,pagingFunctionName)
    {
        <Function Body>
    },
    PageForward:function()
    {
    
        <Function Body>
    },
    __pagingFunction:function()
    {
       <Function Body> 
    },
    CurrentPageIndex : function()
    {
        <Function Body>
    },
    PageBackward : function()
    {
        <Function Body>
    },
    AnimateElement:function( imgElement )
    {
        <Function Body>
                        
    },
    CreateNewPhotoCell:function( searchResultItem )
    {
        <Function Body>
    }, 
    BindGrid : function()
    {
         <Function Body>
    }

3. Once you have declared the functions supported by the PhotoGrid Class, lets Go ahead and register the class.

AtlasDemo.PhotoGrid.registerClass('AtlasDemo.PhotoGrid', null, Sys.IDisposable);

You can read all about the registerClass Here.

You are now done!

Lets go ahead and see how to use this component in our code.

ASPX Code:

1. Add the Mandatory Script Manager Control.

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>

2. Include a reference to your script File in the <BODY> of the ASPX Page

<script type="text/javascript" src="ClientScripts/PhotoGrid.js"></script>

3. The Parent Control that will hold the ThumbNails

 <div id="divActualSize" style="left: 10px; overflow: auto; width: 90%; position: absolute;
            top: 18%; height: 650px" class="grey">
            <table id="tblThumbnails">
                <tbody>
                </tbody>
            </table>
 </div>

4. The Client Functions to the PhotoGrid Component

function CreateGrid( JSONDataToBeBound )
{
  //Create an instance of the PhotoGrid Control
  var gridElement = new AtlasDemo.PhotoGrid( leftPosition , topPosition,"",0,"tblThumbnails",horizontalOffset,VerticalOffset) ;
  //Set the Data for the PhotoGrid Control
  gridElement.setData(JSONDataToBeBound); 
  //Set the Number of images to be shown in one Page
  gridElement.setPageSize( pageSize );
  //Bind the Grid
  gridElement.BindGrid( );
  
}

we are done !

I have made a sample application that uses this control and shows off all the features possible .

Please let me know if this control is of any use to you .

 If yes, then how ?

 If No , then which features / options would make it useful ?

You can download the Sample Application here.