How to binding complex JSON to table

Question

I have the following JSON:

[
 { Hour:"01:00:00",
   Name: "Den",
   Agent:[
           {Slot : 1,Enabled : 1},
           {Slot : 2,Enabled : 1},
           {Slot : 3,Enabled : 1},
           {Slot : 4,Enabled : 1},
           {Slot : 5,Enabled : 1},
           {Slot : 6,Enabled : 1},
           {Slot : 7,Enabled : 1},
           {Slot : 8,Enabled : 1},
           {Slot : 9,Enabled : 1} 
         ]
  }
]...

I need to create a table that lists the "Hour" in a column and the other columns list them with the object "Agent"

Example :

 ________________________________________________________
| Hour     | Slot 1 | Slot 2 | Slot 3 | Slot 4 | Slot 5 |
---------------------------------------------------------
| 10:00:00 | 1      | 2      | 3      | 4      | 5      |...

Create a table but only load the time and the complete "Agent" object:

Table:

oTable.addColumn(new sap.ui.table.Column({
              label: new sap.ui.commons.Label({text: "Hour"}),
              template: new sap.ui.commons.TextView({text: "{Hour}"}),
              width : '125px'
          })
      );

for(var i; i < 9; i++){
       oTable.addColumn(
                    new sap.ui.table.Column({
                      label: new sap.ui.commons.Label({text: "Slot "+i}),
                      template: new sap.ui.core.Icon({
                      src: { 
                            path : "Agent/", 
                                   formatter: function(v) { 
                                      if (v != null) {
                                          if(v.Enabled == 1){
                                            return "sap-icon://save"; 
                                          }else{
                                            return "sap-icon://future";
                                          }
                                      }
                                    }
                      },
                      size: "20px",
                    color: { 
                        path : "Agent/", 
                             formatter: function(v) { 
                              if (v != null) {
                                  if(v.Enabled== 1){
                                     this.attachEvent("press",function(oEvent)          {Alert("green")})
                                     return v.Slot != -1 ? "#f08e00" : "green" 
                                  }else{
                                     this.attachEvent("press",function(oEvent) {Alert("#bfbfbf")})
                                     return "#bfbfbf"
                                  } 

                              }
                        }
                    },
                    hoverColor: "black",
                    activeColor: "black",
                    width : "100%",
                  }),
                      width: "70px"
                })
                );  
            }
     }

Any idea how to do it? It occurred to me to put the "i" as "Agent / i", it works, but when the table enables the "Scroll" it returns to render the rows and of disorder the events by icons :/

Answer 1

You are right to use "Agent/"+i as the binding path.

But you cannot attach the event handlers inside of the formatters. You should bind once to the event when initializing the icon. The eventhandler function is supplied with an event object containing a reference to the icon instance that has been clicked. with that you can get the binding context which should be the row. Use your i again to get the Column object.

function createEventHandler(column){
   return function(oEvent) {
      var context = oEvent.getSource().getBindingContext();
      var v = context.getProperty("Agent/" + column);
      if (v){
         if (v. Enabled) {
            Alert("green");
         } else {
            Alert("#bfbfbf");
         }
      }
   }
};
for(var i; i < 9; i++){
       oTable.addColumn(
                    new sap.ui.table.Column({
                      label: new sap.ui.commons.Label({text: "Slot "+i}),
                      template: new sap.ui.core.Icon({
                      src: { 
                            path : "Agent/"+i, 
                                   formatter: function(v) { 
                                      if (v != null) {
                                          if(v.Enabled == 1){
                                            return "sap-icon://save"; 
                                          }else{
                                            return "sap-icon://future";
                                          }
                                      }
                                    }
                      },
                      size: "20px",
                    color: { 
                        path : "Agent/"+i, 
                             formatter: function(v) { 
                              if (v != null) {
                                  if(v.Enabled== 1){
                                     return v.Slot != -1 ? "#f08e00" : "green" 
                                  }else{
                                     return "#bfbfbf"
                                  } 

                              }
                        }
                    },
                    hoverColor: "black",
                    activeColor: "black",
                    width : "100%",
                    press: createEventHandler(i) //create a closure over the current value of i
                  }),
                      width: "70px"
                })
                );  
            }