How to select some items of radlistview by default on load?

[Rajasekar]

Somewhere i read in nativescript forum that keeping a property called 'isSelected' in our object and checking if it is true to make the item look selected.

<RadListView [items]="memberList" row="1" selectionBehavior="Press" multipleSelection="true" (itemSelected)="itemSelected($event)" (itemDeselected)="itemDeselected($event)"><br>                    <ng-template tkListItemTemplate let-item="item" let-i="index"><br>                        <GridLayout columns="*, 20" rows="*" [class.selected]="item.isSelected===true" class="selectControl"><br>                            <Label [class.selected]="item.isSelected===true" col="0" class="unselected"  [text]="item.text"></Label><br>                            <Image [visibility]="item.isSelected===true ? 'visible' : 'hidden'" src="~/images/check.png" col="1"></Image><br>                        </GridLayout><br>                    </ng-template><br>                </RadListView>

But my question is, i can do that and the item gets the look (UI) of selected item. But when i click on it first time, itemSelected event is firing and not itemDeselected.

How can I make nativescript know that it is already a selected item?

[Nick Iliev]

Hi Rajasekar,

Thank you for your interest in NativeScript and in nativescript-telerik-ui plugin. Before all, I want to point out that there was a small fix related to itemSelecting and returnValue which is already addressed and the fix will be available with the next official release. Meanwhile, you can test the fix with our@next version.

tns plugin remove nativescript-telerik-ui-pro
tns plugin add nativescript-telerik-ui-pro@next

That said in the lines below we will cover how to detect if list view cell has been selected and how to manage all selection-related events. For your convenience, we have created this sample application to best demonstrate the selection events. The application is using the base Angular template with RadListView and itemSelecting, itemSelected and itemDeselected events,

To prevent a cell from being selectable yu will need to access itemSelecting event and set returnValue to false.  When this is done the event itemSelected will never fire as the cell will not be selectable at all.

Consider the example given in the test application above.

items.component.html

<RadListView [items]="items" selectionBehavior="Press" multipleSelection="true"
(itemSelecting)="itemSelecting($event)" (itemSelected)="itemSelected($event)" (itemDeselected)="itemDeselected($event)">
    <ng-template tkListItemTemplate let-item="item">
        <StackLayout orientation="vertical">
            <Label [text]="item.name" class="list-group-item"></Label>
        </StackLayout>
    </ng-template>
</RadListView>

items.component.ts

itemSelecting(args: ListViewEventData) {
    console.log("Item selecting!");
    console.log("itemIndex: " + args.itemIndex);
    console.log("groupIndex: " + args.groupIndex);
    console.log("returnValue: " + args.returnValue); // true by default

    if (args.itemIndex > 5) {
        args.returnValue = false; // all items with index > 5 WONT be selectible
        console.log("returnValue: " + args.returnValue); // false
    }

}

itemSelected(args: ListViewEventData) {
    console.log("Item selected!");
    console.log("itemIndex: " + args.itemIndex);
    console.log("groupIndex: " + args.groupIndex);
}

itemDeselected(args: ListViewEventData) {
    console.log("Item deselected!");
    console.log("itemIndex: " + args.itemIndex);
    console.log("groupIndex: " + args.groupIndex);
}

Note that in the example above in itemSelecting we are setting returnValue = false to all items with an index greater than five. Now, these items won't be selectable and itemSelected will never fire for them.
On the contrary, the items with index equal or less than five will be selectable and the itemSelected event will fire. For those items, itemDeselected will also fire when the user deselects the chosen item.

Regards,
Nikolay Iliev
Telerik by Progress

[Rajasekar]

I'm very sorry to say that you misunderstood the post. I'm not worried about disabling items.

Imagine I just have 10 items in an array. In that 3 of the item's 'isSelected' property is true and other 7 item's 'isSelected' property is false.

I just want to set the three items with class 'active' by default. 

Im able to do this with template binding condition

<Label [active]="item.isSelected" text="list item"></Label>

 

My only concern is, when i click on one of the three selected item, 'itemSelected' event is firing instead of 'itemDeselected'

Please help.

[Nick Iliev]

Hey Rajeskar,

Based on your code I have revised the sample application to use the isSelected property from the item model. To change the default style of all items that has isSelected set to true the best approach is to use the Angular ngClass.  However, keep in mind that overwriting the default selected class will also remove the ripple effect in Android.

Here are the steps I have taken to implement both the CSS class selected and the visibility for items with the isSelected set to true.

First in the CSS file declared the styles selected and non-selected

.selected {
    background-color: green;
}

.non-selected {
    background-color: red;
}

Then in the HTML file used the ngClass with a ternary operator

<RadListView [items]="items" selectionBehavior="Press" multipleSelection="true" (itemSelected)="itemSelected($event)" (itemDeselected)="itemDeselected($event)">
    <ng-template tkListItemTemplate let-item="item" let-i="index">
        <GridLayout columns="*, *, *" rows="40" [ngClass]="item.isSelected ? 'selected' : 'non-selected'" >
            <Label col="0" [text]="item.id"></Label>
            <Label col="1" [text]="item.name"></Label>
            <Label col="2" [text]="item.role" [visibility]="item.isSelected ? 'visible' : 'collapsed'"></Label>
        </GridLayout>
    </ng-template>
</RadListView>

Notice ngClass with the ternary operator syntax

[ngClass]="item.isSelected ? 'selected' : 'non-selected'"

If item.isSelected is equal to true it will load CSS class selected otherwise it will load non-selected CSS class. Few lines below the same ternary operator is used with visibility

[visibility]="item.isSelected ? 'visible' : 'collapsed'"

Notice that the option for non-showing the layout is collapsed and not hidden as in your original snippet.
With all this done now the items marked as selectable will load green with all items visible and the others with the isSelected set to false will load in red with the third label collapsed.

With this implementation the original events will fire as expected - itemSelected will fire and then second tap on that item will fire the itemDeselected. However, it will not change the new styles so you should explicitly set the isSelected (using args.itemIndex) with these events and this way take care of your styling and visibility.
e.g. based on this sample code

itemSelected(args: ListViewEventData) {
    this.items[args.itemIndex].isSelected = true;
}

itemDeselected(args: ListViewEventData) {
    this.items[args.itemIndex].isSelected = false;
}

Regards,
Nikolay Iliev
Telerik by Progress

[Rajasekar]

Hi Nikolay

 

Thanks for your patience in explaining.

You are very close now. Whatever you have explained is what I have done and it is working fine until this part.

On page load, the 'selected' class is perfectly applied to the list items which have 'isSelected' = true and the item looks selected. But when I click on those item, i expect nativescript to fire itemDeselected event since it is already in selected state. But instead it is firing itemSelected event.

 

[Rajasekar]

Any update on this?

[Nick Iliev]

Hi Rajasekar,

The test application used to demonstrate the item selection and deselection is firing both itemSelected and itemDeselected as expected even when using your XML template for the RadListView (send in the first post of this ticket).
As we don't have access to your actual project which is not firing the event I would suggest checking your code behind fallbacks methods (itemSelected() and itemDeselected()) and how they ar implemented. You can also create a log or alert dialog to ensure that the events are firing or not like done here.
Your XML looks fine (note: there is no <br> tag in NativeScript) so I guess the reason for your issue is hidden in your code behind files - if you are still experiencing troubles please send us a link to full project reproducing this issue so we could investigate further.

Regards,
Nikolay Iliev
Telerik by Progress

[Rajasekar]

In your example, "Ter Stegen" has 'isSelected' property 'true' on page load. But when you click on it first time, 'itemSelected' event is firing instead of 'itemDeselected' event.

Basically i want, whatever items which are having isSelected true on page load, when i click on those items first time, it should fire itemDeselected event.

 

If you want me to give a simple example in html. If we have a checkbox, which is selected by default on page load, when we click on it first time, we would want uncheck event to trigger instead of check event.

[Nick Iliev]

Hey Rajesekar,

Excuse me for the long posts and snippets- I was now able to understand exactly what the issue you are dealing with is!. To overcome this scenario we need to use the selectItemAt method provided for RadListView and explicitly set the selection state for our selected cells programmatically.
To do this use the loaded event for your list view and then explicitly mark all cells you want to be selected by default.
e.g.

radListLoaded(args: ListViewEventData) {
    var listView = args.object;
    console.log("itemSelected'");

    listView.selectItemAt(0); // index based on the isSelected property value
    listView.selectItemAt(2);
    listView.selectItemAt(4);
    listView.selectItemAt(6);
}

and in the HTML file add the loaded event

<RadListView (loaded)="radListLoaded($event)">

I have updated my test application implementing the method so now "Ter Steven" will fire itemDeselecting on the first tap. You can also find an extended example on how to control programmatically your selections in this sample.

Regards,
Nikolay Iliev
Telerik by Progress

[Rajasekar]

Thank you so much. it worked

But is there any attribute something like 'selected' to be assigned through UI ?

 

For Eg.,

<ng-template tkListViewHeader>
<GridLayout columns="*, 15" rows="*" [selected]="someboolean == true"> // if that boolean is true the item gets automatically selected
<Label col="0" text="All"></Label>
<Image src="~/images/check.png" col="1"></Image>
</GridLayout>
</ng-template>

 

[Nick Iliev]

Hello Rajasekar,

Yes, you can create your own variables in Angular apps in the ng-template.
For example, you can reuse the isSelected boolean property and assign it to the UI like this:

<ng-template tkListItemTemplate let-item="item" let-i="index" let-isSelected="item.isSelected">
    <GridLayout columns="*, *, *" rows="40" [ngClass]="isSelected ? 'selected' : 'non-selected'" >

I have modified the sample application o include this logic Angular comes with some predefined let variables like odd, even and index which can be used will all structural directives like ngFor and with ListView. Examples can be found here. Or you can create even more complex to use in your UI - an example of creating a custom Angular let is shown in this example.

Here we are creating a let called third

<ListView [items]="countries (setupItemView)="onSetupItemView($event)">
       <ng-template let-country="item" let-third="third">

The logic what third do is created here

onSetupItemView(args: SetupItemViewArgs) {
    // further customisation can be achived with SetupItemViewArgs
    // example for creating a variable for each third element
    args.view.context.third = (args.index % 3 === 0);
}

Depending on what you want to achieve you can either directly create a boolean variable and use it with ngClass or use setupItemView and provide a callback for extended logic.


Regards,
Nikolay Iliev
Progress Telerik