How to set up selectize options when using Editor

louking

Reference http://codepen.io/louking/pen/adQMaP

I want to have a select field in create and update which has a set of items, but also allows the user to type in something new. I thought select2 or selectize would support this. However, I am having trouble getting to square one.

My example is with selectize, When user clicks New I want col0 to have a select pulldown with the options in optvalues, and to be able to type in the field to find matching options. I've tried optvalues in this format, and just a simple array, and with array of objects {'label':xx, 'value':yy} without success.

var data = []
for (i = 1; i < 4; i++) {
  data.push({
    id: i,
    a: 'a' + i,
    b: 'b' + i,
    c: 'c' + i
  })
}

var optvalues = [
  ['aaaa', 'aaaa'],
  ['bbbb', 'bbbb'],
  ['ccaa', 'ccaa'],
];

var editor = new $.fn.dataTable.Editor({
  table: '#tbl',
  idSrc: 'id',
  fields: [
    { label: 'col0', name: 'col0',
      type: 'selectize', options: optvalues,
    },
    { label: 'col1', name: 'col1' },
    { label: 'col2', name: 'col2' },
  ],
} );

var table = $('#tbl')
  .DataTable({
    dom: 'lBfrtip',
    data: data,
    columns: [
      {
        data: null,
        defaultContent: '',
        className: 'select-checkbox',
        orderable: false
      },
      { data: 'a', className: 'dt-body-center' }, 
      { data: 'b', className: 'dt-body-center' },
      { data: 'c', className: 'dt-body-center' }
    ],
    select: true,
    buttons: [
      { extend: 'create', editor: editor },
    ],
  });

<table id=tbl>
  <thead>
    <tr>
      <th></th>
      <th>col0</th>
      <th>col1</th>
      <th>col2</th>
    </tr>
  </thead>
  </tbody>
</table>

louking

Here's another version http://codepen.io/louking/pen/WrYWWY

This one with optvalues defined as

var optvalues = [
  {label:'aaaa', value:'aaaa'},
  {label:'bbbb', value:'bbbb'},
  {label:'ccaa', value:'ccaa'},
];

same behavior.

allan

Did you include the CSS shown on the plug-in page? It seems to me that the Selectize menu is just "behind" the Editor form.

Working example: http://live.datatables.net/vanibenu/1/edit

Allan

louking

Yes, that css is included. If you click on settings you can see which css and javascript libraries I have in my application. I am guessing one of these libraries is conflicting somehow.

See http://codepen.io/louking/pen/MKZwyW which explicitly includes the css (although it is already included).

I'm not quite clear how to inspect these hidden elements which should be visible (I use chrome, but am willing to debug with a better debugger if you have a recommendation).

louking

After some trial / error I found it is the jquery ui stying which is interfering. I'm not sure if it is because I am using an old jquery ui theme or if this is a general problem.

See http://codepen.io/louking/pen/qbLdrj

z-index: 102 displays the pulldown, while z-index: 101 does not (not sure why 101 doesn't work as in the theme, other than for .ui-tooltip: 9999 worst case I see is z-index: 100. I didn't look beyond the theme file, though.)

As a workaround, I'll override this style in my own stylesheet, but I think it is possible that you need a separate stylesheet for selectize with jqueryui.

BTW, I was also seeing the problem with select2, which is why I had moved to selectize.

allan

Thanks for the update. Good to hear you have it working now. I'll increase the z-index in the plug-in code.

Allan

louking

Sorry, one more question which might be more selectize than dataTables question -- I had thought that while I was typing the matching selections would show up.

I'm not seeing that -- is that a selectize option (I'm not seeing which one), or is this another styling conflict?

E.g., try typing "aa" in http://codepen.io/louking/pen/qbLdrj , or even your example http://live.datatables.net/vanibenu/1/edit -- maybe this is datatable plugin issue in use of selectize?

louking

I'm also seeing occasionally when I x out of the edit window, that the select pulldown is still shown. I have seen this in my application, haven't repro'd this in the test pen yet.

When I get back from my run, I'll try to debug what is happening for the matching selections by setting breakpoints in selectize to see what it is doing. I am guessing that this is another z-index problem, so we have to figure out which class isn't being handled correctly.

Since I don't see these elements in the dom, at least not near the edit popup, this is a bit trickier.

allan

Looks like you have to specify the searchField option.

Allan

louking

I don't think that is it. searchField option has default of ['text']

For some reason when typing a after self.sifter.search() call on line 2058 of selectize.js from http://codepen.io/louking/pen/rxoeJM result has 0 items, but at same line of code from http://selectize.github.io/selectize.js/ after typing c there are 2 items.

The only options I see which are different are create, dropDownParent and labelField

I think the choice of labelField within editor.selectize.js maybe conflicts with the default optgroupLabelField.

I resolved by making the override labelField: 'text' while initializing Editor (and updating my data as well, of course)

See http://codepen.io/louking/pen/rxoeJM

Note: my hypothesis seems wrong, because changing optgroupLabelField does not resolve problem -- see http://codepen.io/louking/pen/xZmOaQ -- but I can't spend any more time on this -- need to finish up what I was trying to get working in the first place now that I have a workaround

allan

It does have a default value of ['text'], but the object you are populating the Selectize element with doesn't have a text parameter. It has label and value.

Simply adding: searchField: 'label' should allow it to search. In my local test that seems to work okay. I'll update the plug-in with that option set.

Allan

louking

Yes, you're right -- sorry for my confusion.

http://codepen.io/louking/pen/LGMdMa