Just want to share a Tristate Checkbox in for SAP Mobile control.
It illustrates the followings
1. Extending an existing control. sap.m.Checkbox
2.Using css :before to place icon in the checkbox
3. Override the fireSelect function so that the state is returned to the listener.
4. With a few lines of code and CSS, we can easily extend an control
sap.m.CheckBox.extend('TriStateCheckBox', {
metadata: {
properties: {
state: {type: 'int', defaultValue: 0}
}
},
onAfterRendering: function() {
var $this = this.$();
$this.find('div').removeClass('sapMCbMarkChecked');
$this.removeClass('triStateCheckBoxSelected');
$this.removeClass('triStateCheckBoxMixed');
if (this.getState() === 1) {
$this.addClass('triStateCheckBoxSelected');
} else if (this.getState() === 2) {
$this.addClass('triStateCheckBoxMixed');
}
},
fireSelect: function(s) {
var v = s.selected ? 1 : 0;
this.setState(v);
this.fireEvent('select', {'state': v});
},
renderer: {}
});
CSS
.triStateCheckBoxSelected div:before {
content: "\e05b";
font-family: "SAP-icons";
color: #007cc0;
}
.triStateCheckBoxMixed div:before {
content: "\e17b";
font-family: "SAP-icons";
color: #007cc0;
}
-Dennis
Thanks Dennis. This helped me a lot deriving from sap.m.StandardTile to implement an enhanced tile with custom background colors.
Thanks Dennis!
Do you know some example about triStateCheckBox with Breadcrumb Table?
Regards
HI Augusto,
Can you post your question in the Discussion Forum?
Actually, I do not know what is Breadcrumb Table. Maybe others can help you.
Thanks
-D
How can I do to extend the checkbox of a sap.m.Table (with mode property set as “MultiSelect”) using your code?
I was using the triStateCheckBox of the sap.ui.commons, but it is not working properly inside the sap.m.table.
Can this be done without css, on Sap.m.Table?