Styling spry:sort
Is it possible to apply some css styling to a <th> with
a spry:sort to give some indication of which column in a table is
currently the one that the table is being sorted by?
Phil:
Thanks so much for your reply. Yes, the fact of my using Spry 1.5 was definitely the source of part of my trouble. I got the updater and now the error message has disappeared.
My remaining problem is correctly fulfilling the implementation so that I'm triggering the addition of the ".ascending" and ".descending" classes upon user clicking the column headings. I see clearly from your example that they are being assigned dynamically and I think I have faithfully implemented the styles. But in Firebug, upon click of a column heading, while I am getting the correct Spry sorting behavior, I am unable to see the assignment of the .ascending and .descending classes.
If I had a better grasp of the JavaScript involved I could probably troublshoot it, but in this instance, I'm just trying to implement "cookbook" style, so I'm unable even to see the dumb mistakes I may have made. My implementation seems to differ from yours only in that class and dataset names are different, data is (of course) different and I'm using an html table as a dataset whereas you are using an XML file as yours. Spry 1.6.1 is now in place.
This is my markup (the relevant bits):
<head>
<script src="../SpryAssets/SpryData.js" type="text/javascript"></script>
<script src="../SpryAssets/SpryHTMLDataSet.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
var ds2 = new Spry.Data.HTMLDataSet(null, "awards_cd", {sortOnLoad: "The_Award", sortOrderOnLoad: "ascending"});
ds2.setColumnType("C-Deadline", "date");
//-->
</script>
<script type="text/javascript">
<!--
function mysort(rgn,phil)
var so = phil("{ds_SortOrder}");
var sc = phil("{ds_SortColumn}");
if (so.length == 0) {so="ascending"; sc="The_Award"}
Spry.Utils.addClassName(sc,so);
return '';
//-->
</script>
</head>
<body>
<div spry:region="ds2">
<table class="spry">
<tr>
<th class="sortable" spry:sort="The_Award">The Award</th>
<th class="sortable" spry:sort="C-Deadline">C-Deadline</th>
<th class="sortable" spry:sort="Country">Country</th>
<th class="sortable" spry:sort="Disciplines">Disciplines</th>
<th>Purpose</th>
<th>Eligibility</th>
</tr>
<tr spry:repeat="ds2" spry:odd="odd" spry:even="even" spry:hover="hover" spry:select="hover">
<td>{The_Award}</td>
<td>{C-Deadline}</td>
<td>{Country}</td>
<td>{Disciplines}</td>
<td>{Purpose}</td>
<td>{Eligibility}</td>
</tr>
</table>
</div>
<div spry:region="ds2">{function::mysort}</div>
<table id="awards_cd">
<tr>
<th>The Award</th>
<th>C-Deadline</th>
<th>Country</th>
<th>Disciplines</th>
<th>Purpose</th>
<th>Eligibility</th>
</tr>
<tr>
<td><a href="marshall.html">Marshall Scholarship</a></td>
<td>9/1/2009</td>
<td>UK</td>
<td>All Fields</td>
<td>2-3 years at any British University leading to a degree</td>
<td>US citizen, BA by start of grant period, 3.7 undergraduate gpa</td>
</tr>
<tr>
<td><a href="mitchell.html">Mitchell Scholarship</a></td>
<td>9/1/2009</td>
<td>Ireland</td>
<td>All Fields</td>
<td>1 year at an Irish University leading to a degree</td>
<td>US citizen, BA by start of grant period, 18 > 30 yrs</td>
</tr>
<tr>
<td><a href="rhodes.html">Rhodes Scholarship</a></td>
<td>9/1/2009</td>
<td>UK</td>
<td>All Fields</td>
<td>2-3 years at Oxford leading to a degree</td>
<td>US citizen, BA by start of grant period, 18 < 24 yrs at time of application</td>
</tr>
<tr>
<td><a href="fulbright.html">Fulbright Scholarship </a></td>
<td>9/24/2009</td>
<td>Worldwide</td>
<td>All Fields</td>
<td>One academic year of study/research</td>
<td>US citizen, BA by start of grant period, no PhD at time of application</td>
</tr>
<tr>
<td><a href="ful_hays.html">Fulbright-Hays </a><a href="ful_hays.html">Doctoral Dissertation Award</a></td>
<td>10/15/2009</td>
<td>Worldwide</td>
<td>Non-Western Area Studies</td>
<td>1 year of dissertation research</span></td>
<td>US citizen, PhD candidate</td>
</tr>
<tr>
<td><a href="daad_grad.html">DAAD Graduate Award</a></td>
<td>11/1/2009</td>
<td>Germany</td>
<td>All Fields</td>
<td>1 year of study/research</td>
<td>US citizen, graduating senior or graduate student</td>
</tr>
<tr>
<td><a href="churchill.html">Churchill Scholarship</a></td>
<td>11/12/2009</td>
<td>UK</td>
<td>Math, Science, Engineering</td>
<td>1 year of graduate study at Cambridge</td>
<td>US citizen, BA by start of grant period</td>
</tr>
<tr>
<td><a href="luce.html">Luce Scholars Program</a></td>
<td>11/20/2009</td>
<td>Asia</td>
<td>All Fields</td>
<td>1 year internship</td>
<td>US citizen, BA by start of grant period, < 30 years, no prior experience in Asia</td>
</tr>
<tr>
<td><a href="whitaker_fellows.html">Whitaker Program for Biomedical Engineers</a></td>
<td>2/1/2009</td>
<td>UK</td>
<td>Biomedical Sciences</td>
<td>1 year of graduate study/ research</td>
<td>US citizen, BA by start of grant period</td>
</tr>
<tr>
<td><a href="berlin.html">Free University of Berlin Graduate Exchange</a></td>
<td>4/15/2009</td>
<td>Germany</td>
<td>All Fields</td>
<td>1 year of dissertation research</td>
<td>PhD candidate</td>
</tr>
</table>
</body>
RELANT CSS:
.even { background-color: #ede8dd; }
.odd { background-color: #faf6eb; }
.hover { background-color: #bcd4ec; }
table.spry { margin: 1em 0; }
table.spry th {
background-color: #c2b7a1;
text-align: left;
padding: .5em;
table.spry td { padding: .5em; }
.descending { background: url(../SpryAssets/SpryMenuBarDownHover.gif) 95% 50% no-repeat; }
.ascending { background: url(../SpryAssets/SpryMenuBarUpHover.gif) 95% 50% no-repeat; }
table.spry th.sortable:hover { cursor: pointer; }
TEST PAGE: http://icenter.stanford.edu/orc/grad_comparisonMGH2.html
I have the correct graphics now.
If you have time and can spot where I've gone awry, many thanks. And thanks again for your solution and the time you spent originally looking at my page. All in all, your functionality seems like something Adobe should have put into the widget in the first place as it is virtually universal functionality in any other sortable table solutions that I've come across.
Best Regards,
Mike
Similar Messages
-
How do i create a styled spry mysql driven menu using dreamweaver cs4?
How do i create a styled spry mysql driven menu using dreamweaver cs4?
I have cs4. I gave up on using MS sql as a datasource. I finally got a php successfull connection in my PHP web page.
I would like a nice video tutorial for creating a dynamic menu.
I guess i can style it by attaching a css file to the page. Are their any already designed css files out there in some online area?
i am not a good designer. so i would like to simply have a collection of menu_style.css files and choose what looks good.
But first i need to build the spry menu from the mysql database.
Any help is apprechiated.
My first choice was to maintain the data in an MS sql server file. If i could directly attach to an ms sql datasource then that would be the best option.
I dont think i want to have to re-generate an XML datasource each time i add or modify the menu. I would like to maintain the MS Sql or mySql file instead.
If i could generate an XML datasource from the MS Sql database then I may even prefere that, but i have spent a lot of time trying to figure out how to do that and not had any success. So i prefere working in MS sql but would settle for mySql if i had to.
Thanks
JerryTo create a dynamic menu take a look here http://labs.adobe.com/technologies/spry/samples/menubar/MenuFromNestedData.html#
The XML file for the above menu looks like this
<?xml version="1.0" encoding="utf-8"?>
<items>
<item id="0001" type="donut">
<name>Cake</name>
<ppu>0.55</ppu>
<batters>
<batter id="1001">Regular</batter>
<batter id="1002">Chocolate</batter>
<batter id="1003">Blueberry</batter>
<batter id="1003">Devil's Food</batter>
</batters>
<topping id="5001">None</topping>
<topping id="5002">Glazed</topping>
<topping id="5005">Sugar</topping>
<topping id="5007">Powdered Sugar</topping>
<topping id="5006">Chocolate with Sprinkles</topping>
<topping id="5003">Chocolate</topping>
<topping id="5004">Maple</topping>
</item>
<item id="0002" type="donut">
<name>Raised</name>
<ppu>0.55</ppu>
<batters>
<batter id="1001">Regular</batter>
</batters>
<topping id="5001">None</topping>
<topping id="5002">Glazed</topping>
<topping id="5005">Sugar</topping>
<topping id="5003">Chocolate</topping>
<topping id="5004">Maple</topping>
</item>
<item id="0003" type="donut">
<name>Buttermilk</name>
<ppu>0.55</ppu>
<batters>
<batter id="1001">Regular</batter>
<batter id="1002">Chocolate</batter>
</batters>
</item>
<item id="0004" type="bar">
<name>Bar</name>
<ppu>0.75</ppu>
<batters>
<batter id="1001">Regular</batter>
</batters>
<topping id="5003">Chocolate</topping>
<topping id="5004">Maple</topping>
<fillings>
<filling id="7001">
<name>None</name>
<addcost>0</addcost>
</filling>
<filling id="7002">
<name>Custard</name>
<addcost>0.25</addcost>
</filling>
<filling id="7003">
<name>Whipped Cream</name>
<addcost>0.25</addcost>
</filling>
</fillings>
</item>
<item id="0005" type="twist">
<name>Twist</name>
<ppu>0.65</ppu>
<batters>
<batter id="1001">Regular</batter>
</batters>
<topping id="5002">Glazed</topping>
<topping id="5005">Sugar</topping>
</item>
<item id="0006" type="filled">
<name>Filled</name>
<ppu>0.75</ppu>
<batters>
<batter id="1001">Regular</batter>
</batters>
<topping id="5002">Glazed</topping>
<topping id="5007">Powdered Sugar</topping>
<topping id="5003">Chocolate</topping>
<topping id="5004">Maple</topping>
<fillings>
<filling id="7002">
<name>Custard</name>
<addcost>0</addcost>
</filling>
<filling id="7003">
<name>Whipped Cream</name>
<addcost>0</addcost>
</filling>
<filling id="7004">
<name>Strawberry Jelly</name>
<addcost>0</addcost>
</filling>
<filling id="7005">
<name>Rasberry Jelly</name>
<addcost>0</addcost>
</filling>
</fillings>
</item>
</items>
Then remains the manner in which you create the XML file which can be found here http://labs.adobe.com/technologies/spry/samples/utils/query2xml.html
One you have your menu up and running, you will be able to apply styles and effects -
Currency Format in Spry Sort Table
Any ideas on how to format all numbers in a spry sort table
into US currency? Currently on my site, Spry is not displaying the
".00" that is included in my XML file.
My
Spry Sort Table ExampleHi,
yes, I`ve had the same behavior. As a workaround, you have to change the format of the cells.
Go into the properties of the cells:
-> Right mouse click
-> format cells
-> category
-> number
-> change something, e.g. the number of decimal places to show
Then you will have to map the component again to the same cells under "Display Data".
And now, the currency information will be shown correctly.
Regards
Victor -
Spry Detail Repeat Region on my page and I have an XML
database. In the database are webinars, complete with a "Date" tag.
While the data does sort, it doesn't seem to recognize them
as dates. For instance, the date 01/01/2007 would come before
01/02/2008, while it should be sorting it with the most recent
first.
As a workaround, I've input the dates in the XML table as
they should be ordered, but it's not optimal.
The dates are entered in as:
MM/DD/YYYY
I've copied the relevant parts of the code below and would
appreciate some help!
Thank you,
Dan
<script src="../../../SpryAssets/xpath.js"
type="text/javascript"></script>
<script src="../../../SpryAssets/SpryData.js"
type="text/javascript"></script>
<script src="../../../SpryAssets/SpryURLUtils.js"
type="text/javascript"></script>
<script src="../../../SpryAssets/SpryPagedView.js"
type="text/javascript"></script>
<script type="text/javascript">
//Define the Data Set
var ds1 = new Spry.Data.XMLDataSet("webinars.xml",
"news/article/Date",{sortOnLoad:"Date",sortOrderOnLoad:"ascending",distinctOnLoad:true});
ds1.setColumnType("Date", "date");
var pageOffset = 0;
var pageSize = 29;
var pageStop = pageOffset + pageSize;
</script>
<script type="text/javascript">
//Get the URL parameter for the row number
var ds1 = new Spry.Data.XMLDataSet("webinars.xml",
"news/article", { filterFunc: MyPagingFunc });
// webinarimage is not a valid date so you should not be
// setting the column type for it.
// ds1.setColumnType("webinarimage", "date");
var params = Spry.Utils.getLocationParamsAsObject();
if (params.row)
ds1.addObserver({ onPostLoad: function(ds, type) {
ds1.setCurrentRow(params.row); }
function MyPagingFunc(ds, row, rowNumber)
if (rowNumber < pageOffset || rowNumber >= pageStop)
return null;
return row;
function UpdatePage(offset)
var numRows = ds1.getUnfilteredData().length;
if (offset > (numRows - pageSize))
offset = numRows - pageSize;
if (offset < 0)
offset = 0;
pageOffset = offset;
pageStop = offset + pageSize;
// Re-apply our non-destructive filter on dsStates1:
ds1.filter(MyPagingFunc);
// Tell our 2nd region to update because we've adjusted
// some of the variables it uses in its spry:if expressions.
Spry.Data.updateRegion("list2");
// Change the XPath for the 3rd data set so that the 3rd
// region updates. Remember, position() starts at one and
not
// zero, so we have to add one to our pageOffset and
pageStop.
dsStates3.setXPath("/states/state[position() >=" +
(pageOffset+1) + " and position() < " + (pageStop+1) + "]");
</script>
<div id="Specials_Detail_DIV" spry:detailregion="ds1"
class="SpryHiddenRegion">
<table id="Specials_Detail_Table">
<tr>
<td width="200" valign="top"><a
href="Webinars_detail.asp?row={ds_RowID}">{webinarimage}</a></td>
<td width="238" valign="top" class="standardtext">
<p><span
class="subheading">{Title}</span><br>
<br>
{Speaker}<br></p>
<a
href="Webinars_detail.asp?row={ds_RowID}">{access}</a>
<br>
</td>
</tr>
</table>
</div>
<div id="Specials_DIV" width="500" spry:region="ds1"
class="SpryHiddenRegion" style="overflow:auto; height:300px;
width:500px" >
<table id="Specials_Table">
<tr>
<th width="92" height="19" class="standardtext"
scope="col" spry:sort="Title" ><a href="javascript:
void(0)">Title</a></th>
<th scope="col" spry:sort="topic" width="112"
class="standardtext" ><a href="javascript:
void(0)">Topic</a></th>
<th scope="col" spry:sort="Date" width="92"
class="standardtext" ><a href="javascript: void(0)">Air
Date</a></th>
</tr>
<!--User clicks to reset the current row in the data
set-->
<tr spry:repeat="ds1" spry:setrow="ds1" spry:odd="eg-bar"
spry:even="eg-bar2">
<td valign="top" class="standardtext" ><a
href="javascript: void(0)">{Title}</a></td>
<td valign="top" class="standardtext"
>{topic}</td>
<td valign="top" class="standardtext"
>{Date}</td>
</tr>
</table>
</div>
[code]
<article id="23ASD38675">
<Title><![CDATA[Title]]></Title>
<Speaker><![CDATA[Speakers: ]]></Speaker>
<Genesys><![CDATA[<a href="../link"><img
src="../../../images/icn_webinar_39.gif" width="39" height="40"
border="0"><br>View Replay</a>]]></Genesys>
<Date>02/27/2008</Date>
<MDate>February 27, 2008</MDate>
<Series>Family Continuity and Governance
Series</Series>
<webinarimage><![CDATA[<img
src="../../../private/members/resource_center/images/022708-preview-imageB.gif"
width="200" height="150" border="0">]]></webinarimage>
</article>
[/code]Date sorting with the format you use works just fine. I just
tested it out. So I took a closer look at your code, and I see
this:
var ds1 = new Spry.Data.XMLDataSet("webinars.xml",
"news/article/Date",{sortOnLoad:"Date",sortOrderOnLoad:"ascending",distinctOnLoad:true});
ds1.setColumnType("Date", "date");
var ds1 = new Spry.Data.XMLDataSet("webinars.xml",
"news/article", { filterFunc: MyPagingFunc });
You are basically creating a ds1, setting the column type,
and then blowing away the original ds1 with a new one you create.
Which means your column type for Date is reset back to "string".
Delete ds1 creation code you don't want, and then place the
setColumnType() call after it.
It will then work as it should.
--== Kin ==-- -
Hi thank you for reading,
I have tried everything to make this table sort, but the only
thing that works is by calling a sort method as you see me doing in
the last step here.
<div spry:region="dsItems1" spry:sort="@name">
<table width="100%" height="100%" spry:sort="@name">
<trspry:sort="@name" ><td spry:sort="@name">
<h3 >Programs</h3></td></tr>
<tr spry:repeat="dsItems1" spry:setrow="dsItems1"
spry:sort="@name" >
<td spry:sort="@name" style="padding-left:15px;
"><a class="links" href="#">{@name}</a></td>
</tr>
</table>
</div>
<p>
<input type="button" value="Sort A-Z" onclick="DoSort();"
/>
</p>
thanks in advance for any hints!
./bI believe your problem has to do with the fact that you have
a spry:sort on a <td> *AND* you have a spry:sort on its
parent <tr> which means that whenever you click on the
<td>, the data set will be sorted by @name twice, giving the
appearance that nothing happens?
Make sure that you only put the sort attribute on the
<td> or <th> elements.
--== Kin ==-- -
Hi All:
I have been trying to get spry:sort to work in a complex
table, but no matter what I try, the columns will not sort. As all
examples appear to show simple tables, I suspect this is the
problem. Has anyone got the sort function working on a complex
table? Sample code below.
Thanks for your advise.
Skip Keats
=================
Code sample:
<table cellspacing="1" summary="SDLC alphabetical listing
for A">
<caption>Alpha Listing: A</caption>
<col id="TemplateDocNameA" />
<col id="TemplateDocOwnerA" class="sdlcDocOwner" />
<col id="TemplateDocPhaseA" />
<col id="TemplateDocDescA" />
<thead>
<tr>
<th id="DocNameA"
spry:sort="SDLC_Template_Document_Name">Template Document
Name</th>
<th id="DocOwnerA" class="alignCenter">Document
Owner</th>
<th id="DocPhaseA">Phase</th>
<th id="DocDescA">Description</th>
<th id="DocLastModA" class="alignCenter"
spry:sort="SDLC_LastModified">Date Last Modified</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="5"><!-- #BeginLibraryItem
"/Library/SDLCTableFooterAlpha.lbi" -->Footer message.<!--
#EndLibraryItem --></td>
</tr>
</tfoot>
<tbody>
<tr spry:repeat="dsSDLC"
spry:test="'{SDLC_Template_Document_Name}'.charAt(0) == 'A'">
<th id="RA{ds_RowID}" headers="DocNameA"><a
href="{SDLC_Document_URL}" title="{SDLC_Template_Document_Name}:
{SDLC_Description}">{SDLC_Template_Document_Name}</a></th>
<td headers="RA{ds_RowID} DocNameA
DocOwnerA">{SDLC_Document_Owner}</td>
<td headers="RA{ds_RowID} DocNameA
DocPhaseA">{SDLC_Phase}</td>
<td headers="RA{ds_RowID} DocNameA
DocDescA">{SDLC_Description}</td>
<td headers="RA{ds_RowID} DocNameA
DocLastModA">{SDLC_LastModified}</td>
</tr>
</tbody>
</table>Unfortunately an public url is not possible as this is for an
intranet site. However, I finally got it to work. For some reason,
a delay occurs within Firefox and IE when you click to sort. -
Spry:sort how to sort nested ds
I use XMLDataSet to get Values from XML.
First thing, i used nested XMLDataSets, to get nested datas.
It works, but i have Problem with sort.
When i use spry:sort and than the nested Set it adjust only the nested values like here:
http://labs.adobe.com/technologies/spry/samples/data_region/NestedDataSample.html
My project is a car database. So i have cars...and in the xml file are the colors and kilometers in nested roots. So i ca get them only with the nested procedure. My Target is, that when the user sort by nested value, the whole table is sort by the nested sort.
Like....
If i have my table with all the cars....than i will sort the hwole table over modell....price..and and...but also over color.
How can i make this? because now i can only change the basic datastring or the nested datastring them self... so i never can sort the whole table by color...
Thanks for help!
TELLOAny help for me?
Here the code....so i guess it helps more to understand what i mean...:
var ds_autosuche = new Spry.Data.XMLDataSet("............xml", "results/result[brand != 0]");
ds_autosuche.setColumnType("price", "number");
var ds_autosuche_modell = new Spry.Data.NestedXMLDataSet(ds_autosuche, "modell/name");
var ds_autosuche_ez = new Spry.Data.NestedXMLDataSet(ds_autosuche, "infos/info[@type = 'ez']" );
var ds_autosuche_fuel = new Spry.Data.NestedXMLDataSet(ds_autosuche, "infos/info[@type = 'fuel']" );
var ds_autosuche_farbe = new Spry.Data.NestedXMLDataSet(ds_autosuche, "color/name");
var ds_autosuche_km = new Spry.Data.NestedXMLDataSet(ds_autosuche, "infos/info[@type = 'km']" );
i output than a table, where on every column is one value for one car. So than i can sort by brand, price....
but not the whole table by name, km, ez, fuel... because they all nested datasources... how can i sort the whole table over nested typs....????
TELLO -
Hello!
Is use this code in my spry xml dataset and spry table:
<div class="MainContent">
<div spry:region="dsCatalog">
<table border="0" cellspacing="0" cellpadding="3">
<tr bgcolor="#CCCC99">
<th spry:sort="@id"><div align="left"
class="style2"><a
href="#">Nr</a></div></th>
<th spry:sort="date"><div align="left"
class="style2"><a
href="#">Dato</a></div></th>
<th spry:sort="Fullname"><div align="left"
class="style2"><a
href="#">Merkenavn</a></div></th>
<th spry:sort="district"><div align="left"
class="style2"><a
href="#">Distrikt</a></div></th>
<th spry:sort="score"><div align="right"
class="style2"><a
href="#">Karakter</a></div></th>
</tr>
<tr spry:repeat="dsCatalog" spry:setrow="dsCatalog"
spry:odd="odd" spry:even="even" spry:hover="hover"
spry:select="selected">
<td><div
align="left">{@id}</div></td>
<td><div
align="left">{date}</div></td>
<td><div
align="left">{Fullname}</div></td>
<td><div
align="left">{district}</div></td>
<td><div
align="right">{score}</div></td>
</tr>
</table>
</div>
</div>
The problem I have is that the highest amount of digits I use
in the score field is 10,0 (3 digits) and all other values is 2
digits (9,5 and 8,0) and the three digit value will not sort in the
right order. I use sorting in all columns as you can see. The value
of 10,0 will always stays in bottom (ascending) or top
(descending). Do I have to use XSL to give a solution to this (and
if so, how to implement it?). Or maybe there is another solution to
this?
Thanks in advance!
E.B
TextHi E.B.,
The trouble stems from using commas instead of decimal
points.
First, by default, Spry assumes the column is text and sorts
it as such.
If you set the column to a number:
datasetname.setColumnType("columnname","number");
Spry will return [NaN} (not a number) because it can't deal
with the commas.
If you use decimals points, it will work correctly.
If you can't use decimals, the solution will have to be XSL
or otherwise.
Hope this helps.
Donald Booth
Adobe Spry Team -
I have created a SPRY sortable table in Dreamweaver CS4. Two columns are formatted as UK dates dd/mm/yyyy. They are identified as dates in the SPRY table.
When sorting these date columns SPRY is reading them as US date format which means the sorting is, while not quite random, pretty meaningless. I have checked this by reformatting and displaying the date as US date format mm/dd/yyyy and then SPRY sorts them as expected.
Would appreciate some help with how I retain the UK date appearance and achieve a sort on that basis. Is there a localisation file somewhere in the SPRY framework that allows date formats to be identified?
If not, can anyone advise how to resolve this?
Thanks in advance for any help.The root of the issue is that using JavaScript to a string into a date easily lead to inconsistent, unexpected results.
The way I solved this in the past is to have two columns inside my Spry datasets. One stores the date in yyyy-mm-dd format (ISO 8901, the format typically used by databases), another one stores a nicely formatted date (whatever format the language dictated).
Then I always display the nicely formatted column, but I sort it only the yyyy-mm-dd one.
As a bonus, yyyy-mm-dd sorts okay just as a string, so I have no need to assign a different datatype to it. -
I followed a tutorial through Adobe's site and I also read
the help section regarding Spry tables and sorting data. It says to
insert a Spry region and then a Spry table. I can then choose the
specific XML item to insert and allow it to be sortable - it is
placed in the <th> tag. It says I should be able to click on
the table header to sort the column but it doesn't work. The
example on the site uses an onclick action for the table header but
the tutorials online say nothing about it. Has anyone had
experience with this?Not meaning to put you off, but as spry is pretty new to all
of us, you may
be better asking your questions at this forum:
http://www.adobe.com/cfusion/webforums/forum/categories.cfm?forumid=72&catid=602
Nadia
Adobe® Community Expert : Dreamweaver
CSS Templates |Tutorials |SEO Articles
http://www.DreamweaverResources.com
~ Customisation Service Available ~
http://www.csstemplates.com.au
"lonewolfdj" <[email protected]> wrote in
message
news:f32r7k$654$[email protected]..
>I followed a tutorial through Adobe's site and I also
read the help section
> regarding Spry tables and sorting data. It says to
insert a Spry region
> and
> then a Spry table. I can then choose the specific XML
item to insert and
> allow
> it to be sortable - it is placed in the <th> tag.
It says I should be
> able to
> click on the table header to sort the column but it
doesn't work. The
> example
> on the site uses an onclick action for the table header
but the tutorials
> online say nothing about it. Has anyone had experience
with this?
> -
Styling Spry Gallery Captions Within Photos.xml
My Spry gallery is working just fine other than I'd like to use italics within some of my image captions. I noticed this line of code in photos.xml.
<italics font = "georgia"> </italics>
I'm wondering if this alludes to the fact that I should be able to use italics selectively without writing any XSLT (I'm not very experienced in that department).
Any advice appreciated.Hi Flat Top,
perhaps, you need a program that understands the structure of
jpegs like exiftool. Momentarily i use a powershell script:
get-childitem images\*.jpg |
foreach {
$image = [String]::Concat("Images\", $_.name)
$thumb = [String]::Concat("Thumbs\", $_.name)
perl exiftool.pl -c "%d deg %.4f min" -p FmtImage.txt $image
| Out-File xml.xml -append
perl exiftool.pl -c "%d deg %.4f min" -p FmtThumb.txt $thumb
| Out-File xml.xml -append
with FmtImage.txt:
<photo
path = "$FileName"
width = "$ImageWidth"
height = "$ImageHeight"
Kommentar = "$Comment"
GPSLatitude = "$GPSLatitude, $GPSLatitudeRef"
GPSLongitude = "$GPSLongitude, $GPSLongitudeRef"
GPSPosition = "$GPSPosition"
Hersteller = "$Make"
Modell = "$Model"
ISOSpeedRatings = "$ISO"
Date_TimeOriginal ="$DateTimeOriginal"
F_Number = "$FNumber"
ExposureTime = "$ExposureTime"
FocalLength ="$FocalLength"
Flash = "$Flash"
and FmtThumb.txt:
thumbpath = "$FileName"
thumbwidth = "$ImageWidth"
thumbheight = "$ImageHeight">
</photo>
this generates most of the photos.xml. Not automated are in
the moment some problems with the german Umlauts and with the
coordinates to bring them in a form understanable by google maps.
Perhaps that might help you.
I have no knowledge of php or Asp, my provider doesn't allow
it.
Greetings from Germany
Hannes Löhr -
Date Format for Spry data set sort
Hi
Just feeling my way through the use of Spry Datasets for the
first time and have a couple of issues hopefully someone with more
knowledge of it than me know the answer to.
I had an issue with my Spry Dataset initially that it would
not work in ie7 but was OK in FF3.
After some mucking round I realised the error I was getting -
albeit obscure in IE was telling me it was a date format issue in
my data set.
The db data I am playing with here is fairly simple: I have a
couple of text fields, an integer field that contains the
unixtimestamp of the entry (its a simple diary application) and a
formal date field that holds the same date in mysql's date format.
When I display the date in the dataset I do so in the format
"23rd May 2009" (as an example)- I code this using phps date
function in my xml query.
I had set this field to date format in the Spry dataset
conditions but IE seems to barf on this- I can change it to
textstring but then my sort is done on Alpha/Numeric sort of the
first character in the date field which is rubbish.
I only display the date in this format and one of the other
text fields in my dataset- the unixdate is for programmatic
purposes not general display so I cannot sort on this field if its
invisible. How can I acheive a date based sort with this set up- or
what date formats does Spry code prefer for date sorts? (My client
wants the date to show as I have explained). Many thanks. I have a
second query which I will post separately!
Kenny"Tanushiheadbash" <[email protected]> wrote
in message
news:gqa70o$iat$[email protected]..
> I think I follow what you are saying and in fact I think
its what I
> already
> have. I have set the sort order to use the unixtime when
the page
> initially
> loads and thats OK.
I am sorry, but you aren't following my explanation. English
isn't my mother
tongue, and I am not able to explain it any better.
> However what I need to be able to do is to have the
AJAX/Javascript sort
> (done in this case with Spry- ) to sort on the date when
the column header
> is
> clicked. The problem I have is the date format in this
visible column is
> in
> DDth Month YYYY format and Spry does not recocnise this
as a date format-
> it
> wants it as a string ( or ie gives an error). Maybe its
not possible what
> I am
> trying to do- just thought there might be a clever way
to implement this.
You can take a look at this page:
http://visual.unipv.it/tmt_calendar/admin/reports/events.cfm
Even if all the dates here are incidentally using the
yyyy-mm-dd format, the
dataset display the date from the "start_date_formatted"
field:
<td><a href="javascript:"
onclick="showUpdate('{event_id}')">{start_date_formatted}</a></td>
But uses another field to sort the table:
<th scope="col" spry:sort="start_date">Start
date</th>
You can have the same date, using two different formats,
inside two,
separated dataset fields. One is used for display, the other
one is used for
sort.
You may try to read again my previous explanations, look at
the code in the
page above and see if you get the idea.
Massimo Foti, web-programmer for hire
Tools for ColdFusion, JavaScript and Dreamweaver:
http://www.massimocorner.com -
Sorting Spry with database, how?
how I use spry Sorting with database?
It would help if you supplied a link to your site. Now I have to guess what it is that you want so here goes.
Have a look here
http://labs.adobe.com/technologies/spry/samples/data_region/DataReferences.html
http://labs.adobe.com/technologies/spry/samples/data_region/SortSample.html
http://labs.adobe.com/technologies/spry/samples/data_region/XMLStringSample.html
If the above is not what you are looking for, please supply more info.
Gramps -
Spry for sorting tables tutorial
I have a static table with 5 columns 10 rows and would like the user to be able to click anyone of the columns to get accending order or deccending order, to see how they rank as per column headings. I have looked at many javascript scripts, but did not work well or not what I wanted, so I thought why not spry. I looked at the spry samples on adobe site but there was no tutorials to go along with the sort table sample. If any one has a link or scripts for doing this I would be much appricated, Thx
Hi,
You are only seeing 15 rows as your table is not correct after entry 15. From row 16 onwards you need <td></td> for each column even if you have no entries to ensure the Spry HTML dataset picks up all the rows.
Try the following on your site in same directory as your PHP page to see how it works on a simple page. Change references to folders for SpryData and SpryHTMLDataSet as appropriate
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sortable Table</title>
<script src="SpryAssets/SpryData.js" type="text/javascript"></script>
<script src="SpryAssets/SpryHTMLDataSet.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
var ds1 = new Spry.Data.HTMLDataSet("teamstats.php", "myTable");
//-->
</script>
</head>
<body>
<div spry:region="ds1">
<table>
<tr>
<th spry:sort="Team_Name">Team_Name</th>
<th spry:sort="Points">Points</th>
<th spry:sort="Wins">Wins</th>
<th spry:sort="Poles">Poles</th>
<th spry:sort="Top_5's">Top_5's</th>
<th spry:sort="Top_10's">Top_10's</th>
</tr>
<tr spry:repeat="ds1">
<td>{Team_Name}</td>
<td>{Points}</td>
<td>{Wins}</td>
<td>{Poles}</td>
<td>{ds1::Top_5's}</td>
<td>{ds1::Top_10's}</td>
</tr>
</table>
</div>
</body>
</html>
Phil -
Problem with spry:select not selecting
I am having trouble getting the spry:select to work on the
following code. Everything works except for the spry:select. If I
remove the spry:hover and the spry:sort, then the spry:select will
work. The only way I can get the spry:select to work is if it is
the only spry statement in the <td>. Please help.
NON-WORKING SPRY:SELECT CODE:
<div spry:region="pv1">
Records {ds_PageFirstItemNumber}-{ds_PageLastItemNumber} of
{ds_PageTotalItemCount}
<table cellpadding="0" cellspacing="0" border="0"
width="100%">
<tr>
<td class="tableheader" style="cursor:pointer;"
spry:select="tableheaderSel" spry:hover="tableheaderSel"
spry:sort="airport_code">Airport</td>
<td class="tableheader" style="cursor:pointer;"
spry:hover="tableheaderSel" spry:sort="hotel">Hotel</td>
<td class="tableheader" style="cursor:pointer;"
spry:hover="tableheaderSel"
spry:sort="bookings">Bookings</td>
<td class="tableheader" style="cursor:pointer;"
spry:hover="tableheaderSel"
spry:sort="previous_year_bookings">Previous Year</td>
<td class="tableheader" style="cursor:pointer;"
spry:hover="tableheaderSel" spry:sort="change">Change</td>
<td class="tableheader" style="cursor:pointer;"
spry:hover="tableheaderSel"
spry:sort="percent_change">%</td>
</tr>
<tr spry:repeat="pv1" spry:odd="tablerow1">
<td class="tablecell"
spry:content="{airport_code}"></td>
<td class="tablecell"
spry:content="{hotel}"></td>
<td class="tablecell"
spry:content="{bookings}"></td>
<td class="tablecell"
spry:content="{previous_year_bookings}"></td>
<td class="tablecell"
spry:content="{change}"></td>
<td class="tablecell"
spry:content="{percent_change}"></td>
</tr>
</table>
<p>
<div style="float:right;">
<input type="button" value="Next"
onClick="pv1.nextPage();" />
<input type="button" value="Last"
onClick="pv1.lastPage();" />
</div>
<div style="float:left;">
<input type="button" value="First"
onClick="pv1.firstPage();" />
<input type="button" value="Prev"
onClick="pv1.previousPage();" />
</div>
</div>When you use a spry:sort, you are sorting the data set and
the entire region is redrawn. This wipes out the spry:select. This
happens to the select, no matter where it is.
The way to highlight the currently selected column is a bit
tedious. You will have to have a spry:if that checked the value of
{ds_SortColumn}. This means repeating the <TD> for each
condition.
It's a sub-optimal solution but we don't have attribute level
control.
However, we do have some tools and enhancements coming up
that should make this easier. But they are not ready yet, so...
http://labs.adobe.com/technologies/spry/samples/data_region/DataSetMasterDetailSample.html
has an example of how we use spry:if to conditionally put on
an attribute.
Don
Maybe you are looking for
-
Report S_PL0_86000030(G/L Account- balance)
Hi, When running the above report, I am getting different outpur format in quality & production server. In quality server, I am getting the following columns :- Balance Carryforward Balance,prev.periods AccumBal.Prev.Period Debit 1- 16 Credit 1-
-
ItUNES DOES NOT OPEN ON WINDOWS 8
iTunes does not open on windows 8
-
I am working on designing a RIA for my school district. I update the main site while others update individual school web pages. I want to make a ColdFusion CMS with pre-made Components that these users can use to build their web pages. For example, i
-
While posting exces quantity with GR (migo) we are gettign error "no vendor specified" where i have to checfk. Regards Pavan
-
Close, minimize, resize buttons in top left dissapeared
Any help MUCH appreciated!!... I cannot seem to figure out how i've lost my close, minimize and resize buttons in top left. IT's only in Illustrator. I have a MacBook Pro.. Any thoughts??? Thanks, Elena