Using row selectors and data selectors

If you want to create a data set, but don’t want every piece of data from the data source, or want to specify specific pieces of data from the data source, you can use a row selector and a data selector. Spry supports the following two options for this purpose:

rowSelector: lets you specify an element that contains the data. When you specify the rowSelector option, you essentially specify the equivalent of a tr tag in an HTML table data source.
dataSelector: lets you specify the actual elements that contain the data. When you specify the dataSelector option, you essentially specify the equivalent of a td tag or tags in an HTML table data source.

For example, you might have the following HTML code structure as your data source:

<div id="mydata">
  <ul>
    <li> 
    <li>
  </ul>
  <ul>
    <li>
    <li>
  </ul>
</div>

In the example, the ul tags (which group together chunks of data) are the equivalent of row selectors, and the li tags (which contain the actual data) are the data selectors.

You then set a selector or selectors in the constructor as follows:

var ds1 = new  Spry.Data.HTMLDataSet(null, "mydata", {rowSelector:"ul", dataSelector:"li"});

Collect data using CSS

The concept of row selectors and data selectors is extremely useful if you want to collect data using CSS selector syntax. For example, suppose you are using the following table as your data source:

<table id=”employees”>
	<tr>
		<td>Name</td>
		<td>Email</td>
	</tr>
	<tr class=”contractor”>
		<td>Don</td>
		<td>don@abc.com</td>
	</tr>
	<tr>
		<td>Kin</td>
		<td>kin@abc.com</td>
	</tr>
	<tr class=”contractor”>
		<td>James</td>
		<td>james@abc.com</td>
	</tr>
</table>

You can specify to retrieve only the rows of data that have the contractor class assigned to them when you create the data set. To do this, you specify the rowSelector option in the constructor as follows:

var ds1= new Spry.Data.HTMLDataSet("mypage.htm", "thetableID",{rowSelector:".contractor"});

The result is the following data returned in the data set:

Name	Email
Don	don@abc.com
James	james@abc.com

You can also use more than CSS classes to specify which pieces of data you want. The following table shows the many different CSS selectors you can use.

Element	Examples
tag name	DIV; SPAN; *
class name	.rowData; .even
id	#product1
tag name with class name	DIV.rowData; *.header
tag name with id	DIV#product1
child selector (only first-level descendents)	>
child selector combined with any of the above	> DIV.rowData
comma delimited list of selectors (node selected if it matches at least one from the list)	#product1, #product2, #product3

Collect data by specifying a row selector only

You can break away from the table row/column paradigm and use the HTML data set to pull in data from any element on the page. The rowSelector option extracts rows of data, but uses a single column to map the content of each row. In this example, each li tag marks the start of a new row of data, but the row is only one column long.

<ul id="myList">
   <li>one</li>
   <li>two</li>
   <li>three</li>
</ul>

You can set the following options in the constructor:

var ds1 = new Spry.Data.HTMLDataSet(null, "myList", {firstRowAsHeaders:false, rowSelector: "li"});

The resulting data set would be as follows:

column 0
one
two
three

In your Spry page that displays the data, you would use the following data placeholder:

<div spry:region="ds1"><span spry:repeat="ds1">{column0}</span></div>

Collect data by specifying a data selector only

The dataSelector option tells the HTML Data Set that you are only interested in extracting certain pieces of data from the larger container, but that you are not interested in using multiple rows. The result is a single row of data with different columns inside the row.

For example, you might have the following code as your data source:

<div  id="myContainer">
	Some data here
		<div id="first">This is the  first chunk I'm interested in</div>
	Some other data <span>goes here</span>
		<div id="second">The second chunk</div>
	More uninteresting data..
</div>

You can set either of the following as constructors:

var ds1 = new Spry.Data.HTMLDataSet(null, "myContainer", {dataSelector: "div"});
OR
var ds1 = new Spry.Data.HTMLDataSet(null, "myContainer", {dataSelector: "#first, #second"});

The resulting data set would be as follows:

@first	@second
This is the first chunk I’m interested in	The second chunk

And in your Spry page that displays the data, you would use the following data placeholder:

<div spry:region="ds1">This is the first value {@first} and this is the second {@second}</div>

Notice that the data reference is {@elementID}. This happens only in the case of single-row data. Instead of using {column0}, {column1}, you use the ID on the chunks of extracted data as column names. You can overwrite this behavior by passing {IDAsHeadersForSingleRow:false} and use the {column0}, {column1} data references in your spry:region.

Collect data without specifying a row selector or data selector

You can collect data by mapping the entire HTML structure to the data set in one cell. This results in a single row, single column data set.

For example, you might have the following code as your data source code:

<div id="someData">This is the source used</div>

You would set the following values in the constructor:

var ds1 = new Spry.Data.HTMLDataSet(null, "someData");

And in your Spry page that displays the data, you would use the following data reference:

<div spry:region="ds1">Here's the extracted value: {column0}</div>