List divider behavior

[Yves Senn]

Hey guys, how can one overwrite the behavior of auto divider on a list? i would like to have a divider of my list by month (date is displayed in a label) any suggestions?

[Igor]

Hello,

How did you add items to list? Manually or from a REST service?

[Yves Senn]

Hello Igor,

The Items are added by REST service data.

[Kateryna Grynko]

Hi Yves,

You can do this with the following JavaScript code:
codeAppery("listaActividades").listview({
autodividers: true,
autodividersSelector: function (li) {
//Modify this function to generate divider text
var label = li.find("[name=labelComponentName]"); //Find component
return label.text(); //Return label text
}
});

Appery("listaActividades").listview("refresh"); //Refresh list component
Appery("listaActividades").trigger("listviewcreate"); //Initiate dividers creation
Appery("listaActividades").find("li").eq(0).hide(); //Hide first unused divider/code

You should manually change the function with the appropriate comment: "//Modify this function to generate divider text".

[Yves Senn]

Thank you very much, this works like a charm!

[Yves Senn]

Hmmm, still one problem left. When using this with DataFilter, the datafilter is shown twice.

http://medevent.app.appery.io/events....

(Just press login and it will appear, its not yet connected to a service)

probably i miss a line to hide the second appearance like the first unused divider in your code.

Thanks for your help

[Maryna Brodina]

Hello! Use the following code on service success event (not Load):
codeAppery("eventList").listview({
autodividers: true,
filter: true,
autodividersSelector: function(li) {
//Modify this function to generate divider text
var label = li.find("[name=eventDivider]"); //Find component
return label.text(); //Return label text
}
});

Code: Select all

         Appery("eventList").listview("refresh"); //Refresh list component 
         Appery("eventList").trigger("listviewcreate"); //Initiate dividers creation 
         Appery("eventList").find("li").eq(0).hide(); //Hide first unused divider   
         Appery("eventList").find("div").eq(0).hide(); //Hide first unused divider /code 

there is "filter" parameter added

[Yves Senn]

Hey people,

It works on chrome but not in safari or ie 10. somehow a calculation fails or whatever. could one of you have a look at http://medevent.app.appery.io/ (just click login to get to the event page where it happens, its not yet connected to a server.)

As divders it shows unavailable NaN.

Thanks for your help

[Kateryna Grynko]

Hi Yves,

We'll take a look.

[Kateryna Grynko]

Sorry, no updates yet. Working on it.