Grid -> ComboBox

Suite and Optimus Suite 6
#1

Hello,

how can i use the combobox in a cell or better in a column?

Regards
Stephan

#2

Currently such feature is not available, but we’re planning to add it in the next dhtmlxSuite update.

#3

It would also be great to be able to use a custom control. Some grid accomplish this by defining callbacks for each life phase of the editing component. Then the callbacks are called by passing the necessary information to create, destroy or obtain the value of the custom editing component.

#4

such “callbacks for the editing” are already can be accomplished using the
beforeEditStart
https://docs.dhtmlx.com/suite/grid__api__grid_beforeeditstart_event.html
afterEditStart
https://docs.dhtmlx.com/suite/grid__api__grid_aftereditstart_event.html
beforeEditEnd
https://docs.dhtmlx.com/suite/grid__api__grid_beforeeditend_event.html
afterEditEnd
https://docs.dhtmlx.com/suite/grid__api__grid_aftereditend_event.html
events

#5

Hi, yes these events may be useful in other situations, but the callbacks to which I refer usually provide the element of the DOM where the editor must be created. Then the developer can append the custom editor to this element. It would be something like this:

{
         createEditor: function (row, column, value, cellElement) {
                         // Here we can append our custom widget to cellElement and set its current value.
          },

         getEditorValue: function (row, column, value, editor) {
                        // We can call the appropriate method in the editor to get the value.
                         return editor.getValue (); // For example
          }
}

Other callbacks could be provided to initialize and destroy the custom editor. This approach is useful when we need to use an editor that is not implemented in the grid, for example a rating control or a select with live search.

#6

Than you for your suggestion. I’ll send it to the dev team.

#7

can we add combobox to a cell or cells of a column of the grid in suite 6.0 or above?

#8

Yes, you can use the combobox editor in your grid.
Please, check the “status” column in that snippet:
https://snippet.dhtmlx.com/w2cdossn

#9

@sematik the combo form control link allows for multiselection, filter options and data id. Can these be enabled in a grid editorType combobox?

#10

Unfortunately currently it is not available to use the combo mutliselect editor in the dhtmlxGrid. I’ll send your request to the dev team, so it will be observed for the future updates.

#11

In the latest dhx.Suite update (7.2) we have added the multiselect editor for the grid:

Here is the snippet as an example:
DHTMLX - Grid. Editing with different editors (combobox, select, multiselect, boolean, date) (check the “number of renewals” column).

#12

Awesome! thank you for the feedback @sematik .
There is an error preventing the snippet from loading.
GET https://snippet.dhtmlx.com/codebase/bundle.js?7086d3f881229a4446257b8875bfee6d591678b2 net::ERR_INCOMPLETE_CHUNKED_ENCODING 200 (OK)

#13

The snippet now seems to work well for me. Could you recheck it, please?

#14

Hi @sematik, the snippet is working now.
Great step forward, just a few points for improvement.

  1. We need to define the options as an array of objects. This has been raised in the forum
  2. When I type in the input I would expect the list of options to filter to options containing that text. At the moment it is filtering to options that start with the text.
  3. When multiple options are selected, there is no visual indication that the selected options in the input wrap. A quick solution is to add a scroll bar. An ideal solution would be to increase the size of the input when in edit mode so the user can see all the selected options
#15

Thank you for your suggestions. I’ve sent your requests to the dev team and they will be observed.

#16

Hello everyone.

We have finally added the possibility to define the ids-values for the options in the combobox and select editors of the dhx.Grid.
Here are some simple examples of such initialization:
https://snippet.dhtmlx.com/gz36ai4k
https://snippet.dhtmlx.com/0in2el2t
Please, try to download the latest available dhx.grid build (currently it is 7.3) to get this functionality.