Another look at the Telerik RadListView For NativeScript

Telerik put out release 2 of their Telerik UI at the end of October and I blogged about it here.

There was a number of issues with it, that preventing me from using it to the full potential and I am happy to be able to say, these have almost all been fixed in release 3.

Important fixes in release 3.

1. Any elements you have bound in the itemtemplate now reflect changes from your model.
2. The ListViewLayout can now be changed programatically and the changes are reflected by the UI.
3. The ItemTap event used to be triggered twice when you tapped on an item, this has been resolved, so it can now be used as expected.
4. Scrolling too fast would result in errors

New Functionality in release 3

1. A new API for managing selection
2. Ability to block UI updates while you do changes to the source collection which results in better performance.

Making a Grid that resizes on screen rotation and different device sizes

The ListViewGridLayout option allows you to set the number of items displayed as columns or rows (depending on the scroll direction). At this stage, it hasn't been designed for fixed width columns with a varying number of columns, but you can do this programatically by determining the screen dimensions using the platform module and listening for changes using the application module (fix 2 above).

// Monitor for orientation changes

   application.on("orientationChanged", (args: application.OrientationChangedEventData) => {
            this.resetRadListView();
        });

......

 public resetRadListView() {
        var displayMode = applicationSettingsHelper.getDisplayMode();

        // Grid View Mode

        if (displayMode == 0) {

            // Determine number of images that can be displayed

            var deviceWidth = platform.screen.mainScreen.widthPixels / platform.screen.mainScreen.scale;
            var spanCount = Math.round(deviceWidth / 82);
            var gridLayout = new radListView.ListViewGridLayout();
            gridLayout.spanCount = spanCount;
            gridLayout.scrollDirection = "Vertical";
            this.galleryRadListView.listViewLayout = gridLayout;
            this.galleryRadListView.backgroundColor = new color.Color("Black");

        // List View Mode

        } else {
            var linearLayout = new radListView.ListViewLinearLayout();
            linearLayout.scrollDirection = "Vertical";
            this.galleryRadListView.listViewLayout = linearLayout;
            this.galleryRadListView.backgroundColor = new color.Color("White");
        }
        this.galleryRadListView.items = this.observableExerciseRecordsVisible;
        this.galleryRadListView.refresh();
    }

So on my Galaxy Note 4, it displays 4 images across in portrait mode and 8 images across in landscape mode, as can be seen below.

PORTRAIT

LANDSCAPE

Making the RadListView perform different actions on Press and LongPress

There is a ItemTap event which you can you use to do the first action. I have used this to indicate selection of records in the model. This displays a green tick in the image (fix 1/3 above).

export function itemTap(args: radListView.ListViewEventData) {
    model.galleryViewModel.itemToggle(args.itemIndex);
}

SELECTED

There is no LongPress event available, but you can do this by using the new built in selection functionality with selectionBehavior set to LongPress. This displays a popup window with the exercise detail. After selection, you need to programatically deselect it again.

export function itemSelected(args: radListView.ListViewEventData) {
    model.galleryViewModel.itemDisplay(args.itemIndex);
    listView.deselectItemAt(args.itemIndex);
}

POPUP

Different Views

Adding to our settings section the ability to choose three different RadListView layouts.

1. Images Grid (as above)
2. Rows with image and title
3. Rows with image and full text

This way the user can decide to select exercises in the way they are most comfortable.

Known Issues

If you use the ScrollToIndex option in GridView layout, it sometimes does not repaint the UI correctly. I have raised a ticket for this and hopefully it will be fixed in the final version coming out in March.