List divider behavior

[Dirk Gissing]

Hello, I've tried the solution provided by Yves and the staff of Appery, but I still can't seem to get it right...

This is what happens with my dividers:

As you can see, the dividers are all separate from the data and are not auto-dividing the data.

This is what I have done:
Made a list named "progg", made two items: one called program (this is where the data is) and one called "ProgDivider". I have followed every step provided by Yves, but I did not use Load but Page Show, because my data get's refreshed every time a user clicks on it.

Please advise!

[Bikram Ray]

Need help on presenting the list from rest api in this format. How can I do it?

1. Divider line
2. Conditional Color red on negative item (May be on javascript on response of Rest services?)

[Bikram Ray]

Sorry I missed the second image with divider line and conditional red color.

[Yurii Orishchuk]

Hi Bikram,

1. You can make UI like you need with custom CSS. For example you can add HTML component to the list and make it 1px height and with #666 background.

2. You can add to your list component mapping JS like: http://prntscr.com/4nja35/direct

   pre

   //Your appropriate condition to make line red.
   if(value.someParameter 1)
   //Add to goal item some CSS class.
   element.addClass("listItem_selected_red");

   return value;

   /pre

   Then you can add CSS rule based on this "listItem_selected_red" class to make UI you need.

   Regards.

[Ellen Schlechter]

How can I divide the list by date instead of month?

[Alena Prykhodko]

Hi Ellen,

This is something custom. You can search online for approaches.
Probably someone from community will share a solution.

[Amaury González Muro]

hi, this code dont work for me. The label eventDivider is a out the list event? or is a iten off the list?
thanks, sorry by m english

[Jack Bua]

I too am looking to make the divider use date. I have found this,
http://www.raymondcamden.com/2013/12/...
but I cannot seem to have success. My list is being populated from a service, and the dates are from a date field in a collection. Has anyone messed around with this before?

[Jack Bua]

Thank you Yves. This summary helped me get on the right path.

[Jack Bua]

I managed to figure it out with the help of that link and the rest of this post. However, the code:

$t.refreshScreenFormElements($.mobile.activePage.prop('id'));
Appery("eventList").find("li").eq(0).hide();
return;

unnecessarily hides the first divider for the first item in my list. I would like to hide the last divider since it is showing up unnecessarily. For example if my list has two items, there are three dividers. I need to remove the last one. How would I do that?