Search code examples
javascriptangularjswebix

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


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


Solution

  • 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('');
                    }
                });
    }