Forum | Appery.io

Hi guys,

I have a page with the days of the week on and when you click on a day it takes you to a new page and using a rest service with the added parameter "where"
{"Day":"Monday"} it loads all the night clubs that are open on that day.
and when you click on to the nightclub it loads a page with further information on it about the club using local storage.

This is all working perfectly.

In my database there is a field for 'Genre'. I'd like to be able to categorise the Clubs that are open on a selected day by their genre.
For example once a day has been tapped i want the page to load and show the clubs that are open like this:

<Back Monday

Hip-Hop -
Hip-Hop club 1
Hip-Hop club 2
Hiphop club 3

Techno-
Techno club 1
Techno club 2

House-
House club 1
house club 2

Any idea how this can be done?

Cheers

Hi Joe,

1) Please sort a response by categories.

2) If you map a result to list, create a list with Auto Divider. If not, use JS code to add needed headers to sections.

Hi Katya,

I'm sorry, im new to appery, can you explain in more detail please?

Thank you

Hello Joe,

Please look at this link: http://devcenter.appery.io/documentat... in the category Auto Divider

Thanks for the help.

I'm struggling bring up the properties for existing lists. It appears initially when the list is first dragged and dropped onto the page but after selecting another item I can't seem to bring the properties for the list up again.
Every time i attempt to access the list properties it brings up the list item or content properties. This is really frustrating because it means deleting existing lists and re-adding them every time i want to adjust the list properties.

Is anyone else experiencing this problem?

Also when I want to delete an arrow when mapping response's or requests on a service it doesnt work. Selecting the arrow and clicking the black (-) doesn't do anything. This is also very frustrating as it means if i make a mistake with my mapping i have to delete the restservice and add it again.

Both these problems are occurring using chrome on a macbook.
only the properties problem occurs using safari.

Is there another way to access list properties without clinking the list?

Cheers

Thanks for all your help so far guys.
Your support is extremely useful and in the next week I will be adding a topic of praise detailing how you've helped.

I'm still struggling to get this part right though.

here's what I have:

'Indie' and 'house' are the genre's. 'Monday Madness' is 'Indie' and 'Circle' is 'House'. I want it so the genre are above the Night Name respectively.

Thank you

Joe,

Yes, then you should mark the checkbox Auto Devider for the list component. Please look at this topic:
http://stackoverflow.com/questions/14...

I still don't understand why it's not working. When I click auto-divider it puts them all in there own categories with the divider header as the first letter of the 'night name'.

Hi Joe,

Here is a separate solution for you:

1 Uncheck all auto deviders checkbox you have done before.

2 Add "success" event handler to list service that's populates your list component. And add following JS code:

pre

&#47;&#47;Note: you should replace "mobilelist_41" with your list component name&#46;
var listName = "mobilelist_41";

var deviderOrder = 0;

Appery(listName)&#46;listview({
autodividers: true,

 autodividersSelector: function (li) { 
     //Here you can change devider function. 
     //Currently this function will group autodeviders with first word in the item text. 
     return li.text().trim().replace(/\s.*/gi, ""); 
 } 

});

Appery(listName)&#46;listview("refresh"); &#47;&#47;Refresh list component
Appery(listName)&#46;trigger("listviewcreate"); &#47;&#47;Initiate dividers creation
Appery(listName)&#46;find("li")&#46;eq(0)&#46;hide(); &#47;&#47;Hide first unused divider

/pre

See details on screen shot: http://prntscr.com/4h54nu/direct

Then you will get something like this: http://prntscr.com/4h55jo/direct

Regards.

Thanks Yurii,

I added your code as you said and this is what i got back in test:

I'm not familiar with JS but will be starting to learn in september.

you mentioned:

' //Here you can change devider function.
//Currently this function will group autodeviders with first word in the item text.'

How can I change the function to group autodividers by the the 'Genre' field in the database.

I want to group the 'NightName' by 'Genre', not by the first word in the item text.

Thank you for your patience,
Joe