accordion with checkbox on the header

Webix JS
#1

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

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

#2

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.

#3

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

#4

okay. Thank you Yuppy and Listopad. :slight_smile:

#5

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

#6

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.

#7

Thank you :slight_smile:

#8

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?

#9

Can this be achieved?
Any help would be appreciated.

#10

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

#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]);
#12

Hello @sruthi_keerthi ,
Please, follow the next discussion: https://forum.webix.com/discussion/33035/check-box-checked-state-issue?new=1