accordion with checkbox on the header

I want an accordion with checkbox on the header. But, I'm not sure how can I achieve it.


  • edited June 2017

    If i'm not mistaken it is not possible not add a [webix] checkbox to the header.
    You could try to insert some html elements ( ) in header and play with css.

  • Webix components cannot be embedded in the accordion header.

    Additional elements can be added only through the html template. Also, it is possible to add some specific click handler to the element's class, something like

  • okay. Thank you Yuppy and Listopad. :)

  • @Yuppy
    In the snippet you have shared, I cannot check the checkbox in the header.
    The click on the checkbox opens or closes the body of the accordion.

  • The point here is that any click on a header will close/expand it.

    To avoid this, you need to return false from theonClick handler of the particular element (its class, to be precise), as shown in the above sample.

  • Thank you :)

  • On check of the checkbox, the change is not persisted after the accordion is collapsed or expanded.

    How can I achieve this?

  • Can this be achieved?
    Any help would be appreciated.

  • As the header is re-rendered on collapse/expand, you need to store the checkbox state and apply it with the corresponding event handler. Please check:

  • edited September 2018

    I used below code but still i am unable to save the checkbox state when expand and collapse accordion item. Please help

        var dynamicHeader = "<input type='checkbox' class='header-chkbx' id='includeFlg' checkValue:'On', uncheckValue:'Off'  name='Include' /><label for='includeFlg'> Include </label>";
                        let id= 'accordionitemid';
                            // global layout events
                            onClick: {
                                onAfterExpand: function (id) {
                                    if (id == "accordionitemid") {
                                        $$(id).$view.querySelector(".header-chkbx").checked = isChecked
                                onAfterCollapse: function (id) {
                                    if (id == "accordionitemid") {
                                        $$(id).$view.querySelector(".header-chkbx").checked = isChecked
                        var config = {
                            rows: [{
                                view: "accordionitem",
                                id: 'accordionitemid',
                                header: 'Registration' + dynamicHeader,
                                onClick: {
                                    "header-chkbx": function (event, accordionId, elem) {
                                        isChecked = elem.checked
                                            webix.message("checkbox clicked");
                                        return false;
                                body: registrationUI,
                        var view = webix.ui(config);
Sign In or Register to comment.