Click here and follow my SAP UI5/FIORI snippets and information Page
</core:View>
// Application Initialization....
Deselecting Line Item after clicking on start button
Selecting Line Item after clicking on start button
Selecting Line Item after clicking on stop button
I have done table example with json data and given mode="MultiSelect"(meaning of this is, you can select more than one items concurrently in table).Here, I have implemented restrictions for check boxes selection and deselection.You can select and deselect the line items but once you click on start button then you would not be able to select and deselect the line items.If you click on stop button then again you can select and deselect the line items.Go through it and please let me know in case of any issue/doubt.
Application Structure
View Part
<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m" controllerName="multiselect.S1" xmlns:html="http://www.w3.org/1999/xhtml">
<Page title="CheckBox" class="sapUiSizeCompact">
<content>
<Table width="auto" id="Tab_id" mode="MultiSelect"
selectionChange="HandleSelect">
<headerToolbar>
<Toolbar>
<ToolbarSpacer />
<Button text="Start" press="handleStart" type="Accept" />
<Button text="Stop" press="handleStop" type="Accept" />
</Toolbar>
</headerToolbar>
<columns>
<Column minScreenWidth="Tablet" demandPopin="true">
<Text text="Id." id="materialCol1" />
</Column>
<Column minScreenWidth="Tablet" demandPopin="true">
<Text text="Date" />
</Column>
<Column minScreenWidth="Tablet" demandPopin="true">
<Text text="Status" />
</Column>
<Column minScreenWidth="Tablet" demandPopin="true">
<Text text="Quantity" />
</Column>
</columns>
</Table>
</content>
</Page>
Controller Part
sap.ui.controller("multiselect.S1", {
// Application Initialization....
onInit:function(){
var that=this;
// Setting Flag....
that.startFlag='YES';
this.bindTable();
this.getView().addStyleClass("sapUiSizeCompact");
},
// Table binding method....
bindTable:function(){
var json = sap.ui.model.json.JSONModel("model/record.json");
var tableId=this.byId("Tab_id");
var columnListItemTemplate = new sap.m.ColumnListItem({
cells : [ new sap.m.Text({
text : "{id}"
}),
new sap.m.Text({
text : "{Date}"
}), new sap.m.Text({
text : "{Status}"
}),
new sap.m.Input({
value:"{AQty}",
editable:false,
})
]
});
tableId.setModel(json);
tableId.bindItems("/Records", columnListItemTemplate);
},
// If you press start button then this will call....
handleStart:function(){
var that=this;
that.startFlag='NO';
},
// If you press stop button then this will call....
handleStop:function(){
var that=this;
that.startFlag='YES';
},
// If you select and deselect the check box then this will call....
HandleSelect:function(oEvent){
var that=this;
if(that.startFlag==='NO'){
if(oEvent.mParameters.listItem.getSelected()===true){
var items=oEvent.mParameters.listItems;
for(var i=0;i
items[i].setSelected(false);
}
alert("you can't select the item");
}
else{
var items=oEvent.mParameters.listItems;
for(var i=0;i
{
items[i].setSelected(true);
}
alert("you can't deselect the item");
}
}
}
});
record.json
{
"Records":[
{
"id":11000043,
"Date":"03 Oct 2016",
"Status":"Open Request",
"AQty":10
},
{
"id":11000048,
"Date":"02 Oct 2016",
"Status":"Received",
"AQty":5
},
{
"id":11000067,
"Status":"Received",
"Date":"04 Oct 2016",
"AQty":8
},
{
"id":11000069,
"Status":"Open Request",
"Date":"05 Oct 2016",
"AQty":6
},
{
"id":11000078,
"Status":"Received",
"Date":"06 Oct 2016",
"AQty":4
},
{
"id":11000079,
"Status":" Deleted",
"Date":"08 Oct 2016",
"AQty":32
},
{
"id":11000080,
"Status":"Open Request",
"Date":"10 Oct 2016",
"AQty":10
}]
}
Result
Deselecting Line Item after clicking on start button
Selecting Line Item after clicking on start button
Selecting Line Item after clicking on stop button
No comments:
Post a Comment