GroupingFunction + Collpase with tkGroupTemplate

[PabloPG]

Please take a minute to read our NativeScript Code of Conduct before proceeding with posting issues or discussing. The purpose of this guide is to make communication and cooperation within our forums a pleasure for you and the other members.

Please, provide the details below:

I am using the "enbleCollpasibleGroups" method and need to create a custom template, however the "tkGroupTemplate" works only for group without the collapse

Tell us about the problem

GroupingFunction + Collpase with tkGroupTemplate

Which platform(s) does your issue occur on?

Both

Please provide the following version numbers that your issue occurs with:

• Progress NativeScript UI plugin version: "nativescript-ui-listview": "^6.1.0",
• CLI: 5.3.4
• Cross-platform modules: "tns-core-modules": "~5.2.0",
• Runtime(s):

Please tell us how to recreate the issue in as much detail as possible.

1. Listing dataItems with options: groupingFunction + enableCollapsibleGroups
2. Use tkListItemTemplate + tkGroupTemplate
3. The tkGroupTemplate dont work

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

<RadListView [items]="dataItems" #myListView [groupingFunction]="myGroupingFunc" enableCollapsibleGroups="true">

    <ng-template tkListItemTemplate let-item="item">
        <card-servico-component [servico]="item"></card-servico-component>
    </ng-template>

    <ng-template tkGroupTemplate let-horario="category">
        <Gridlayout rows="*" columns="*" height="47" class="time-header">
            <FlexboxLayout justifyContent="space-between" alignContent="center" alignItems="center">
                <Label class="hora" [text]="horario"></Label>
                <Label class="total-servico" [text]="totalServicosPorHora(horario)"></Label>
            </FlexboxLayout>
        </Gridlayout>
    </ng-template>

</RadListView>

[tsonevn]

Hi @PabloPG, I tested the described scenario with our sample application, however, I was unable to recreate an issue. Can you sen us a sample project, which demonstrates, the problem you are facing?

[PabloPG]

hi @tsonevn I created a test on the playground (https://play.nativescript.org/?template=play-ng&id=L9SE3q&v=2). I just discovered that by using the toggle function the collapse works using the template, but if you initialize the project using enableCollapsibleGroups='true' it does not work.

[PabloPG]

@

hi @tsonevn I created a test on the playground (https://play.nativescript.org/?template=play-ng&id=L9SE3q&v=2). I just discovered that by using the toggle function the collapse works using the template, but if you initialize the project using enableCollapsibleGroups='true' it does not work.

I closed unintentionally

[tsonevn]

Hi @PabloPG, Thank you for the provided sample. I tested it on my side and find that there is one extra bracket(]) defined in the HTML. If you replace enableCollapsibleGroups]="true" with enableCollapsibleGroups="true", the option should be enabled properly. Check out the here the project with the needed edits. I have tested the project on Android API level 28.

[PabloPG]

Hello, Maybe I explained it wrong and I ended up leaving a ] in the example, but what happens is this: If you use enableCollapsibleGroups="true" the template tkGroupTemplate does not style the collapse header.

What I found out by setting the example was: if you use enableCollapsibleGroups="true" with a variable (like my example [enableCollapsibleGroups]="isCollapseEnabled") with default value true then after loading the list, set this variable to false, the collapse continues working (that is good) and the style of the header will be in agreement with the template (that is good).

[tsonevn]

Hi @PabloPG, I understood what is the exact case. Currently, thetkGroupTemplate styling is not supported. I will log it as a feature request. For now, I would suggest keeping track of the issue for further info.

[PabloPG]

any news?