Skip to Content

Tristate sap.m.CheckBox

January 30, 2015 | 363 Views |
Follow

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

To report this post you need to login first.

5 Comments

You must be Logged on to comment or reply to a post.

    1. Former Member Post author

      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

      (0) 
  3. Augusto Ferreira

    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.

    (0) 

Leave a Reply