About making pictures in select editors (select, combo and richselect)-О внесении картинок в editors

Webix JS
#1

Помогите, пожалуйста,
Как строки списка в select editors сделать из наименования + картинки?
Спасибо.

Help me please,
How do the list lines in select editors be made from names + pictures?
Thank.

#2

Здравствуйте,

Допустим, можно использовать richselect editor. Добавление картинки в эдитор возможно с помощью template, так как в нём можно использовать html компоненты.

Как добавить картинки в выпадающий список эдитора:
для этого вам понадобится suggest (чтобы добраться до popup листа) и в body уже прописываем template.

var data = [{id:1,  title:"somepic.jpg"}]
...
{view:"datatable",
...
 columns:[
...
{
 id:"someid",
 editor:"richselect",
 options: data,
 ...
 suggest:{
         body:{
           template:"<img src='#title#'>",
         }
       }
}]

Информация о template: Data Templates - Data templates documentation page. Webix Docs

#3

Nastja, спасибо.
Всё работает.
В другом месте у меня view:“richselect”. Там немного по-другому совсем. Пробую разобраться.

#4

для вью richselect будет так
https://snippet.webix.com/nyuzpc3k

#5

Благодарю Вас, Nastja. Картинка есть. Но остались 2 проблемы.

В view:“datatable” у меня сделано так:

editor:"richselect", options:chdsc.getVals1(),
suggest:{
template:"#value#",
filter:function(item,value){...},
body:{
template:"<div class='custom_item_img_popup'>\\
<img src='http://...'>\\ - #value#</div>"
...
}

Получаю требуемое, в popup вижу: <картинка> - "наименование"(#value#),
а при выборе в поле richselect-а сбрасывается только #value# (картинка там не нужна).

В view:“richselect” у меня так не получается: сбрасывается и картинка, и название.

Не могу понять, как мне увеличить высоту поля в popup (да и в самом richselect-е)? Хотелось бы подобрать для увеличения изображения картинки, но не получается. Я что-то не понимаю из исходников в иерархии селекторов в webix.css, или чего-то не знаю, к сожалению.

#6

А по-моему, проблему № 2 можно решить так:

body:{
...
type:{
height:50
},...
},...

Можно ещё менять свойства компонентов (“Changing the Component’s Config”):
Changing Properties of Components of Guides, Configuring Components Webix Docs,
но так тоже работает.

И проблема 1 решилась, как и в view:“datatable”:

options:{
template:"#value#",
...
body:{ (см. предыдущий пост)
template: "<div class='...'><img src='...'> - #value#</div>"
...
},...
},...