Improved Multi-Select

Webix JS
1

I was searching in the documentation API for multi-select control.
Unfortunately I couldn’t find what I needed.

Basically, I’m looking for improved multi-select control with functionality:

  1. Ability to check/uncheck selected item using mouse or touchscreen

  2. Ability to check/uncheck all the items in the list

  3. Have summary of all the selected items (#)

Currently, in a different project, I use control like in the URL below:
http://www.softcreator.com/WebIx/Suggestions/001_Improved_Multi-Select/001_Improved_Multi-Select.png

Question: does Webix have something similar?

If it doesn’t, does anybody need it, or it just me?

Please, vote if it would be beneficial to have such kind of control.

2

There is no similar control in Webix UI.
The most similar what can be done - you can place a list with multiselect in the form
http://webix.com/snippet/85b1ff79

3

Thank you, Maksim.
How difficult it is to use 3rd party controls in the form?

4

Relative easy. You can create a simple wrapper around the component, similar to next

Such component will works in the same way as normal one ( it has all basic API and can be configured from xml ). To have form integration - component will need to have setValue and getValue methods
https://github.com/webix-hub/components/blob/master/mercury/mercury.js

5

Thank you.

The provided example is a standalone, not a part of a form.

Does not give a sense of ease of integration.

In case of 3rd party control for Webix Form:

  • will by “Submit” the POST data contain 3rd party control data?

  • will Webix validation work with data from 3rd party control?

  • how JSON/XML initialization will look like (can you provide an example)?

  • will Webix field Prompt appear near to control, like, for example, with Text contorl?

6

The above example shows how custom javascript|html control can be wrapped in the webix view, after that it can be used anywhere on the page, as part of form if necessary.

The component behind the second link is a wrapper for Mercury rich text editor, it takes about 30 lines of code to create a wrapper. After that it possible to create an instance of editor by using { view:“mercury-editor” }, or, in case of xml - .

When placed in form, it will be able to load/save/validate in the same way as any other form control. It will not have a “prompt” part though

7

Thank you for exmplanation.
Btw, in your response the example code after “in case of xml” is missing.

8

For init from xml it will be

<x:mercury-edtior value="123" />

When custom view defined, you can tag with the same name in the xml configuration.

9

multiselect custom component is not working

10

@deepak if we talk about this sample, what behavior are you expecting? Afaics, the list works according to its config. If items has to be selected on mouse click (“ctrl+click” is enabled by default), you can add multiselect:"touch" to the current configuration.