CODEWITHSUNDEEP
javascriptjquery-select2tabulator
Harifrais
Harifrais

Reputation: 47

How to implement multiselect select2 inside tabulator cell

I am using tabultor.js to load my data.I need implement jquery select2 multi select inside each cell for a particular column.Any working example with sample data welcome.Help me to solve this.

Below I have tried with custom editor but its not working Please have look and help me.

https://jsfiddle.net/harifrais/gyobsk53/3/

test

Upvotes: 1

Views: 954

Answers (1)

Oli Folkerd
Oli Folkerd

Reputation: 8348

There are a couple of issues with your example.

The first problem is that you are not importing the select2 library into JSFiddle. you can see this in the console where it says

Uncaught TypeError: $(...).select2 is not a function

There are two actual errors in your editor. The first is that you are trying to reference the element by ID, you should not do this in a virtualDOM environment, you should just pass the editor directly into the jQuery selector

$(editor).select2({ //Pass the editor variable straight into the jQuery selector, no need for ID
    closeOnSelect: false,
    data:colorsToAccessSelect,
});

The second issue is that you are trying to instantiate the select2 before the element has been added to the DOM, which will cause the library to fail.

You need to make sure that you instantiate it inside the onRendered callback, which is called when the editor has been added to the DOM and is visible.

onRendered(function(){      
    $(editor).select2({
        closeOnSelect: false,
        data:colorsToAccessSelect,
    });
  
    editor.focus();
});

On a side note, Tabulator already comes with a built in Select Editor. There is demo of it in action in the Editor Example in the gender column

For example to setup multiselect on a column, in the definition you need to set the editor to "select" and setup the editorParams with the multiselect option

{title:"Example", field:"example", editor:"select", editorParams:{multiselect:true}},

Upvotes: 1

Related Questions