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 ...