More Samples on using rowSelector and dataSelector

When using a HTML element other then a <TABLE>, the HTMLDataSet needs some extra information in order to extract data from such three-level nested structure. There are two optional parameters (rowSelector, dataSelector) that can be used to accomplish this. See this sample for possible values to be used with these parameters.

1. Using both rowSelector and dataSelector

Uses all the children of 'sourceContainer1' as rows and gets all the all tags with 'header' or 'description' class names as columns.


  • {column0}
Brief Description:
{column1}

Here's the HTMLDataSet instantiation: 

	var ds1 = new Spry.Data.HTMLDataSet(null, "sourceContainer1", {rowSelector:">", dataSelector:".header, .description"});

Here's how the Source Container DIV looks like: 

<div id="sourceContainer1"> 
	<div class="rowData" id="product1">
		<span class="header">Adobe Photoshop CS2</span>
		<span class="description">The professional standard in desktop digital imaging</span>
	</div>
	...
</div>

Adobe Photoshop CS2 The professional standard in desktop digital imaging
Adobe Illustrator CS2 Adobe® Illustrator® CS2 software gives you new creative freedom that lets you realize your ideas quickly and powerfully. Instantly convert bitmaps to vector artwork and paint more intuitively. Save time with intelligent palettes and optimized workspaces. Plus, tight integration with other software allows you to produce extraordinary graphics for print, video, the web, and mobile devices.
Adobe InDesign CS2 A new standard in professional layout and design
Adobe GoLive CS2 Professional, standards-based Web and mobile authoring
Adobe Dreamweaver 8 Dreamweaver 8 is the industry-leading web development tool, enabling users to efficiently design, develop and maintain standards-based websites and applications.
Adobe Flash 8 Professional Introducing Macromedia's biggest Flash release to date.
Adobe Fireworks 8 Fireworks 8 lets you balance maximum image quality with minimum compression size as you create, edit and optimize images for the web with precise control.
The markup used for accessing the values inside the spry:region is {column0}, {column1}. You can use the optional array columnNames:["header", "description"] in the dataset definition in order to access the values using {header}, {description}.

2. Using only rowSelector

Uses all 'LI' items as rows and for each row builds a single column of data.

In this case a single cell is used for each row, that holds all the data from the row.


  • {column0}

Here's the HTMLDataSet instantiation: 

	var ds2 = new Spry.Data.HTMLDataSet(null, "sourceContainer2", {rowSelector:">li"});

Here's how the Source Container DIV looks like: 

<ul id="sourceContainer2"> 
	<li class="rowData" id="product1">
		Adobe Photoshop CS2 - 
		The professional standard in desktop digital imaging
	</li>
	...
	<li class="rowData" id="product7">
		Adobe Fireworks 8 -
		Fireworks 8 lets you balance maximum image quality with minimum compression size as you create, 
		edit and optimize images for the web with precise control.
	</li>	
</ul>

3. No rowSelector specified, only dataSelector

A single row of data is build that has multiple columns from the matching 'LI's

This sample takes the data from the same structure as in previous sample (UL LI).
If no rowSelector is specified, a single row is build that uses as cells the items filtered by the dataSelector.
The markup reference looks like: {column0}, {column1}, etc


Here's the value for { column0 }: {column0}
Here's the value for { column3 }: {column3}

Here's the HTMLDataSet instantiation: 

	var ds3 = new Spry.Data.HTMLDataSet(null, "sourceContainer2", {dataSelector:"li.rowData"});

4. No rowSelector specified, only dataSelector that filters using specific IDs

Only the matching 'LI's will be used as columns for this single row of data

This sample is just a variation of the previous one, but uses the optional columnNames array in order to change the default markup for values.


Here's the value for { P1 }: {P1}
No value for { P4 }: {P4}

Here's the HTMLDataSet instantiation: 

	var ds4 = new Spry.Data.HTMLDataSet(null, "sourceContainer2", {dataSelector:"#row_product1, #row_product4, #row_product5", columnNames:["P1", "P4", "P5"]});