Skip to Content

Combo Box for 1 column of sap.m.table having multiple selection possible

Hi,

I have a requirement in which i have to make 1 column of my sap.m.table combo box having multiple selection. I have made it normal combo box having static values stored in the Model. But how can i make it multiple selection.

Let me give you an example.

Say suppose my combo box is having 5 values. {"John","Kelsey","Brain","Eena","Emily}.

Now if the User has selected "John" from the combo box, then the column will hold "John". --> Plain simple requirement ( It is happening, so no worries)

But if the user has selected John, Brain & Eena. Then in the column i have to show like below ( Functional team suggested 2 options).

-John more..

-3 People

Strange requirement but i have to complete this 😔.

I am using sap.m.table as my table & using XML views.

Any suggestion or logic or code will be welcome.

Regards,

Rohit

Add a comment
10|10000 characters needed characters exceeded

Assigned Tags

Related questions

6 Answers

  • Best Answer
    Posted on Jun 04, 2016 at 08:00 AM

    Hi Rohit,

    Instead of Combo Box, use a MultiComboBox control.

    Sample: SAPUI5 Explored

    API: JsDoc Report - SAP UI development Toolkit for HTML5 - API Reference - sap.m.MultiComboBox

    Regards,

    Sai Vellanki.

    Add a comment
    10|10000 characters needed characters exceeded

  • Posted on Jun 22, 2016 at 01:29 AM

    Hello Guyz,

    Please any help here.

    I need to implement this but multicombo box is not helping. It is populating all the values when selected (which is not the intend)

    In my sap.m.Table, there is 1 column which says People.

    The column size will be fixed. It should have have search help like above.

    When there is nothing selected from the list. The column field should show 0 Person and there is 1 selected, then 1 Person....so on.

    And we should be able to save this value in the same model.

    Please give some help over here.

    Regards,
    Rohit


    People.PNG (5.0 kB)
    Add a comment
    10|10000 characters needed characters exceeded

    • HI Rohit,

      If u want to display "4Person" in the combobox then in the selection function of u please try this code:

      mcmb:function(evt){

      var a = evt.oSource.getSelectedItems().length;

      var text = (a+"person");

      sap.ui.getCore().byId("persons").setValue(text);//persons is the id of multicombobox

      }

  • Posted on Jun 22, 2016 at 06:30 AM

    HI Rohit,

    If u want to display "4Person" in the combobox then in the selection function of u please try this code:

    mcmb:function(evt){

    var a = evt.oSource.getSelectedItems().length;

    var text = (a+"person");

    sap.ui.getCore().byId("persons").setValue(text);//persons is the id of multicombobox

    }

    Add a comment
    10|10000 characters needed characters exceeded

  • author's profile photo Former Member
    Former Member
    Posted on Jun 22, 2016 at 07:53 AM

    Hi Rohit,

    Please try this.

    var SelectedNames = sap.ui.getCore().byId("...MultiComboBoxId....").getSelectedKeys();

    var j = SelectedNames.length;

    for (var i = 0; i< j ; i++)

    {

    var nameString = SelectedNames[i];

    /*get the selected names in the nameString and pass in the model as needed*/

    }

    Hope this helps.

    Thanks & Best Regards,

    Venkatesh Sora

    Add a comment
    10|10000 characters needed characters exceeded

  • Posted on Jun 22, 2016 at 08:32 AM

    Hi Rohit,

    May be MultiInput control will fulfill your requirement. But, user has to type ahead to fetch the items.

    Will this sample help? Plunker

    Working Snip:

    Regards,

    Sai Vellanki.


    Capture.gif (221.9 kB)
    Add a comment
    10|10000 characters needed characters exceeded

  • Posted on Jul 28, 2016 at 12:29 AM

    Hello,

    Thanks for some helpful response. I did use few things mentioned by you. But still 1 bit is missing.

    I have this multi combo box inside the table.

    <MultiComboBox items="{PersonModel>/listitems}" placeholder="{LocalModel>People_display}" selectedKeys="{LocalModel>Name}" selectionChange="selectPeople" selectionFinish="selectPeopleFinish"

    showValueStateMessage="false" width="100%">

    <c:Item key="{PersonModel>Pernr}" text="{PersonModel>Stext}"/>

    </MultiComboBox>

    As you can see above, I am using selectPeopleFinish as my event when the user is done with selection.

    Cotroller.js

    selectPeopleFinish: function(oEvent) {

    // Store all the Keys

    var names = []; // Storing all the keys to names array

    // Count the Number of Person

    var a = oEvent.getSource().getSelectedItems().length;

    var text = (a + " Person");

    this.getView().getModel("LocalModel").getProperty(oEvent.getSource().getParent().getBindingContext("LocalModel").getPath()).People_display = text;

    this.getView().getModel("LocalModel").refresh();

    // Clear the Seleced Keys

    oEvent.getSource().removeAllSelectedItems();

    },

    I am setting the placeholder as the number of persons in the drop down.

    My intention is to trigger the event when the User is clicking again the dropdown button of that field.

    In that event i will add all the saved keys. By this way I can complete my requirement.


    How to trigger the event ?

    How to use onBeforeRenderingPicker ?

    Any suggestion will surely help

    Thanks,

    Rohit

    Add a comment
    10|10000 characters needed characters exceeded

Before answering

You should only submit an answer when you are proposing a solution to the poster's problem. If you want the poster to clarify the question or provide more information, please leave a comment instead, requesting additional details. When answering, please include specifics, such as step-by-step instructions, context for the solution, and links to useful resources. Also, please make sure that you answer complies with our Rules of Engagement.
You must be Logged in to submit an answer.

Up to 10 attachments (including images) can be used with a maximum of 1.0 MB each and 10.5 MB total.