TABLE COLUMN HIDE AND UNHIDE ON BUTTON CLICK

TABLE COLUMN HIDE AND UNHIDE ON BUTTON CLICK

View.xml :


<Page title="Row Hide and Unhide">
<content>
<Table id="tableId" items="{/data}">


 <columns>
 <Column>
 <Text text="column 1"/>
 </Column>

 <Column>
 <Text text="column 2"/>
 </Column>

 <Column >
 <Text text="column 3"/>

 </Column>

 <Column>
 <Text text="column4"/>
 </Column>


  <Column>
 <Text text="column 5"/>
 </Column>

 <Column>
 <Text text="column 6"/>
 </Column>

 <Column >
 <Text text="column 7"/>

 </Column>

 <Column>
 <Text text="column 8"/>
 </Column>

  <Column>
 <Text text="column 9"/>
 </Column>

 <Column>
 <Text text="column 10"/>
 </Column>

 <Column >
 <Text text="column 11"/>

 </Column>

 <Column>
 <Text text="column 12"/>
 </Column>

 </columns>

<items>
<ColumnListItem>
<cells>
<Text text="{column1}"/>
<Text text="{column2}"/>
<Text text="{column3}"/>
<Text text="{column4}"/>
<Text text="{column5}"/>
<Text text="{column6}"/>
<Text text="{column7}"/>
<Text text="{column8}"/>
<Text text="{column9}"/>
<Text text="{column10}"/>
<Text text="{column11}"/>
<Text text="{column12}"/>





</cells>
</ColumnListItem>

</items>

 </Table>

</content>

<footer>
<Toolbar>
<ToolbarSpacer/>
<Button type="Emphasized" text="Hide" press="onPress" />
<Button type="Emphasized" text="unhide" press="onPress1" />
</Toolbar>
</footer>

</Page>



Controller.js :

onInit: function() {
  var a=this.getView().byId("tableId");
  var b=new sap.ui.model.json.JSONModel("model/data.json");
  a.setModel (b);

},


onPress: function() {

var a=this.getView().byId("tableId");
  var b=new sap.ui.model.json.JSONModel("model/data.json");
  a.setModel (b);
a.getColumns()[0].setVisible(false)
  a.getColumns()[2].setVisible(false)
  a.getColumns()[4].setVisible(false)
  a.getColumns()[6].setVisible(false)
  a.getColumns()[8].setVisible(false)
  a.getColumns()[10].setVisible(false)
} ,

onPress1: function() {

var a=this.getView().byId("tableId");
  var b=new sap.ui.model.json.JSONModel("model/data.json");
  a.setModel (b);
a.getColumns()[0].setVisible(true)
  a.getColumns()[2].setVisible(true)
  a.getColumns()[4].setVisible(true)
  a.getColumns()[6].setVisible(true)
  a.getColumns()[8].setVisible(true)
  a.getColumns()[10].setVisible(true)
}



data.json :

{
"data" :[
{
"column1":"c1",
"column2":"c2",
"column3":"c3",
"column4":"red",
"column5":"c5",
"column6":"c6",
"column7":"c7",
"column8":"c8",
"column9":"c9",
"column10":"c10",
"column11":"c11",
"column12":"c12"
},


{
"column1":"d1",
"column2":"d2",
"column3":"d3",
"column4":"purple",
"column5":"c5",
"column6":"c6",
"column7":"c7",
"column8":"c8",
"column9":"c9",
"column10":"c10",
"column11":"c11",
"column12":"c12"
},

{
"column1":"e1",
"column2":"e2",
"column3":"e3",
"column4":"orange",
"column5":"c5",
"column6":"c6",
"column7":"c7",
"column8":"c8",
"column9":"c9",
"column10":"c10",
"column11":"c11",
"column12":"c12"
}

]

}





if anyone wants help from us.just comment below.

Post a Comment

Previous Post Next Post