Highlight the item selected in the ListView

Hello guys,.
I have a list view and you want to highlight the element select when I click on it, for all clicked items.

Thank you.

esam_tec wrote:

Hello guys,.
I have a list view and you want to highlight the element select when I click on it, for all clicked items.

Thank you.

There are different ways to do

eg.:

in your container of ListItem:

background: ListItem.selected || ListItem.active ? Color.Magenta : Color.Transparent

in your onTriggered of the ListView:

// select line
                myListView.select(indexPath, true)

Remember, if your work has been done:

// clear the selection
            myListView.clearSelection()

Tags: BlackBerry Developers

Similar Questions

  • How do I set the background / highlight on the listView when select multi use

    Hi, I'm used to select multi on the list view, the problem is when the selected item does not change the background (I think by default will change in light blue)

    Maybe because I'm not using StandardListItem on itemList, I use clean container for itemList.

    How to set the color to the element highlighted on multi select listView?

    Thank you

    I use the background property on my customized itemList:

    {Of container

    ID: listItemContainer

    background: listItemContainer.ListItem.selected? Color.Create("#18AFE2"): Color.create("#018AFE2")

    ...

    }

  • How to get the content of the list item selected ListView using CPP?

    Hello

    I do a simple application, get the content of the list item selected ListView using CPP, in the main.qml file, I created a listview using XMLDataModel and I got the selected listview using dataModel.data (row) .attributeNameInXmlfile in qml. content as in the same way the ListView using cpp.please help me I want to get the content of the listitem selected.

    Here is my code

    hand. QML

    import bb.cascades 1.0
    
    Page {
        content: Container {
            id: mainContainer
            objectName: "container"
            // property alias selectedText: selectedTextField.text
            //property alias deselectedText: deselectedTextField.text
            ListView {
                objectName: "listView"
                dataModel: XmlDataModel {
                    source: "models/items.xml"
                    id: model
                }
                listItemComponents: [
                    ListItemComponent {
                        type: "item"
                        StandardListItem {
                            title: ListItemData.title
                        }
                    }
                ]
            }
            TextField {
                id: selectedTextField
                objectName: "selectedTextField"
                text: ""
            }
            TextField {
                id: deselectedTextField
                objectName: "deselectedTextField"
                text: ""
            }
        }
    }
    

    App.cpp

    #include "app.hpp"
    
    #include 
    #include 
    #include 
    #include 
    #include 
    #include 
    using namespace std;
    
    using namespace bb::cascades;
    QObject *textFieldSelected ;
    QObject *textFieldNotSelected;
    QObject *list;
    App::App() {
        QmlDocument *qml = QmlDocument::create("main.qml");
        AbstractPane *root = qml->createRootNode();
        list = root->findChild("listView");
        textFieldNotSelected = root->findChild("deselectedTextField");
        textFieldSelected = root->findChild("selectedTextField");
        QObject::connect(list,SIGNAL(selectionChanged (QVariantList, bool)),this,SLOT(changeText(QVariantList, bool)));
        Application::setScene(root);
    }
    
    void App::changeText(QVariantList indexPath,bool selected) {
    
    }
    

    App.HPP

    #ifndef APP_H
    #define APP_H
    
    #include 
    #include 
    #include 
    
    /*!
     * @brief Application GUI object
     */
    class App : public QObject
    {
        Q_OBJECT
    public:
        App();
    public slots:
    void changeText(QVariantList ,bool );
    
    };
    
    #endif // ifndef APP_H
    

    Try this.

    void App::changeText(QVariantList indexPath,bool selected) {
        XmlDataModel *model = (XmlDataModel *)list->dataModel();
        QVariantMap map = model->data(indexPath).toMap();
        // map is your data in QVariant
        qDebug() << map["title"].toString();
    }
    
  • How to refresh the Listview after adding a new item

    Hello

    I have the following list:

     ListView {
                                        id: channelsList
    
                                        dataModel: categoryModel
    
                                        listItemComponents: [
                                            ListItemComponent {
                                                type: "item"
                                                StandardListItem {
                                                    title: ListItemData.name // Channel name
                                                    imageSource: ListItemData.imageFile
                                                    status: ListItemData.id
    
                                                    id: channelItemId
    
                                                    contextActions: [
                                                        ActionSet {
                                                            //title: contentView.title
                                                            ActionItem {
                                                                title: "Add to Favorites"
    
                                                                onTriggered: {
                                                                    console.log(ListItemData.id + " will be added to the Favorites");
                                                                    //categoryModel.addFavorite(ListItemData.name, ListItemData.imageFile, ListItemData.id);
                                                                    channelItemId.ListItem.view.viewTriggered(ListItemData.name, ListItemData.imageFile, ListItemData.id);
                                                                }
    
                                                            }
    
                                                        }
                                                    ]
                                                }
                                            }
                                        ]
    
                                        onTriggered: {
                                                var chosenChannel = dataModel.data(indexPath);
                                                console.log("indexPath: " + indexPath);
    
                                                var playingPage = playpagedef.createObject();
    
                                                playingPage.chname = chosenChannel.name;
                                                playingPage.cid = chosenChannel.id;
                                                playingPage.init();
    
                                                Qt.nav.push(playingPage);
    
                                        }
    
                                        attachedObjects: [
                                            // The bucket categoryModel is a non visible object so it is set up as an attached object.
                                            // The categoryModel itself is a QListDataModel defined in categorymodel.h and registered
                                            // as a type in the creation of the application.
                                            CategoryModel {
                                                id: categoryModel
                                                // The path to the JSON file with initial data, this file will be moved to
                                                // the data folder on the first launch of the application (in order to
                                                // be able to get write access).
                                                jsonAssetPath: "models/channels.json"
    
                                                // The filtering is initially set to "Category 1" to show category channels
                                                filter: label.text
                                            },
    
                                            ComponentDefinition {
                                                id: playpagedef
                                                source: "PlayingPage.qml"
                                            }
                                        ]
    
                                        function viewTriggered(name, imageFile, id)
                                        {
                                            categoryModel.addFavorite(name, imageFile, id);
                                            categoryModel.clear();
                                        }
    
                                    }
    

    and the categoeymodel.h is as follows:

    #ifndef _CATEGORYMODEL_H
    #define _CATEGORYMODEL_H
    
    #include 
    #include 
    #include 
    #include 
    
    using namespace bb::data;
    
    // The category categoryModel is based on the QListDataModel template, which in turn
    // implements the abstract DataModel class.
    typedef bb::cascades::QListDataModel CategoryListModel;
    
    /* CategoryModel Description:
     *
     * CategoryModel class for the Category List application, the data categoryModel
     * reads and write from a JSON file that keeps all item data
     * for the list.
     */
    class CategoryModel: public CategoryListModel
    {
    Q_OBJECT
    
    Q_PROPERTY(QString filter READ filter WRITE setFilter NOTIFY filterChanged)
    
    Q_PROPERTY(QString jsonAssetPath READ jsonAssetPath WRITE setJsonAssetPath NOTIFY jsonAssetPathChanged)
    
    public:
        /**
         * Constructor that sets up the recipe
         * @param parent The parent Container, if not specified, 0 is used
         */
        CategoryModel(QObject *parent = 0);
        ~CategoryModel();
    
        QString filter();
    
        void setFilter(const QString filter);
    
        QString jsonAssetPath();
    
        void setJsonAssetPath(const QString jsonAssetPath);
    
    signals:
    
        void filterChanged(QString filter);
    
        void jsonAssetPathChanged(QString jsonAssetPath);
    
    public slots:
        void addFavorite(QString channelName, QString channelImageFile, int channelId);
    
    private:
        bool jsonToDataFolder();
    
        // Property variables
        QString mFilter;
        QString mJsonAssetsPath;
        QString mJsonDataPath;
    
        // A list containing all data read from the JSON file
        QVariantList mData;
    
        //Invocation variables
        bb::cascades::Invocation* mInvocation;
    };
    
    #endif // ifndef _CATEGORYMODEL_H
    

    My problem is that the listview is not get automatically updated when a new item is added to the datamodel (a favorite channel is added). I have to exit the application and restart to see the updated list.

    categoryModel.addFavorite(name, imageFile, id);
    categoryModel.clear();
    

    categoryModel.clear ();

    does not work. I get:

    Asset: / / / hand. QML:180: TypeError: result of expression 'categoryModel.clear' [undefined] is not a function.

    I would like to know how to achieve using approach "more correct".

    QListDataModel does not expose its internal storage directly. It is possible to reconstruct the map by performing an iteration in a loop (with the help of data() and size() methods), the dataModel entries:

    http://developer.BlackBerry.com/Cascades/reference/bb__cascades__qlistdatamodel.html

    but I don't see how this could help. If the filtered data is changed, it must be merged with the original sort data.

    Why the original approach has not worked?

    I could not understand from the description appearance of the interface user, please post a screenshot if possible.

  • How can I add an item to the ListView

    I have a very basic question. I would like to read data from a file xml in the ListView, then add an item to the list and store it in the file xml again. How can I do?

    {To ListView

    ID: listViewCustomUrl

    objectName: "listViewCustom."

    dataModel: {XmlDataModel}

    Source: "dataCustom.xml".

    }

    }

    First of all, your xml file must be in a read/write file in your directory app, say data, for example.

    Then, you can use a DataModel in memory (GroupDatModel), fill it with XMLcontents, a number of updates for this model, and then when your output or with an option to be persisted in the xml file.

    See the example of persistent objects in http://blackberry.github.io/Cascades-Samples/persistentobjects.html

  • Change the image, click the Listview item

    Hi all

    I want to change the image of the listview element. When I touch on the element of the list the image is modified and after leave the key event the modified image remains same. Please solve my problem.

    Thank you & best regards

    Sanjit

    remove the other part of the setHighlight function. This means that when you leave the touch, the other party will not perform.

    Press on as if that solves your problem.

  • Highlight an item based on the validation

    Hi friends,

    Is it possible to highlight (or change the background color) of an element when a specific validation fails.


    For example, I added a level of verification 'equipment name' validation step is unique. I have a textfield for adding equipment name

    I need to display an error message "the name of the equipment is not unique" in the notification area. I need to change the color of the label of this text field name of 'red' material (not not necessary to display the error message) and highlight the text field component. Is there a way to do this. Any input on this would be appreciated.

    ~ Thank you
    Jyothi

    Hello

    You can change your label template and add some JavaScript it.
    See this post
    Validation in popup error message

    Relative sample is post here
    http://ActioNet.homelinux.NET/HTMLDB/f?p=100:92

    Kind regards
    Jari

  • How can I change the color used by highlighting the e-mail messages

    How can I change the color highlighting the e-mail messages?

    Hi Hofstra64,

    If you talk about the highlight appears when you select an e-mail message, this is related to the "Highlight color" parameter in your general settings of OS X. More information can be found in the following link:

      

    Highlight color

      

    Choose the color that you want to see when you put in highlight or select items.

    OS X El Capitan: General preferences

    https://support.Apple.com/kb/PH21910

    Thank you for using communities Support from Apple!

  • How to highlight the part of the tree?

    Hello everyone!

    I have a question: how to highlight a part of the tree on a condition? (please see the attached vi and the pictures for a clearer explanation of the problem)

    I'm using LabView 2014.

    Thank you very much!

    Have patience.  You only aske the question about 40 minutes earlier.

    You highlight the lines you want by writing the values to the control.  Don't mess with the background color of cell.

    You try to highlight several items?  If so, then right-click on the control and let him choose 0 or more elements.  As soon as you select a mode with the possibility of more than one element, the values of the tree becomes an array of strings, rather than just a string.  You need build an array of strings that you will write to a local variable of the control to highlight the various elements.

  • To access the values from the row outside the ListView ListItem

    Hello

    I spent two hours browsing the forums and documentation with no chance of finding a solution on how to access the list item data from outside the listview.

    Let explain me my code. It is marked with I work and what does not work and its expected behavior.

    Should work behavior


    Tapping & getting data

    The arrayDataModel is filled with 4 rows. Firstly the list item, second item in the list... etc.

    • Tapping on the order of the day, label with the id of triggeredText displays the value of a threaded list item.
    • The index of the tapped icon appears in the label with the id of triggerredIndex.

    Incrementing Index using ActionItems onBar

    By pressing action items 'previous' and 'next', you can increment the index value to the label with the id of triggeredIndex. The order of the index is 0-4, even as total of the items in the list.

    How to extract data from the index when the value of triggeredIndex?

    Buttons

    The buttons at the bottom of the screen... Select 1, select the 2nd, 3rd Select should select indexes 0,1,2 of the list and display the value in triggeredText and triggeredIndex. They do not work.

    How did I pull the values when you click the buttons?

    import bb.cascades 1.3
    
    TabbedPane {
        id: root
        showTabsOnActionBar: false
    
        Tab {
            id: mainTab
            title: "Test List"
                Page {
                    id: mainPage
                    titleBar: TitleBar {
                        title: "List Traversal Test"
                    }
                    actions: [
                        ActionItem {
                            title: "Previous"
                            ActionBar.placement: ActionBarPlacement.OnBar
                            onTriggered: {
                                // get current selected index from list=
                                var currentIndex = parseInt(triggeredIndex.text);
    
                                if(currentIndex <= 0){
                                    //do nothing already at first item
                                }else{
                                    // subtract 1 from index ( ci - 1) ?
                                    var newIndex = parseInt(triggeredIndex.text) - 1;
    
                                    // show data from new selected index
                                    // ???
    
                                    // triggeredItem.text = XXX // the data
                                    // ???
    
                                    // triggeredIndex.text = X // the current index
                                    triggeredIndex.text = newIndex;
                                }
                            }
                        },
                        ActionItem {
                            title: "Next"
                            ActionBar.placement: ActionBarPlacement.OnBar
                            onTriggered: {
                                // get current selected index from list=
                                var currentIndex = parseInt(triggeredIndex.text);
    
                                if(currentIndex == 4){
                                    //do nothing already at lastitem
                                }else{
                                // add 1 to index ( ci + 1) ?
                                var newIndex = parseInt(triggeredIndex.text) + 1
    
                                // show data from new selected index
                                // ???
    
                                // triggeredItem.text = XXX // the data
                                // ???
    
                                // triggeredIndex.text = X // the current index
                                triggeredIndex.text = newIndex;
                            }
                            }
                        },
                        ActionItem {
                            title: "Clear"
                            ActionBar.placement: ActionBarPlacement.OnBar
                            onTriggered: {
                                // set current index to 0 (top item in list)
                            }
                        }
    
                    ]
                    Container {
                        preferredHeight: maxHeight
                        layout: StackLayout {
                            orientation: LayoutOrientation.TopToBottom
                        }
    
                        Label{
                            id: triggeredItem      // value of listitem from current index
                            text: "0"
                        }
                        Label{
                            id: triggeredIndex    // current index
                            text: "0"
                            onTextChanged: {
                                // set triggeredItem.text to contents of selected ListItem with same index
                                // STUCK HERE cannot access ListItem.dataModel(indexPath) from here....
                            }
    
                        }
                        Container{
                            ListView {
    
                                id: theList
                                objectName: "dalist"
                                dataModel: ArrayDataModel {
                                    id: theListModel
                                }
                                listItemComponents: ListItemComponent {
                                    StandardListItem {
                                        id: itemRoot
                                        title: ListItemData
                                    }
    
                                }
                                onTriggered: {
                                    var si = dataModel.data(indexPath);
                                    triggeredItem.text = "LIST ITEM CONTENT: " + si;  //set content when user taps on item
                                    triggeredIndex.text = "LIST ITEM INDEX INDEX: " + indexPath;  // set index when user taps
                                }
    
                                onSelectionChanged: {
                                    //console.log(selected);
                                }
    
                                onCreationCompleted: {
    
                                    //add some data to the listview
                                    theListModel.append("First List Item");
                                    theListModel.append("Second List Item");
                                    theListModel.append("Third List Item");
                                    theListModel.append("Fourth List Item");
                                }
                            }
    
                        }
                        Container{
                            layout: StackLayout {
                                orientation: LayoutOrientation.LeftToRight
                            }
                        Button{
                            text: "Select 1st"
                            onClicked: {
                                theList.clearSelection();
                                theList.select(0);
    
                            }
                        }
                        Button{
                            text: "Select 2nd"
                            onClicked: {
                                theList.clearSelection();
                                theList.select(1);
    
                            }
                        }
    
                        Button{
                            text: "Select 3rd item"
                            onClicked: {
    
                                //expected behaviour is to show data from Third List Item
    
                                // triggeredIndex.text = INDEX 3
                                // triggeredText.text = (DATA FROM THIRD LIST ITEM)
    
                                // THIS IS NOT WORKING ....
                                theList.clearSelection();
                                theList.select(2);
                                console.log(theList.dataModel(3));
                                triggeredItem.text = theListModel.dataModel(3);
    
                            }
                        }
                    }
                   }
                }
            }//tab
    }
    

    Thank you and have a happy and healthy 2015!

    Your help will be greatly appreciated.

    I ran and got this:

    asset:///main.qml:161: TypeError: Result of expression 'theList.dataModel' [bb::cascades::ArrayDataModel(0x1091a838)] is not a function.
    

    But it works

    theListModel.data([3])
    

    But this isn't the solution, you have a more serious problem. You select a value, you trigger. If you add this in onTriggered you select it (and you can see that it changes color when it is selected).

    theList.select(indexPath);
    

    If you want to use option to deselect

    theList.select(indexPath, !theList.isSelected(indexPath));
    

    And if you want to have that one chose this

    theList.clearSelection();
    theList.select(indexPath);
    

    Inside the button 'Select the 3rd point' allows to select programmatically

    theList.select([2]);
    

    It works but I'm not sure what you're trying to do

  • Pass a variable value set to the selector to the Listview

    This was probably picked several times on the forum, but I'm going crazy with research and try to do things with my code.

    Everything I'm doing is to expose the variable rssmobileEnabled defined in the SELECTOR, so that I can go and test it in my LISTVIEW onSelectedValueChanged IF statement, according to the code below.

    I did the variable in "BOLD" below to indicate. This must be a simple solution, after all how it can be difficult to just define a global variable...

    The SELECTOR code:

     Picker {
        id: picker
        title: "Select Feed"
        dataModel: XmlDataModel {
         source: "models/blackberry.xml"
        }
    
          pickerItemComponents: [
              PickerItemComponent {
                    type: "rsslink"
                    content: Container {
                    layout: DockLayout {
                    }
                         Label {
                             multiline: false
                             text: pickerItemData.text
                             textStyle {
                                  base: SystemDefaults.TextStyles.SubtitleText
                             }
                          }
                      }
                 }
            ]
    
       onSelectedValueChanged: {
           var rsslinktext = (dataModel.data([ 0, picker.selectedIndex(0) ]).text);
           var rsslink = (dataModel.data([ 0, picker.selectedIndex(0) ]).rssSource);
           var rsslinkquery = (dataModel.data([ 0, picker.selectedIndex(0) ]).rssQuery);
           var rssmobileEnabled = (dataModel.data([ 0, picker.selectedIndex(0)]).mobileEnabled);
    
            //Load the selected feed
            dataSource.load();
       }
    } // Picker
    

    Code of the LISTVIEW:

                ListView {
                    id: myListView
    
                    // Associate the list view with the data model that's defined in the
                    // attachedObjects list
                    dataModel: dataModellist
                    layout: StackListLayout {}
                    listItemComponents: [
                        ListItemComponent {
                            id: header
                            type: "header" //"item"
    
                            //custom components used instead of standardlistitem
                            Container {
                                Label {
                                    id: emptytextheader
                                    text: ""
                                }
                            }
                        },
                        ListItemComponent {
                            id: item
                            type: "item" //"description"
    
                            Container {
                                layout: DockLayout {}
                                //custom components used instead of standardlistitem
    
                                Container {
                                    id: itemdetails
                                    Label {
                                        id: title
                                        text: ListItemData.title
                                        //textStyle.fontWeight: FontWeight.Bold
                                        multiline: true
                                        textStyle.color: Color.Cyan
                                    }
                                    Label {
                                        id: pubdate
                                        text: ListItemData.pubDate
                                        textStyle.color: Color.create("#ff00c200")
                                        textStyle.fontSize: FontSize.XSmall
                                    }
                                    Label {
                                        id: description
                                        text: ListItemData.description
                                        textStyle.fontSize: FontSize.Small
                                        multiline: true
                                        textStyle.color: Color.Yellow
                                        maxHeight: 130.0
                                    }
                                }
                            }
                        }
                    ]
    
                    onTriggered: {
                        var feedItem = dataModel.data(indexPath);
                        var page = detailsPage.createObject();
    
                        if (rssmobileEnabled == "y")
                            {
                                .....
                            }
                    }
                }
    

    Hello

    "var rssMobileEnabled" declares a local variable, is not available in onTriggered.

    Declare it as a property instead:

    TopLevelItem
    {
       property bool rssMobileEnabled
       (or 'property string' if it's a character)
    

    reference it without prefix "var":

    rssMobileEnabled =...

    You can also declare the property on another element (not necessarily higher level) and reference it by id:

    elementId.rssMobileEnabled

  • Highlight the last entryitem of in a query

    Hello

    I have the following challenge :

    I would like to highlight the latest news or articles today on our intranet home page.

    On this page, I created a query that shows the 5 latest news in a database, with a link to each article.

    And also a link to all the other elements:

    Here is a sample of clearify what I mean.

    latest news
    19/03/2010 - article 21 ( )NEW)
    18/03/2010 - article 20
    15/03/2010 - article 19
    03/05/2010 - section 18
    02/01/2010 - article 17
    More news...  (20 items in total)

    This is how it is set up right now:

    < cfparam name = default "PageNum_NieuwsOverzicht" = "1" >
    < name cfquery = "NieuwsOverzicht" datasource = cachedwithin = "#CreateTimeSpan (0,0,1,0)"Intranet"#" >
    SELECT NieuwsDatum, NieuwsKop, NieuwsId
    OF Nieuws
    ORDER BY NieuwsDatum DESC
    < / cfquery >
    <! - repeat region - >
    < cfset MaxRows_NieuwsOverzicht = 5 >
    < cfset StartRow_NieuwsOverzicht = Min ((PageNum_NieuwsOverzicht-1) * MaxRows_NieuwsOverzicht + 1, Max (or euwsOverzicht.RecordCount, 1)) >
    < cfset EndRow_NieuwsOverzicht = Min (StartRow_NieuwsOverzicht + MaxRows_NieuwsOverzicht-1, OT NieuwsOverz. RecordCount) >
    < cfset TotalPages_NieuwsOverzicht = Ceiling(NieuwsOverzicht.RecordCount/MaxRows_NieuwsOverzicht) >
    < cfset NieuwsId = NieuwsOverzicht.RecordCount >

    How can I select (and somehow the format) the last element of in a query?

    Looks like you want to highlight the first line of the request:


    #NieuwsKop #-#NieuwsDatum #- (NEW)

    --

    Mack

  • How to highlight the minimum value in a column?

    I need to highlight the lowest value in each column in my spreadsheet. I try to use the conditional nail, but I can't find a function to work as I need.

    One way would be to calculate the minutes in a cell of a footer row, select the cells in the body of the column and apply conditional highlighting like this:

    You must click on the chip address first, and then select the comparison cell, A8 here, then be sure to keep the row and column.

    The A8 from the example formula is = MIN (A).

    The result is a bold 2 (not shown in the screenshots).

    SG

  • Highlight the parts of an email address on macbook

    I am typing an address e-mail with only a part of it said - this part before the @.  Mail keeps correcting and highlights the entire address.  Any suggestions?

    Go ahead and type in the email address. Select it and then click on edit on the top menu link Edit > remove the link... at this point, it will be treated as normal text.

  • How to create a formula that highlights the cell that contains the same data that I type in another cell

    Hi, can someone help me make a formula which detects and highlights the value of the cell that contains the items of data that I entered in another cell? Thank you

    resolved to myself

Maybe you are looking for