Parent child relationship for a Dropdown Box in UI Table

[Aisurya]

In this blog I will share the header item relationship  for Dropdown Box in a UI Table . Take an example like there are two Dropdown Boxes i.e One Header and other is Item Dropdown Box . When an header item is selected from Header part the corresponding items will be added in the Item Dropdown box.

It is easy in Normal case but a bit tricky if the Dropdown Boxes are in a UI Table , i.e When a header item is selected in any row of the UI Table then the corresponding Child Items will be added in the item Dropdown box of the same row. No other Dropdown boxes would be affected only corresponding rows will be affected.

I will explain  the above scenario with a simple example .

Scenario :    When a header item is selected in any row of the UI Table then the corresponding Child Items will be added in the item Dropdown box  of the same row only.

Below is an Array of Header-Items in a tabular format for simple understanding.

Header-Item Array :

Drop down boxes in UI Table

     Fig (b) : Header Items are filled in First column . I have maintained three header items as per the Array.

    Fig (c) : When  “Vegetables” is selected in the Header Part , corresponding child items are added in the same row .

     Fig (e) :  When “Fruits” is selected in the Header Part , corresponding child items are added in the same row.

     Fig ( f ) : Now  I changed the  “Fruits” to “Animals”  in the Header Part , corresponding child items are added in the same row .

Code Base  of  the example

Declaration of Array and Values

 var aData = [ ];
       aData.push({"header": "Vegetables" , "item" : "Potato"});
       aData.push({"header": "Vegetables" , "item" : "Brinjal"});
       aData.push({"header": "Vegetables" , "item" : "Cabbage"});
       aData.push({"header": "Vegetables" , "item" : "Tomato"});
       aData.push({"header": "Fruits" ,     "item" : "Apple"});
       aData.push({"header": "Fruits" ,     "item" : "Orange"});
       aData.push({"header": "Animals" ,    "item" : "Lion"});
       aData.push({"header": "Animals" ,    "item" : "Tiger"});
       aData.push({"header": "Animals" ,    "item" : "Deer"});
       aData.push({"header": "Animals" ,    "item" : "Zebra"});

Creation of UI Table

 var oTable = new sap.ui.table.Table({

              title: "Header-Item example in Dropdown Box",

              visibleRowCount: 3,

              firstVisibleRow: 3,

              width: "500px",

              selectionMode: sap.ui.table.SelectionMode.Single             

                                  });                       

Adding of First column i.e. Header column into the table

       //Add first column to the UI Table

       var oColumn1 = new sap.ui.table.Column({

              label: new sap.ui.commons.Label({text: "Header"}),

              template: new sap.ui.commons.DropdownBox("header_drop",

                           {

                     tooltip: "Header Part",                                      

                     items: [

                             new sap.ui.core.ListItem({text: ""}),

                             new sap.ui.core.ListItem({text: "Vegetables"}),

                             new sap.ui.core.ListItem({text: "Fruits"}),

                                  new sap.ui.core.ListItem({text: "Animals"})    

                             ],

                  change:function(event){

                                          fill_child_items(event);

                                         }

                           })        

                                         });

oTable.addColumn(oColumn1);

Adding of Second column i.e. Item column  into the table

//Add Second column to the UI Table     

var oColumn2 = new sap.ui.table.Column({

              label: new sap.ui.commons.Label({text: "Items"}),

             template: new sap.ui.commons.DropdownBox("item_drop")               

       });

       oTable.addColumn(oColumn2);

A function for Filling Child items

function fill_child_items(event){

// Current selected value in the Header Drop down box                    

var selected_hdr = event.getParameter("newValue") ;

// Current row index

var current_rowindex = event.getParameter('id').substring(event.getParameter('id').length-1);

// ID of the item Dropdown .

var item_dropdown_id = "item_drop-col1-row"+current_rowindex;

// Removing all items from the child Drop down

sap.ui.getCore().byId(item_dropdown_id).removeAllItems();                                  

// Adding child items  to Item Dropdown

     for (var i=0 ; i< aData.length ; i++)

                    {

                              if(selected_hdr == aData[i].header)

                                         {

                                         var oItem = new sap.ui.core.ListItem();

                                         oItem.setText(aData[i].item);

                                         sap.ui.getCore().byId(item_dropdown_id).addItem(oItem);

                                         console.log(aData[i].item);

                                         }

                    }

                                                          };

Note : For every UI element added in the UI table , there is always a unique ID generated by table itself for each row .

Example : I have a “Dropdown”  in the 2^nd column , given its id as “item_drop”  in design time .

Now in run time the id is automatically generated with the combination of Colum index and row index .

So for first row the ID of the Dropdown will be “item_drop-col1-row0”.

“col1” is column index for Dropdown .

“row0” is the row index for Dropdown.

Similarly for second row the id will be “item_drop-col1-row1” .

Below image describes the ID generation in the Table :

[Former Member]

Nice Blog!!!

[Former Member]

Very useful,

Now I am using this concept and codes in my project and it's gonna save a lot time for me.

[Former Member]

Good work !!

[Former Member]

Very Helpful.

Congrats for being one of the Top Blogs in SCN  :smile:

[former_member182534]

Hi Aisurya,

Very Usefull blog explains every minute detail.

Do post more blogs to help developers.

Congrats for being one of the Top Blogs in SCN.

Happy Writing....

Best Regards

Piyas Kumar Das

[ChrisSolomon]

Nice write up! I had to do something similar years ago for a non-SAP client (big automobile dealer). There's was a bit more complex, but same idea..... type of vehicle (car, truck, SUV, etc), make (BMW, Ford, Infinity, Audi, etc), and model....3 levels....it was "interesting". haha Nice blog and keep it up!

[Former Member]

Nice Document Very Help full explains detail clearly

[Aisurya]

Thanks Christopher...

[konstantin_anikeev]

Thanks for Post. Very usefull.

Just a small remark.

Following line looks a little bit unsafe.

1. // ID of the item Dropdown . 
2. var item_dropdown_id = "item_drop-col1-row"+current_rowindex; 

I mean, reference to automatic generated id. You does not control id generation algorithm, and it is possible that one time code will not work.

[Aisurya]

Hello Konstantin,

Thanks a lot . I got you , where your point is . I handled the same through model binding , and that was a concrete method.

Thanks,

Aisurya

[former_member182862]

I am liking everything that are posted/created here in this group. Regarding this blog, I would imagine that data will be in this format so that we do not need to repeat the header.

[

  {

    "header": "Vegetables",

    "items" : [

      {item: "Potato"},

      {item: "Brinjal"},

      {item: "Cabbage"},

      {item: "Tomato"}

    ]

  },

  {

    "header": "Fruits",

    "items" : [

      {item: "Apple"},

      {item: "Orange"}

    ]

  },

  {

    "header": "Animals" ,

    "items" : [

      {item: "Lion"},

      {item: "Tiger"},

      {item: "Deer"},

      {item: "Zebra"}

    ]

  }

]

And with binding of table and dropdown list, we are simply the code alot.

var tbl = new sap.ui.table.Table();

tbl.addColumn(new sap.ui.table.Column({

  label: new sap.ui.commons.Label({text: "Header"}),

  template: new sap.ui.commons.TextView({text: "{header}"})

}));

var dbox = new sap.ui.commons.DropdownBox();

dbox.bindItems('items',

               new sap.ui.core.ListItem({text: '{item}'})

              );

tbl.addColumn(new sap.ui.table.Column({

  label: new sap.ui.commons.Label({text: "Items"}),

  template: dbox

}));



var model = new sap.ui.model.json.JSONModel();

model.setData(aData);

tbl.bindRows('/');

tbl.setModel(model)

Here is where I tested this out. IMO, the element IDs in the DOM that are created by the control should be something that we need not to know or deal with in "normal situation". Of course, there are rare occasions where we need to deal with them.

Thanks for sharing how nested controls are layout.

-D

[Former Member]

Nice Blog..!

[vishnumohan_sharma]

Hi i want to bind Enable property  in table column Button.

I have  13 visible row count if i have less than 13 rows than all thing are working fine because of setting enable property via id btnChange-col1-row1

While i have more than 13 row action not performing well like button column is only working correctly for initial 13 row while i scroll button column get freezee. i tried  every possible thing could you please help me on that

[former_member209058]

Very helpful