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