Webix UI - How to clear/reset/unset ui widget (input, select, date picker) value to empty?

Question

In Webix UI I have found a way to clear widget values based on form id collectively, how do I clear widget values individually using some sort of mixin like $$(<form-id>).clear();.

Is there a proper way to reset values to default individually rather than collectively as I need control of individual elements?

Please see existing fiddle for a sample set of elements. There is an omitted select drop down element because I do not have the data set to populate the drop down, as I normally populate it dynamically.

http://jsfiddle.net/02Lv1s9d

Vahe · Accepted Answer · 2019-07-22T19:51:37.420

Apparently there is a mixin method setValue("") to resolve the question.

Further research uncovered a setValue method using a mixin selector $$(<form-id>). The statement resolves to $$(<form-id>).setValue("");

https://snippet.webix.com/a0e579c0

Controller Clear Method - Note Datepicker clear relies upon different logic for some reason to clear rather than the setValue("") method invocation.

ctrl.clear = function(evt){
            ids = document.querySelectorAll("div.evt"+evt);
            angular.forEach(ids, function(elem, key){
                id = elem.getAttribute("id");
                view_id = document.querySelector("#" + id.replace("{{event}}", id) + " > div.webix_view").getAttribute("view_id");
                viewid = view_id.replace('$', '');

                var el = document.querySelector("#" + id.replace("{{event}}", id));
                if (el && el.getAttribute('type') == 'datepicker')
                {
                    elem = document.querySelector("#" + id.replace("{{event}}", id) + " > div.webix_view > div.webix_el_box > div.webix_inp_static");
                    elem.setAttribute("id", viewid);
                    elem.innerHTML = '';
                    elem.innerText = '';
                    elem.textContent = '';

                }
                else
                {
                    document.querySelector("#" + id.replace("{{event}}", id) + " > div.webix_view > *").setAttribute("id", viewid);
                    $$(viewid).setValue('');
                }
            });
}

Webix UI - How to clear/reset/unset ui widget (input, select, date picker) value to empty?

1 Answers1