ImageGear .NET
Data Binding to the Server Side ImGearThumbnailList Control
User Guide > How to Work with... > ASP.NET > Displaying Images using ASP.NET > Data Binding to the Server Side ImGearThumbnailList Control

The server side ImGearThumbnailList control allows you to bind a list of documents or pages created using any of the data sources supported by .NET. The data sources can either be an XML file, a database query result or local variables. There are two forms of data binding. You can choose any one, but you cannot mix the two in the same control.

The options are:

These options are defined in the Enumeration “ImageGear.Web.UI.ImGearDataBindingType”. The ImGearThumbnailList property “DataBindingType” instructs the control about your choice of the data binding type. You also must inform the control about fields to bind to using the following properties of the ImageGear.Web.UI.ImGearThumbnailList control:

The field “DocumentIdentifierField” is required for both types of data binding. The caption fields are optional. The “PageNumberField” is required for specifying specific page numbers when using the Document binding type is also required when using “Page” binding type.

If the property IncludeAllPages is set to “true” when using “Document” binding type, all the data binding information about page numbers will be ignored. However, when using “Page” binding type and if the “IncludeAllpages”property is set to true and “DataBindingType” property is set to “Page”, the “IncludeAllPages” property value will be ignored and the data binding will occur using “Page” type binding. When there is a “Page” type binding, each page is wrapped in a separate document instance even when exactly the same DocumentIdentifier is specified.

Data Binding Examples

The following examples illustrate data binding to the ImGearThumbnailList control:

Example 1, using a XML file as a data source
XML File: ThumbnailListTest.xml

Example 1
Copy Code 
<?xml version="1.0" encoding="utf-8"? >
<pages>
<page documentIdentifier="MyImage.tif" pageNumber="2" documentCaption="MyImage" pageCaption="Page"/>
<page documentIdentifier="ccitt.tif" pageNumber="4" documentCaption="ccitt" pageCaption="Page" />
<page documentIdentifier= "MyImage2.tif" pageNumber="6" documentCaption="MyImage2" pageCaption="Page" />
</pages>

The following properties are set in your application to enable binding to the ImGearThumbnailList web server side control:

Data Binding Method A

The following example illustrates data binding from the above XML file using Linq. In your Page_Load method of your web application, create a list from the above XML file using the following code:

Example 2
Copy Code 
string fullPath = HttpContext.Current.Request.MapPath(@"~/ThumbnailListTest.xml");

var documentsXml = XDocument.Load(fullPath);

//create a list of pages using Linq. Select values based on the values set for properties, //PageNumberField, PageCaptionField, DocumentCaptionField and DocumentIdentifierField.

var pages = from page in documentsXml.Descendants("page")

select new
{
PageNumber = page.Attribute("pageNumber").Value,
PageCaption = page.Attribute("pageCaption").Value,
DocumentCaption = page.Attribute("documentCaption").Value,
DocumentIdentifier = page.Attribute("documentIdentifier").Value
};

Data Binding Method B

The following example illustrates data binding by populating a list with data objects and data obtained from the ThumbnailListTest.xml file:

Example 3
Copy Code 
// This requires declaration of a data object class

class MyBindingObject
{
public string DocumentIdentifier;

public string PageNumber;
public string DocumentCaption;
public string PageCaption;

}

List< MyBindingObject> pages = new List <MyBindingObject>();

// We create list with data from the same xml file
foreach (var p in documentsXml1.Descendants("page"))
{
pages.Add(new MyBindingObject() { DocumentIdentifier = p.Attribute("documentIdentifier").Value, 
PageCaption = p.Attribute("pageCaption").Value,
PageNumber = p.Attribute("pageNumber").Value,
DocumentCaption = p.Attribute("documentCaption").Value});
}

// specify the data source and bind the data (The following is common code for the examples A and B). 

ImGearThumbnailList1.DataSource = pages;
ImGearThumbnailList1.DataBind();

Data Binding Method C

XML File: ThumbnailListDocs.xml

Example 4
Copy Code 
<?xml version="1.0" encoding="utf-8"? >
<documents>
<document documentIdentifier="MyImage.tif"DocumentCaption="MyImage" pageCaption="Page"/>
<document documentIdentifier="ccitt.tif" documentCaption="ccitt" pageCaption="Page" />
<document documentIdentifier= "MyImage2.tif" documentCaption="MyImage2" pageCaption="Page" />
</documents>

The following example illustrates “Document” type data binding. It creates a list of documents from the above XML file using Linq. In your Page_Load method of your web application, create a list from the above XML file using the following code:

Example 5
Copy Code 
string fullPath = HttpContext.Current.Request.MapPath(@"~/: ThumbnailListDocs.xml ");

var documentsXml = XDocument.Load(fullPath);

//create a list of documents using Linq. Select values based on the values set for properties, 
//PageCaptionField, DocumentCaptionField and DocumentIdentifierField.

ImGearThumbnailList1.IncludeAllPages = true; 
ImGearThumbnailList1.DataBindingType = ImGearDataBindingType.Document;
ImGearThumbnailList1.PageCaptionField = "PageCaption";
ImGearThumbnailList1.DocumentCaptionField = "DocumentCaption";
ImGearThumbnailList1.DocumentIdentifierField = "DocumentIdentifier";
var docs = from documents in documentsXml.Descendants("document")

select new
{
PageCaption = page.Attribute("pageCaption").Value,
DocumentCaption = page.Attribute("documentCaption").Value,
DocumentIdentifier = page.Attribute("documentIdentifier").Value
};
// specify the data source and bind the data . 

ImGearThumbnailList1.DataSource = docs;
ImGearThumbnailList1.DataBind();

     
   

 

 

©2016. Accusoft Corporation. All Rights Reserved.

Send Feedback