Simple Spry Table

Basically i have a regular HTML table of static data that I
wish to make the columns sortable. I do not wish to load the data
via a dataset.
Looking at the Dreamweaver CS3 help files is suggests that
this is possible:
"If you are creating a simple table, you can set one or more
columns as sortable and define CSS styles for various table
elements."
"If you are creating a simple Spry Table, deselect the
default option, Update Detail Region When Row Is Clicked. Keep the
option selected if you are creating a dynamic master Spry table. "
Now by using the insert spry table command in DW, the "Update
Detail Region When Row Is Clicked" is already deselected and it
will not allow me to insert a spry table until i define a dataset.
Is what I am trying to do at all possible?
TIA

Hi,
We are thinking about making a table widget that will do
what you are looking to do, but for now you will have to make a
data set.
But, you can use the HTMLDataSet and use your existing HTML
table as the data source.
Check out this sample.
http://labs.adobe.com/technologies/spry/samples/htmldataset/index.html
Hope this helps.
Don

Similar Messages

How to open a new page from a Spry Table click, with element info?

Hello, Spry experts!
This is probably simple, but I've searched for hours and can't find what I need. I'm using Dreamweaver CS4 and Spry 1.6.1 to create a simple Spry Table from an XML data set using PHP as my back end. I've used Dreamweaver's Insert->Spry->Spry Data Set to create everything, and the table is working fine. Colors, clicks, sorts, etc., are all working correctly as expected.
What I want is to be able to add a behavior such that when a table row is clicked, I can open a new page. Moreover, I want to pass a parameter from the table to the new page, like http://www.mydomain.com/newpage.php?aid=12345 or whatever.
So, for example, my table has two columns, "a_id" and "a_name", and my repeat region looks like this:
<div spry:region="xml_assignments">
<table width="500">
<tr>
<th spry:sort="a_id" class="spry_header">ID</th>
<th spry:sort="a_name" class="spry_header">Assignment</th>
</tr>
<tr spry:repeat="xml_assignments" spry:setrow="xml_assignments" spry:odd="spry_odd" spry:even="spry_even" spry:hover="spry_hover" spry:select="spry_select">
<td>{a_id}</td>
<td>{a_name}</td>
</tr>
</table>
</div>
What I want is to be able to open an entirely new URL, passing the value of the {a_id} in the selected row as a parameter to the new URL, as in something like: http://www.mydomain.com/newpage.php?aid={a_id}
So my questions are:
1. How best to apply the action to the table? Add an onclick to the tr tag? Something else?
2. How to extract the {a_id} value from the current row and pass it as a parameter to the action?
Or maybe just take another approach entirely?
I know that I can make the actual text in the table cells hyperlinks, and use them to link to the new page, which is fine. The desire here is just to make it so that the user can click "anywhere" on the table row (as they can currently do with the spry:select behavior) and have the link kick off, whether they actually click on the linked text or somewhere in the row where there is no text.
I'm sure this is obvious and simple, but I'm new to this level of Spry detail, and my brain is fried from hunting. Any guidance will be gratefully appreciated!
Glen Barney

I found the answer myself, after posting this, of course!
I changed:
<tr spry:repeat="xml_assignments" spry:setrow="xml_assignments" spry:odd="spry_odd" spry:even="spry_even" spry:hover="spry_hover" spry:select="spry_select">
to
<tr spry:repeat="xml_assignments" spry:setrow="xml_assignments" spry:odd="spry_odd" spry:even="spry_even" spry:hover="spry_hover" spry:select="spry_select" onclick="window.location.href='./newpage.php?aid={a_id}';">
Basically just added the onclick parameter...
And it all just worked!

Spry Table - way to select only parts of the dataset to be displayed?

I have been enjoying putting together a simple spry table (DW CS3) that pulls data from an xml file. At this point when the table loads it pulls all rows from the dataset and displays them in the table. My question: is it possible to create a link or some way to pull only certain rows to be displayed. For instance if the data was about donuts and included, 4 chocolate, 6 glazed and 5 plain, is there a way to only display the 6 glazed? I have thirty rows of data and it is just a bit too much for people to be able to go through with ease and would love to have the ability to "sort" by asking for only certain types of data and then having those types displayed.
Is there a way to do this?
Thanks
Tom

You can apply filters to your data set.
These samples might help you out:
Filtering with XPath
Multiple Non-Destructive Filters
Multiple Non-Destructive Filters Mode
Non-destructive Filter
XPath filtering with URL Params
URL Utils with Spry Data
Hopes this helps

Fade Effect from Spry Table

In the tutorial provided by Adobe it shows one how to create
a dynamic link list that triggers an events region. I want to know
is can you insert a fade in Spry effect on a Spry region detail
that is triggered from a Spry table repeat object? I placed an
onClick function on the Div that houses the Spry region but the
image in the Spry Detail region fades in only after it blinks in at
100%. So the effect is only working a split second after the image
appears at 100% then snaps to 0% and fades to 100%. What is the
correct method for using spry effects from Spry Region Table Links
to a targeted DIV or Spry region detail?

So this example is exactly what I am looking for, however,
when one uses images instead of simple text I think it fouls up the
smoothness of the code presented here. My problem is it works,
however, if you click through the images back and forth eventually
the image fades out to 0%. I am guessing this it could be related
to a preloading and cache issue? Or does this code handle spry
details that load in images differently?
http://www.megalomedia-inc.com/clients/bob/print.html
Click print item 1 and 2 back and forth to create the error.
Any insight on how to make this run smoothly would be greatly
appreciated and when I am done with this AJAX application I will
share it with the SPRY community.

Sorting numberic data in a spry table

First Problem:
I am having trouble getting an secondary sort to work in a
spry table. As long as I do a single sort every thing works just
fine, but as soon as I try to do a secondary sort.... nothing
works.
Second Problem:
The data I am using ranges from 0 to 10. When I sort "1" and
"10" end up being right next one each other, but the 10 should be
on top. So the sort ends up as 9,8,7,6,5,4,3,2,10,1. when it should
be 10,9,8,7,6,5,4,3,2,1.
I'm sure it is something simple that I have not figured
out.... has anyone else run into this and solved it?
thanks,

there is an issue with this, regardless if you do ds1.setColumnType("Q407Q207A", "number"); the Damn thing does not sort negative numbers. Is there a way to fix this, You know what amazes me is that people would not take this into consideration, yeah lets release a framework with half the basic functionality. Sorry don't mean to complaint but I've been trying to find a fix for this for over a month and nothing not on the Live Docs nor out there on the WEB.

Using javascript to dynamically generate the html for a Spry table

I have some javascript which generates html code for a Spry
table which displays the content of a Spry data set. The problem is
that after I generate the html, Spry never fills in the values for
the table.
Here's what I'm doing:
Using a data set observer, check for onPostLoad and generate
the html code
Using innerHTML, stuff the code into the appropriate
<div>
Use regionName.updateContent() to update the region I just
created with the html code I generated
Interestingly, if I take the generated source for my page and
remove the data set observer, the Spry table displays correctly
with all the expected values. This suggests to me that my generated
html code is correct, but that there is some sort of timing issue
(i.e. Spry doesn't know about the new code I generated).
Any suggestions?

jalperin wrote:
> Here's what I'm doing:
>
Using a data set observer, check for
onPostLoad and generate the html
> code
>
Using innerHTML, stuff the code into
the appropriate <div>
>
Use regionName.updateContent() to
update the region I just created
> with the html code I generated
>
> Interestingly, if I take the generated source for my
page and remove the data
> set observer, the Spry table displays correctly with all
the expected values.
> This suggests to me that my generated html code is
correct, but that there is
> some sort of timing issue (i.e. Spry doesn't know about
the new code I
> generated).
>
> Any suggestions?
I'd guess that it is a timing issue as well. I haven't looked
much at the dataset capability in Spry, but it may be that the
dataset "finds" all of the regions and code that it applies to
before the onPostLoad event is triggered. If that is the case, then
your generated code doesn't exist yet,and so the dataset thinks
that there is nothing for it to apply to.
Will the HTML that you generate change based upon the dataset
that is actually returned? I guess I'm looking for the reason why
the HTML is being generated when it could be in the page itself and
avoid this issue completely.
Danilo Celic
|
http://blog.extensioneering.com/
| WebAssist Extensioneer
| Adobe Community Expert

Spry Table works in Firefox but not IE

I have a Spry table working just fine in Firefox in a site
I'm developing:
http://www.abenaki.com/newsite/schedule.html,
but in IE 6 and 7 it first shows the table, unpopulated, and then
disappears altogether. I'm new to Spry and XML... have I done
something wrong? Any light anyone could shed would be hugely
appreciated! Thank you!!
The XML looks like this:
<?xml version="1.0" encoding="utf-8"?>
<courses>
<course id="1">
<name>New! Introduction to Social Assistance and Case
Management</name>
<location>Winnipeg</location>
<startdate>10 21 2008</startdate>
<duration>4 days</duration>
<price>$1695</price>
<desc>This course covers the setup, daily and periodic
procedures for Abenaki’s Social Assistance and Case
Management Module.Topics to be covered include: organization
profile setup, rate maintenance, security, vendor and client
maintenance, cheque production in Sage Accpac, cheque production in
the Social Assistance module, reports, case planning, month and
year end processing.</desc>
</course>
<course id="2">
<name>Introduction to Safe Water Infrastructure
Management System</name>
<location>Moncton</location>
<startdate>10 28 2008</startdate>
<duration>2 days</duration>
<price>$1295</price>
<desc>No description available at this
time.</desc>
</course>
<course id="3">
<name>Introduction to Housing Inspection and Management
System</name>
<location>Moncton</location>
<startdate>10 30 2008</startdate>
<duration>1 day</duration>
<price>$495</price>
<desc>This introductory level course covers all of the
steps involved in the data entry and report generation for housing
units in the community. Topics to be covered include: rating the
condition and estimated cost to repair of the interior, exterior,
amenities, fire and health hazard items. Students will learn how to
generate reports to identify housing units in need of minor or
major repairs and those units that are potential fire and/or health
hazard.</desc>
</course>
<course id="4">
<name>New! Post Secondary Education and Student
Tracking</name>
<location>Winnipeg</location>
<startdate>11 12 2008</startdate>
<duration>3 days</duration>
<price>$1595</price>
<desc>No description available at this
time.</desc>
</course>
<course id="5">
<name>New! Introduction to Social Assistance and Case
Management</name>
<location>Edmonton</location>
<startdate>11 18 2008</startdate>
<duration>4 days</duration>
<price>$1695</price>
<desc>This course covers the setup, daily and periodic
procedures for Abenaki’s Social Assistance and Case
Management Module.Topics to be covered include: organization
profile setup, rate maintenance, security, vendor and client
maintenance, cheque production in Sage Accpac, cheque production in
the Social Assistance module, reports, case planning, month and
year end processing.</desc>
</course>
<course id="6">
<name>Introduction to Safe Water Infrastructure
Management System</name>
<location>Edmonton</location>
<startdate>11 18 2008</startdate>
<duration>2 days</duration>
<price>$1295</price>
<desc>No description available at this
time.</desc>
</course>
<course id="7">
<name>Introduction to Housing Inspection and Management
System</name>
<location>Edmonton</location>
<startdate>11 20 2008</startdate>
<duration>1 day</duration>
<price>$495</price>
<desc>This introductory level course covers all of the
steps involved in the data entry and report generation for housing
units in the community. Topics to be covered include: rating the
condition and estimated cost to repair of the interior, exterior,
amenities, fire and health hazard items. Students will learn how to
generate reports to identify housing units in need of minor or
major repairs and those units that are potential fire and/or health
hazard.</desc>
</course>
<course id="8">
<name>Sage Accpac ERP 5.5 Refresher</name>
<location>Moncton</location>
<startdate>01 20 2009</startdate>
<duration>4 days</duration>
<price>$1695</price>
<desc>No description available at this
time.</desc>
</course>
<course id="9">
<name>Sage Accpac ERP 5.5 General Ledger and Accounts
Payable</name>
<location>Winnipeg</location>
<startdate>01 20 2009</startdate>
<duration>4 days</duration>
<price>$1695</price>
<desc>No description available at this
time.</desc>
</course>
</courses>
Abenaki Course
Schedule

The reason its not working its because its "crashing" at the
sort function in IE, I have no clue why.
To be more specific,, this part of the SpryData.js
if (this.unfilteredData)
this.unfilteredData.sort(sortfunc);
if (this.filterFunc)
this.filter(this.filterFunc, true);
else
/*this->*/ this.data.sort(sortfunc);
Maby try to delete the setColumnType for your startdate, to
see if that helps. Because your startdate is not a "valid" date
string. (i think)

Spry table does not display properly in Explorer 10

I have set up a web page including a Spry table which works great in all browsers EXCEPT Explorer 10. Does anyone know how to fix this?
http://jarrettrifles.com/Jarrett2012-website/pet-calibers.html
Here's how it looks in Explorer 10:
This is how it should display (from Chrome):

Hello,
hm, there is no problem in my IE 10. Spry works fine - in my case even without using compatiblity mode - (see screenshot, with IE 10 Info):
BUT you should consider - I quote from different contributions of the forum - "Spry has been deprecated and is no longer officially supported by Adobe" and: "Spry framework related examples available here: http://adobe.github.com/Spry/samples/ or use jQuery."
Hans-Günter

Spry tables: Sort by date

I need a spry table to sort by title and date columns; the
title works fine by selecting the 'sortable column' option when
making the table - this didn't work for the date column, but I
think this was because the excel/xml data used had the date info in
a text format. Once I'd formatted the date column cells in excel
doc as 'date' in (e.g.) Jan-07 format, the xml conversion changed
the data to what i think is the standard date format (e.g.
2007-07-01 00:00:00). Making this column sortable resulted in rows
being rearranged in the spry table, but not in any logical order.
please help!
many thanks,
S
(apologies if that was long-winded, wasn't sure whether you
needed any context)

You cannot sort a formatted date by default using the Spry. How is the data stored, in XML or HTML? And is the date stored as a formatted date or a timestamp? What is typically suggested is that you store the dates in two formats. First is a timestamp format or a formatted date as yyyy-mm-dd. You use that column to sort and then you have a date formatted however you want in a second column and that gets displayed to the user.
You can see more about this in the following thread: http://forums.adobe.com/thread/85718
The problem with the dd/mm/yy format is that Spry (and many other solutions) read the information as plain text. So here's a quick example of oldest to newest
30122011 - Dec 30, 2011
31012011 - Jan 31, 2011 - January would come after Dec
01302011 - Jan 31, 2011
01312010 - Jan 30, 2010 - 2011 would be before 2010
20100131 - Jan 31, 2010
20110131 - Jan 31, 2011
20111230 - Dec 30, 2011 - In this format all numbers show up in numerical order.

Spry Tables and Xml Data Sets viewed in IE7

Has anyone ever run into a problem with Spry Tables and Xml
Data Sets viewed in IE7? Work fine in IE6 and Firefox, but get the
error "exception caught while loading feed.xml: [object Error]" in
IE 7. Any ideas?
Attached is the xml I'm using.
Thanks

I came looking for the answer to this question. I could not
find an answer. Eventually I found it the answer that worked for
me, a graphic designer with not much experience in xml.
The following url provided an errata file in PDF format:
www.peachpit.com/dwcs3cib
which includes the following addendum to the incomplete
instructions in the book i was using to learn about spry:
"If Internet Explorer 7 is your primary browser, you'll nee
to take some extra steps to view spry dynamic content locally.
First, your site must be within the local server webroot; be sure
your Lessons folder is stored within the Inetpub>wwwroot folder.
Next, double-click the site name in the files panel to open the
Site Definition dialogue. Click the Testing Server category; from
the Access List choose Local/Network. Click Okay to close the Site
Definition dialogue. Now, when you preview your page with Internet
Explorer, your local Web server (localhost) serves the page as
designed."
Horray for me! Now i can move on from here and actually get
some work done!

Spry Table displaying blank in IE9

Spry table created in XML using CS5 (SpryData.js - version 0.52 - Spry Pre-Release 1.6.1) at http://www.jacquipatterson.com.au/slideshow_celebrant.html
The table displays as required in Firefox, Chrome, Navigator but draws a blank page with IE9. I have searched all over for a similar case but to no avail.
I would be most praisefull if someone has a solution to this annoying problem or has a suggestion on how to get around it.

Change line 35 to
var slides_120609 = new Spry.Data.XMLDataSet("http://www.jacquipatterson.com.au/Slideshowjune.xml", "Root/Row", {sortOnLoad: "venue", sortOrderOnLoad: "ascending"});
and remove line 195
Gramps

Filter spry table from repeater list

Using Dreamweaver, I am looking to find out how to link a
spry repeat list (Select Drop-Down) to a Spry table.
I have created a repeat list (Select Drop-Down) using a
distinct filter on a field in my XML data base :
The XML database is:
var ds2 = new
Spry.Data.XMLDataSet("Data/NetballDatafeed190401.xml",
"NetballList/NetballProducts/SubType",{sortOnLoad:"SubType",sortOrderOnLoad:"as
cending",distinctOnLoad:true});
The drop down list is created by
<div spry:region="ds2">
<select name="select" spry:repeatchildren="ds2">
<option value="{SubType}">{SubType}</option>
</select>
</div>
I have a table which I want to show only the values on the
table where the subType that matches the value from the select
list.
This data is populated by:
var ds1 = new
Spry.Data.XMLDataSet("Data/NetballDatafeed190401.xml",
"NetballList/NetballProducts",{sortOnLoad:"ProductPrice",sortOr
derOnLoad:"ascending"});
and is created by
div spry:region="ds1">
<table>
<tr>
<th>ProductName</th>
<th>ProductPrice</th>
<th>ImageURL</th>
<th>SubType</th>
</tr>
<tr spry:repeat="ds1">
<td>{ProductName}</td>
<td>{ProductPrice}</td>
<td><img src="{ImageURL}"/></td>
<td>{SubType}</td>
</tr>
</table>
</div>
I believe that I need to create a spry:Choose statement in
the drop down list which runs a function that filters the DS1 XML
data.
I beleive that The function need to look like
var myFilterFunc = function(dataSet, row, rowNumber)
some funtion here that filters ds1 on {SubType}.......
I will then need to run ds1.filter(myFilterFunc);
Any pointers or examples most welcome.

to do the the spry:if="'statement" needs to be in the
<tr> rows you want to filter on

Sorting a Spry Table

For a table listing events and fed by an xml file I need to sort the date and time columns. First priority is date, second is time. This is possible in a regular html table, but not an option in spry tables, at least not in CS 3 which I am using.
It probably needs some change in the JavaScript to do that. Any help with that is greatly appreciated. Thanks.

Click the column headers here http://labs.adobe.com/technologies/spry/samples/data_region/DataReferences.html and here http://labs.adobe.com/technologies/spry/samples/data_region/SortSample.html
For a table listing events and fed by an xml file I need to sort the date and time columns. First priority is date, second is time. This is possible in a regular html table, but not an option in spry tables, at least not in CS 3 which I am using.
Sorting is a built-in Spry function.
It probably needs some change in the JavaScript to do that.
Under normal circumstances, it is advisable not to touch the Spry JS files.

Way to have a Spry table fill remainder of a window

Does anyone know of a cross platform way to get a Spry table
to fill the remainder of a window, assuming the top has, for
example, controls for performing a query?
None of the Spry samples I've seen are designed this way. But
then I guess that's not surprising considering CSS, AFAIK, requires
that co-ordinates and sizes be specified either in some particular
units, or as a percentage of the parent element, NOT some
expression involving both.
Is the only solution to somehow, in Javascript, query the DOM
for the window's dimensions (assuming that's possible), subtract
the height of the DIV element for the controls, and dynamically
update the height of the DIV element for the Spry table with the
result?
Any suggestions would be much appreciated.
Thanks,
Rob

I ended up using this guy's functions :
http://javascript.about.com/library/blscreen1.htm

Spry Table

Hello, I am using an XML file that has been exported from an
Access 2007 database for the spry table. The data displays in the
table just fine. Is there any way to automatically refresh the data
in the export when the database gets updated? Thank you much!
jim

That code should go in your call back function, its the code
that fires after the update has been perfomred. It depends on how
your updating your database, but normally its a javascript function
that is called after you insert to the database.
Look at this link and check the Spry Datasets tab for
loadData
http://labs.adobe.com/technologies/spry/articles/data_api/index.html
Also look at this for some examples
http://labs.adobe.com/technologies/spry/samples/
Also check this forum out
[L=http://www.adobe.com/cfusion/webforums/forum/categories.cfm?forumid=72&catid=602]

Simple Spry Table

Similar Messages

Maybe you are looking for