I've tackled stuff like this before - where nodes are required to be filtered by many different means - using javascript. I found that my XSLT quickly became quite complex when doing this server-side, so client-side javascript proved to be much cleaner for my purposes. Obviously it depends on your exact scenario though - if there are hundreds of nodes then client-side could be quite slow etc.
The way I personally tackled this was using HTML5 data attributes and jQuery, so you might end up with some HTML like this:
You can have as many data-attributes as you want and can then use javascript to filter these or any combination accordingly, very easily.
Like I say, you might have a specific requirement for it not to be done client-side but perhaps this gives a good alternative if client-side is an option.
Correct me if I am wrong.. from the above code snippet it looks like we are sorting the events that are already updated.
But, I am looking for a solution that does dynamically in the sense, if there is new event added (ie as a seperate node) then that should be sorted and grouped automatically and should be displayed in the respective list.
structure of the nodes that is available:
events
calander events
event1
event2
event3
.....
I would like the code to sort all the above event1, event2.... and display that sorted list in the calander events page. when some one clicks on the event name in the calander events page, they should be taken to the corresponding event details page.
Just so I understand fully... There's no client-side requirement to be able to sort or filter or group the links to the events? You just want to take a series of content nodes and render them in a particular order using XSLT?
How does the grouping/sorting combination work - is there just one list of events which is sorted and grouped or are there different 'views' of the events which have different organisation? Have you already produced any XSLT to output the nodes without grouping or sorting?
At the moment, all the nodes are displayed as a list in the calander events page in the random order. What I am looking here is, sort those nodes in the following way:
filter: Alphabetically | numerically | Zone
Once end user selects one of the filters above we should display the events in the sub sections:
in Alphabetically
A - H | I - P | P - Z
if user selects A-H, then only the event names starting with A to H should be displayed as a list in the calander events page and same way with other sub sections.
in Zones
Zone1 | Zone 2 | Zone3 | Zone 4
so we are grouping nodes and then sorting to display in an order in the calander events page.
Filtering and sorting events
Hi,
A total newbie to Umbraco and XSLT.
I have a node called Calander events and it has child nodes of individual events.
this big list of events to be filtered and sorted with the parameters like alphabetically, numerically and zones.
And there is sub grouping like in alphabetically the events to be sorted and grouped A to H, I to P, Q to Z
In Zones the events to be grouped by zone1, zone2, zone3 and zone4.
I am sure this is possible but not sure how to go about doing this. please help experts!!
Thanks
Sri
To be more precise,
each event will have input fields like event name, date of the event, zone it belongs to and events details.
we need to pick those inputs to filter and sort and to display in a page as a sorted list.
Please help!!
Thanks
Sri
Hi Sri,
I've tackled stuff like this before - where nodes are required to be filtered by many different means - using javascript. I found that my XSLT quickly became quite complex when doing this server-side, so client-side javascript proved to be much cleaner for my purposes. Obviously it depends on your exact scenario though - if there are hundreds of nodes then client-side could be quite slow etc.
The way I personally tackled this was using HTML5 data attributes and jQuery, so you might end up with some HTML like this:
<ul class="events">
<li data-zone="zone1" data-group="a">Event 1</li>
<li data-zone="zone2" data-group="b">Event 2</li>
<li data-zone="zone1" data-group="a">Event 3</li>
<li data-zone="zone4" data-group="b">Event 4</li>
<li data-zone="zone3" data-group="c">Event 5</li>
</ul>
You can have as many data-attributes as you want and can then use javascript to filter these or any combination accordingly, very easily.
Like I say, you might have a specific requirement for it not to be done client-side but perhaps this gives a good alternative if client-side is an option.
Thanks for your reply Dan!
Correct me if I am wrong.. from the above code snippet it looks like we are sorting the events that are already updated.
But, I am looking for a solution that does dynamically in the sense, if there is new event added (ie as a seperate node) then that should be sorted and grouped automatically and should be displayed in the respective list.
structure of the nodes that is available:
events
calander events
event1
event2
event3
.....
I would like the code to sort all the above event1, event2.... and display that sorted list in the calander events page. when some one clicks on the event name in the calander events page, they should be taken to the corresponding event details page.
Hope I am clear now!
Hi Sri,
Just so I understand fully... There's no client-side requirement to be able to sort or filter or group the links to the events? You just want to take a series of content nodes and render them in a particular order using XSLT?
How does the grouping/sorting combination work - is there just one list of events which is sorted and grouped or are there different 'views' of the events which have different organisation? Have you already produced any XSLT to output the nodes without grouping or sorting?
Hi Dan,
At the moment, all the nodes are displayed as a list in the calander events page in the random order. What I am looking here is, sort those nodes in the following way:
filter: Alphabetically | numerically | Zone
Once end user selects one of the filters above we should display the events in the sub sections:
in Alphabetically
A - H | I - P | P - Z
if user selects A-H, then only the event names starting with A to H should be displayed as a list in the calander events page and same way with other sub sections.
in Zones
Zone1 | Zone 2 | Zone3 | Zone 4
so we are grouping nodes and then sorting to display in an order in the calander events page.
is working on a reply...