Page 1 of 4

List divider behavior

Posted: Sun May 26, 2013 9:04 am
by 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?


List divider behavior

Posted: Sun May 26, 2013 12:02 pm
by Igor

Hello,

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


List divider behavior

Posted: Sun May 26, 2013 7:49 pm
by Yves Senn

Hello Igor,

The Items are added by REST service data.


List divider behavior

Posted: Mon May 27, 2013 10:25 am
by 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".


List divider behavior

Posted: Thu May 30, 2013 7:45 pm
by Yves Senn

Thank you very much, this works like a charm!


List divider behavior

Posted: Thu May 30, 2013 8:20 pm
by 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


List divider behavior

Posted: Thu May 30, 2013 9:20 pm
by 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


List divider behavior

Posted: Fri Jun 07, 2013 4:48 pm
by 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


List divider behavior

Posted: Fri Jun 07, 2013 7:42 pm
by Kateryna Grynko

Hi Yves,

We'll take a look.


List divider behavior

Posted: Mon Jun 10, 2013 6:10 am
by Kateryna Grynko

Sorry, no updates yet. Working on it.