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.

https://webix.com/snippet/96dfe6e8

Comments

  • 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 ( https://webix.com/snippet/6c6059df ) 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 https://webix.com/snippet/457aa3cd

  • 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.

    https://webix.com/snippet/94476f51

    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: https://webix.com/snippet/a620450f

  • edited September 11

    Hi,
    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';
                        webix.ui({
                            // 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);
                        $$('registration_acc_id').addView(view.getChildViews()[0]);
    
    
Sign In or Register to comment.