Extending the PhotoGrid to allow Xml DataBinding using JavaScript Enumerations

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