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 :