дополнительные компоненты

constructor/scripts/ComboBox/ComboBox.js

+this.ComboBox = class {
+  constructor(
+    values = [],
+    inputClass = "",
+    buttonClass = ""
+  ) {
+    this.values = values;
+    this.inputClass = `asf-dropdown-input ${inputClass}`;
+    this.buttonClass = `asf-dropdown-button ${buttonClass}`;
+
+    this.init();
+  }
+
+  get container() {
+    return this.compContainer;
+  }
+
+  get value() {
+    return this.selectedValue;
+  }
+
+  set value(value) {
+    this.setSelectedValue(value);
+  }
+
+  set disabled(disabled){
+    this.dropdownBox.attr('disabled', disabled);
+    this.button.attr('disabled', disabled);
+  }
+
+  setSelectedValue(newSelectedValue) {
+    this.initialSelect = newSelectedValue;
+    this.selectedValue = null;
+    this.dropdownBox.val("");
+    this.values.forEach(value => {
+      value.selected = value.value === newSelectedValue;
+      if(value.value === newSelectedValue) {
+        this.dropdownBox.val(value.title);
+        this.dropdownBox.attr('title', value.title);
+        this.selectedValue = newSelectedValue;
+      }
+    });
+  }
+
+  showDropDown(filterValue){
+    if (AS.SERVICES.isShownDropDown(this.compContainer)) {
+      AS.SERVICES.closeDropDown(this.compContainer);
+      return;
+    }
+
+    const values = this.values.filter(x => x.title.indexOf(filterValue) > -1);
+
+    AS.SERVICES.showDropDown(values, this.compContainer, null, selectedValue => {
+      this.setSelectedValue(selectedValue);
+      this.compContainer.trigger({
+        type: 'selected',
+        eventParam: selectedValue
+      });
+    });
+  }
+
+  addListener(){
+    this.dropdownBox.on("input", event => {
+      this.showDropDown(this.dropdownBox.val());
+    });
+
+    this.dropdownBox.on("blur", event => {
+      this.setSelectedValue(this.initialSelect);
+    });
+
+    this.button.on('click', event => {
+      event.stopPropagation();
+      event.stopImmediatePropagation();
+      event.preventDefault();
+      this.showDropDown("", event);
+    });
+
+    this.dropdownBox.on('click', event => {
+      event.stopPropagation();
+      event.stopImmediatePropagation();
+      event.preventDefault();
+      this.showDropDown("", event);
+    });
+  }
+
+  render(){
+    this.compContainer = $('<div>', {class: "asf-InlineBlock", style: "vertical-align:top"});
+    this.dropdownBox =  $('<input>', {type : 'text', class : this.inputClass});
+    this.button = $("<button>", {class: this.buttonClass});
+
+    this.dropdownBox.prop("readonly", true);
+
+    this.compContainer.append(this.dropdownBox);
+    this.compContainer.append(this.button);
+
+    this.setSelectedValue(this.initialSelect);
+  }
+
+  init(){
+    this.selectedValue = null;
+    this.initialSelect = null;
+
+    if(this.values.length) this.initialSelect = this.values[0].value;
+
+    this.render();
+    this.addListener();
+  }
+}

constructor/scripts/ContextMenu/ContextMenu.css

+.custom_contextmenu {
+  position: absolute;
+  display: none;
+  background-color: #fff;
+  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
+  padding: 0;
+  min-width: 200px;
+  width: auto;
+  z-index: 10000;
+}
+
+.custom_contextmenu ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.custom_contextmenu ul li {
+  padding: 0;
+  background-color: #fff;
+  display: block;
+}
+
+.custom_contextmenu ul li a {
+  color: #555;
+  padding: 8px 15px;
+  user-select: none;
+}
+
+.custom_contextmenu ul li a:hover {
+  background-color: #E6F7FF;
+}
+
+.custom_contextmenu ul .uk-disabled a {
+  color: #dedede;
+}

constructor/scripts/ContextMenu/ContextMenu.js

+this.ContextMenu = class {
+  constructor(element, showContextMenuHandler, items = null, functionGetItems = null){
+    this.element = element;
+    this.showContextMenuHandler = showContextMenuHandler;
+    this.items = items;
+    this.functionGetItems = functionGetItems;
+
+    this.init();
+  }
+
+  getPosition(e) {
+    let x = 0;
+    let y = 0;
+
+    if (e.pageX || e.pageY) {
+      x = e.pageX;
+      y = e.pageY;
+    } else if (e.clientX || e.clientY) {
+      x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
+      y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
+    }
+
+    return {x, y};
+  }
+
+  getContextMenuItem(name, icon, handler, disabled = false){
+    const li = $(`<li>`);
+    const a = $('<a>');
+    const span = $(`<span class="uk-margin-small-right" uk-icon="icon: ${icon}"></span>`);
+
+    if(disabled) li.addClass('uk-disabled');
+
+    a.append(span, i18n.tr(name));
+    li.append(a);
+
+    li.on('click', e => {
+      e.preventDefault();
+      e.target.blur();
+      if(handler) handler();
+    });
+
+    return li;
+  }
+
+  positionMenu(contextMenu, e) {
+    const clickCoords = this.getPosition(e);
+    const clickCoordsX = clickCoords.x;
+    const clickCoordsY = clickCoords.y;
+    const menuWidth = contextMenu.width() + 4;
+    const menuHeight = 380;
+    const windowWidth = window.innerWidth;
+    const windowHeight = window.innerHeight;
+
+    let left = 0;
+    let top = 0;
+
+    if ( (windowWidth - clickCoordsX) < menuWidth ) {
+      left = windowWidth - menuWidth;
+    } else {
+      left = clickCoordsX;
+    }
+
+    if ( (windowHeight - clickCoordsY) < menuHeight ) {
+      top = windowHeight - menuHeight;
+    } else {
+      top = clickCoordsY;
+    }
+
+    contextMenu.css({
+      "left": left + "px",
+      "top": top + "px"
+    });
+  }
+
+  renderContextMenu(event){
+    const contextMenu = $('<div>', {class: 'custom_contextmenu'});
+    const nav = $('<ul class="uk-nav-default uk-nav-parent-icon" uk-nav>');
+
+    contextMenu.append(nav);
+
+    this.items.forEach(item => {
+      if(item == 'divider') {
+        nav.append('<li class="uk-nav-divider"></li>');
+      } else {
+        const {name, icon, handler, disabled = false} = item;
+        nav.append(this.getContextMenuItem(name, icon, () => handler(), disabled));
+      }
+    });
+
+    $('body').append(contextMenu);
+    this.positionMenu(contextMenu, event);
+
+    if(this.showContextMenuHandler) this.showContextMenuHandler();
+
+    contextMenu.show('fast');
+  }
+
+  init(){
+    this.element.on('contextmenu', event => {
+      event.preventDefault();
+
+      $('.custom_contextmenu').remove();
+
+      if(this.functionGetItems && typeof this.functionGetItems == 'function') {
+        Cons.showLoader();
+        this.functionGetItems().then(items => {
+          Cons.hideLoader();
+          this.items = items;
+          this.renderContextMenu(event);
+        });
+      } else {
+        this.renderContextMenu(event);
+      }
+
+      return false;
+    });
+  }
+}
+
+$(document).off()
+.on('contextmenu', () => $('.custom_contextmenu').remove())
+.on('click', () => $('.custom_contextmenu').remove());

constructor/scripts/CustomSelect/CustomSelect.css

+.custom-select-container {
+  position: relative;
+  min-width: 100px;
+  width: auto;
+  height: 40px;
+  background: #fff;
+  border: 1px solid #e5e5e5;
+  cursor: pointer;
+}
+
+.custom-select-container:hover {
+  border-color: #91c2f6;
+}
+
+.custom-select-container .select-selected {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  margin-right: 16px;
+  height: 40px;
+}
+
+.custom-select-container .select-selected:after {
+  position: absolute;
+  content: "";
+  top: 16px;
+  right: 10px;
+  width: 0;
+  height: 0;
+  border: 5px solid transparent;
+  border-color: #1E87F0 transparent transparent transparent;
+}
+
+.custom-select-container .select-selected.select-arrow-active:after {
+  border-color: transparent transparent #1E87F0 transparent;
+  top: 10px;
+}
+
+.custom-select-container .select-items div,
+.custom-select-container .select-selected {
+  color: #222;
+  padding: 8px 16px;
+  transition: 0.2s ease-out 0s;
+}
+
+.custom-select-container.multiple {
+  height: auto;
+}
+
+.custom-select-container.multiple .select-selected {
+  height: auto;
+  min-height: 40px;
+  display: flex;
+  gap: 5px;
+  flex-wrap: wrap;
+}
+
+.custom-select-container.multiple .select-selected .tag_block {
+  border: 1px solid #7db5ee;
+  background: #f0f8ff;
+  display: flex;
+  gap: 5px;
+  height: 25px;
+  align-items: center;
+  width: max-content;
+  padding-left: 5px;
+  user-select: none;
+  font-size: 12px;
+}
+
+.custom-select-container .select-items div {
+  cursor: pointer;
+  border-bottom: 1px solid #e5e5e5;
+}
+
+.custom-select-container .select-items {
+  position: absolute;
+  background-color: #fff;
+  top: calc(100% + 1px);
+  left: 0;
+  right: 0;
+  z-index: 99;
+  max-height: 300px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  border: 1px solid #e5e5e5;
+  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
+  transition: 0.2s ease-out 0s;
+}
+
+.custom-select-container.multiple .select-items .selected {
+  color: #fff;
+  background-color: #1e87f0;
+}
+
+.custom-select-container .select-hide {
+  display: none;
+}
+
+.custom-select-container .select-items div:hover,
+.custom-select-container .same-as-selected {
+  color: #fff;
+  background-color: #91c2f6;
+}
+
+.custom-select-container .select-search-input {
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: calc(100% - 55px);
+  height: 38px;
+  padding: 0 10px;
+  z-index: 100;
+  background: #fff;
+  color: #222;
+  border: none;
+  outline: none;
+  transition: 0.2s ease-out 0s;
+}

constructor/scripts/CustomSelect/CustomSelect.js

+this.CustomSelect = class {
+  constructor(param) {
+    this.items = param.items;
+    this.placeholder = i18n.tr(param.placeholder || 'Выбор...');
+    this.search = param.search || false;
+    this.defaultValue = param.defaultValue || null;
+    this.multiple = param.multiple || false;
+    this.selectItem = null;
+    this.status = 'hide';
+    this.classList = param.classList;
+    this.init();
+  }
+
+  createSelectContainer() {
+    this.selectContainer = $('<div>', {class: 'custom-select-container'});
+    this.selected = $('<div>', {class: 'select-selected'});
+    this.selectItems = $('<div>', {class: 'select-items select-hide'});
+    this.selectContainer.append(this.selected, this.selectItems);
+
+    if(this.classList) this.selectContainer.addClass(this.classList);
+
+    if(this.multiple) {
+      this.selectContainer.addClass('multiple');
+    } else {
+      this.selected.text(this.placeholder);
+    }
+
+    this.selected.on('click', e => {
+      if(this.multiple && !$(e.target).is("div")) return;
+      this.status === 'hide' ? this.show() : this.hide()
+    });
+    this.selectContainer.on('close-select', e => this.hide());
+
+    if(this.search) {
+      const me = this;
+      this.searchInput = $('<input>', {class: 'select-search-input select-hide', placeholder: i18n.tr('Поиск...')});
+      this.selectContainer.append(this.searchInput);
+      this.searchInput.keyup(function(){
+        $.each(me.selectItems.find("div"), function() {
+          if($(this).text().toLowerCase().indexOf(me.searchInput.val().toLowerCase()) === -1) $(this).hide();
+          else $(this).show();
+        });
+      });
+    }
+  }
+
+  renderTagItem(item, menuItem){
+    item.tag = $('<div>', {class: 'tag_block'});
+    const deleteTagButton = $('<a class="uk-icon" href="javascript:void(0);" uk-icon="icon: close"></a>');
+
+    item.tag.append(`<span>${i18n.tr(item.title)}</span>`, deleteTagButton);
+    this.selected.append(item.tag);
+    menuItem.addClass('selected');
+
+    deleteTagButton.on('click', e => {
+      const msgConfirm = i18n.tr('Вы действительно хотите удалить тег {0}?').replace('{0}', i18n.tr(item.title));
+      if(confirm(msgConfirm)) {
+        item.tag.remove();
+        item.selected = false;
+        menuItem.removeClass('selected');
+      }
+    });
+  }
+
+  createItems() {
+    this.items.forEach(item => {
+      const menuItem = $(`<div data-value="${item.value}" title="${i18n.tr(item.title)}">${i18n.tr(item.title)}</div>`);
+
+      if(this.multiple && item.selected) this.renderTagItem(item, menuItem);
+
+      menuItem.on('click', e => {
+        if(this.multiple) {
+          item.selected = !item.selected;
+          if(item.selected) {
+            this.renderTagItem(item, menuItem);
+          } else {
+            menuItem.removeClass('selected');
+            item.tag.remove();
+          }
+        } else {
+          this.hide();
+          this.selected.text(i18n.tr(item.title));
+          this.selected.attr('title', i18n.tr(item.title));
+          
+          if(this.selectItem !== item) {
+            this.selectItem = item;
+            this.selectContainer.trigger({
+             type: 'selected',
+             eventParam: this.value
+           });
+          } else {
+            this.selectItem = item;
+          }
+
+        }
+      });
+
+      this.selectItems.append(menuItem);
+    });
+  }
+
+  get listItems() {
+    return this.items;
+  }
+
+  get container() {
+    return this.selectContainer;
+  }
+
+  get value() {
+    if(this.multiple) {
+      return this.items.filter(x => x.selected);
+    } else {
+      return this.selectItem;
+    }
+  }
+
+  set value(value) {
+    if(this.multiple) return;
+
+    const findVal = this.items.find(x => x.value == value);
+    if (findVal) {
+      this.selected.text(i18n.tr(findVal.title));
+      this.selected.attr('title', i18n.tr(findVal.title));
+      this.selectItem = findVal;
+    } else {
+      this.selectItem = null;
+      this.selected.text(this.placeholder);
+    }
+  }
+
+  hide() {
+    this.status = 'hide';
+    this.selected.removeClass('select-arrow-active');
+    this.selectItems.addClass('select-hide');
+    if(this.search) this.searchInput.addClass('select-hide');
+  }
+
+  show() {
+    $('.custom-select-container').trigger('close-select');
+
+    this.status = 'open';
+    this.selected.addClass('select-arrow-active');
+    this.selectItems.removeClass('select-hide');
+    if(this.search) {
+      this.searchInput.removeClass('select-hide').val('');
+      $.each(this.selectItems.find("div"), function() {
+        $(this).show();
+      });
+    }
+  }
+
+  init() {
+    if(this.multiple) {
+      this.items.map(x => {
+        if(this.defaultValue && this.defaultValue.length) {
+          x.selected = !!this.defaultValue.find(v => v == x.value);
+        } else {
+          x.selected = false;
+        }
+      });
+    }
+
+    this.createSelectContainer();
+    this.createItems();
+
+    if(!this.multiple && this.defaultValue) {
+      const findVal = this.items.find(x => x.value == this.defaultValue);
+      if (findVal) {
+        this.selected.text(i18n.tr(findVal.title));
+        this.selected.attr('title', i18n.tr(findVal.title));
+        this.selectItem = findVal;
+      }
+    }
+  }
+}
+
+const closeAllSelect = (e) => {
+  if ($(e.target).closest('.custom-select-container').length == 0) $('.custom-select-container').trigger('close-select');
+}
+document.addEventListener("click", closeAllSelect);

constructor/scripts/InputTag/InputTag.css

+.custom_input_tag_container {
+  width: 100%;
+  min-height: 40px;
+  border: 1px solid #e5e5e5;
+  display: flex;
+  align-items: center;
+  padding: 0 5px;
+  overflow-y: hidden;
+  overflow-x: auto;
+}
+
+.custom_input_tag_container .custom_placeholder {
+  color: #666;
+}
+
+.custom_input_tag_container .custom_input {
+  height: 38px;
+  field-sizing: content;
+  border: none;
+}
+
+.custom_input_tag_container .custom_tag_container {
+  display: flex;
+  flex-flow: wrap;
+  align-items: center;
+  gap: 4px;}
+
+.custom_input_tag_container .custom_tag_container .tag_block{
+  border: 1px solid #7db5ee;
+  background: #f0f8ff;
+  display: flex;
+  gap: 5px;
+  height: 25px;
+  align-items: center;
+  width: max-content;
+  padding-left: 5px;
+  user-select: none;
+  font-size: 12px;
+}

constructor/scripts/InputTag/InputTag.js

+this.InputTag = class {
+  #enterValues = [];
+  #placeholder;
+  #defaultItems;
+  #inputContainer;
+  #tagContainer;
+  #placeholderContainer;
+  #input;
+
+  constructor(param) {
+    this.#placeholder = i18n.tr(param.placeholder || "Введите значение и нажмите Enter");
+    this.#defaultItems = param.items || [];
+    this.manualInput = param.hasOwnProperty('manualInput') ? param.manualInput : true;
+    this.tagDeleteHandler = param.tagDeleteHandler || null;
+
+    this.#init();
+  }
+
+  get values(){
+    return this.#enterValues;
+  }
+
+  set values(arr){
+    this.#enterValues = [];
+    this.#tagContainer.empty();
+    arr.forEach(text => this.#createTag(text));
+  }
+
+  get container(){
+    return this.#inputContainer;
+  }
+
+  #createTag(text){
+    this.#enterValues.push(text);
+    const tag = $('<div>', {class: 'tag_block'});
+    const deleteTagButton = $('<a class="uk-icon" href="javascript:void(0);" uk-icon="icon: close"></a>');
+
+    tag.append(`<span>${text}</span>`, deleteTagButton);
+    this.#tagContainer.append(tag);
+
+    this.#tagContainer.css('display', 'flex');
+    this.#placeholderContainer.hide();
+    if(this.manualInput) this.#input.blur();
+
+    deleteTagButton.on('click', e => {
+      const msgConfirm = i18n.tr('Вы действительно хотите удалить тег {0}?').replace('{0}', text);
+      if(confirm(msgConfirm)) {
+        this.#enterValues.splice(this.#enterValues.length - 1, 1);
+        tag.remove();
+        if(!this.#enterValues.length) {
+          this.#placeholderContainer.show();
+          this.#tagContainer.css('display', 'none');
+          if(this.manualInput) this.#input.blur();
+        }
+        if(this.tagDeleteHandler && typeof this.tagDeleteHandler == 'function') this.tagDeleteHandler(text);
+      }
+    });
+  }
+
+  #init(){
+    this.#inputContainer = $('<div>', {class: 'custom_input_tag_container'});
+    this.#input = $('<input>', {class: 'custom_input', type: 'text', style: 'display: none;'});
+    this.#tagContainer = $('<div>', {class: 'custom_tag_container', style: 'display: none;'});
+    this.#placeholderContainer = $('<div>', {class: 'custom_placeholder'});
+
+    this.#placeholderContainer.text(this.#placeholder);
+    this.#inputContainer.append(this.#placeholderContainer, this.#tagContainer, this.#input);
+
+    this.#inputContainer.on('click', e => {
+      this.#placeholderContainer.hide();
+      if(this.manualInput) {
+        this.#input.show();
+        this.#input.focus();
+      }
+    });
+
+    if(this.manualInput) {
+      this.#input.on('blur', e => {
+        this.#input.hide();
+        if(!this.#enterValues.length) {
+          this.#placeholderContainer.show();
+          this.#tagContainer.css('display', 'none');
+        }
+      }).on('keyup', e => {
+        if (e.keyCode === 13) {
+          e.preventDefault();
+          this.#createTag(this.#input.val());
+          this.#input.val(null);
+          this.#input.hide();
+        }
+      });
+    }
+
+    if(this.#defaultItems && this.#defaultItems.length) {
+      this.#defaultItems.forEach(text => this.#createTag(text));
+    }
+  }
+}

constructor/scripts/TreeChooser/TreeChooser.js

+/*********Пример использования
+
+https://www.jstree.com/docs/json/
+const treeData = [
+  { "id" : "ajson1", "parent" : "#", "text" : "Simple root node" },
+  { "id" : "ajson2", "parent" : "#", "text" : "Root node 2" },
+  { "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" },
+  { "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" },
+];
+
+const customTree = new TreeChooser(treeData, 'Дела', 500, 600, 'Принять', 'Отмена');
+customTree.showDialog();
+customTree.treeContainer.addClass('tree_docfile_filter_icon');
+customTree.dialogContainer.on(AS.FORMS.BasicChooserEvent.applyClicked, e => {
+  console.log(e.eventParam);
+});
+
+*/
+
+$.getScript("https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.16/jstree.min.js");
+
+if(!$('link[res="jstreecss"]').length) {
+  $('body').append('<link rel="stylesheet" res="jstreecss" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.16/themes/default/style.min.css" integrity="sha512-A5OJVuNqxRragmJeYTW19bnw9M2WyxoshScX/rGTgZYj5hRXuqwZ+1AVn2d6wYTZPzPXxDeAGlae0XwTQdXjQA==" crossorigin="anonymous" referrerpolicy="no-referrer" />');
+}
+
+this.TreeChooser = class {
+  constructor(treeData, dialogTitle, dialogWidth, dialogHeight, selectButtonName, isButtonCancel){
+    this.treeData = treeData;
+    this.dialogTitle = dialogTitle;
+    this.dialogWidth = dialogWidth;
+    this.dialogHeight = dialogHeight;
+    this.selectButtonName = selectButtonName;
+    this.isButtonCancel = isButtonCancel;
+    this.selectedValue = null;
+
+    this.init();
+  }
+
+  showDialog() {
+    const instance = this;
+    this.dialogContainer.dialog({
+      modal: true,
+      width: instance.dialogWidth,
+      height: instance.dialogHeight,
+      title: i18n.tr(instance.dialogTitle),
+      show: {effect: 'fade', duration: 300},
+      hide: {effect: 'fade', duration: 300},
+      close: function() {
+        $(this).remove();
+      }
+    });
+  }
+
+  addListener(){
+    this.treeContainer.on("select_node.jstree", (evt, data) => {
+      this.selectedValue = data.node.original;
+      this.selectButton.prop('disabled', false);
+    });
+
+    this.selectButton.on('click', e => {
+      const eventParam = {...this.selectedValue};
+      this.dialogContainer.dialog( "destroy" );
+      this.dialogContainer.detach();
+      this.dialogContainer.trigger({type: AS.FORMS.BasicChooserEvent.applyClicked, eventParam});
+    });
+
+    if(this.isButtonCancel) {
+      this.buttonCancel.on('click', e => {
+        this.dialogContainer.dialog( "destroy" );
+        this.dialogContainer.detach();
+      });
+    }
+  }
+
+  init(){
+    const instance = this;
+
+    this.dialogContainer = $('<div>');
+
+    this.treeContainer = $('<div>', {
+        style: "overflow: auto; width: " + (this.dialogWidth - 20) + "px; height: " + (this.dialogHeight - 100) + "px;"
+    });
+
+    this.buttonContainer = $('<div>');
+    this.buttonContainer.css({
+      'display': 'flex',
+      'gap': '10px',
+      'flex-direction': 'row',
+      'justify-content': 'end',
+      'align-items': 'center',
+      'border-top': '1px solid #e5e5e5',
+      'height': '50px'
+    });
+
+    this.selectButton = $('<button>', {class : "uk-button uk-button-small uk-button-primary"});
+    this.selectButton.text(i18n.tr(this.selectButtonName));
+    this.selectButton.prop('disabled', true);
+    this.selectButton.css('border-radius', '3px');
+
+    this.buttonContainer.append(this.selectButton);
+    this.dialogContainer.append(this.treeContainer, this.buttonContainer);
+
+    if(this.isButtonCancel) {
+      this.buttonCancel = $('<button>', {class : "uk-button uk-button-small uk-button-default"});
+      this.buttonCancel.text(i18n.tr(this.isButtonCancel));
+      this.buttonContainer.append(this.buttonCancel);
+      this.buttonCancel.css('border-radius', '3px');
+    }
+
+    this.treeContainer.jstree({
+      core: {data: instance.treeData}
+    });
+
+    this.addListener();
+  }
+}