CODEWITHSUNDEEP
javascriptjquerydatatablesselectize.js
AJ31
AJ31

Reputation: 268

Selectize in DataTables gives empty values when clicked on Edit

I am trying to integrate selectize in Datatable Editor, but get an empty value (for the field 'country'), if I click on edit. I have a datatable defined as follows :

var table = $('#example').DataTable({
    dom : "Bfrtip",//"Bfrtlip",
    ajax : './DataChannelServlet?buster=' + new Date().getTime(),
    lengthMenu : [ [ 10, 25, 50, -1 ], [ 10, 25, 50, "All" ] ],
    select: {
        style:    'multi',
        selector: 'td:first-child'
    },
    order : [ [2, "asc"] ],
    columns : [ {
        data : null,
        defaultContent : '',
        className: 'select-checkbox',
        orderable: false
    },{
        data : "Id",
        defaultContent : ''
    },{
        data : "Name",
        defaultContent : ''
    }, {
        data : "DisplayName",
        defaultContent : ''
    }, {
        data : "country",
        defaultContent : ''
    }] ,
    fixedHeader: true,
    buttons: buttonArray
});

The country column has different values separated by ';'.

I have defined the datatables editor as follows:

editor = new $.fn.dataTable.Editor({
    ajax: "./DataChannelServlet",
    table: "#example",
    legacyAjax: true,
    idSrc: "rowID",
    fields: [{
        label: "Id",
        name: "Id",
        type: "readonly"
    },
    {
        label: "Country",
        name: "country",
        type: "selectize",
        options: getCountry(),
        opts: {
            placeholder: 'Enter a search',
            delimiter: ';',
            searchField: 'label',
            valueField: 'value',
            persist: true,
            maxItems: null,
            create: false
        }
    },{
        label: "Name",
        name: "Name",
        type: "readonly"
    },{
        label: "Display Name",
        name: "DisplayName",
        type: "readonly"
    },{
            label: "Row ID",
            name: "rowID",
    }],
});

The getCountry() method provides the list of countries available to pick. If the country column has single country, then the editor displays the value in the edit screen. However, if the country column has multiple values for example UK;Belgium, the editor displays empty text box for country. How can I get the editor to display country value in the screen, the same way it allows me to select multiple country values separated by ';'?

Upvotes: 1

Views: 288

Answers (1)

AJ31
AJ31

Reputation: 268

I was passing the country value as a string. So, instead of passing it as string from the Object, I passed it as String Array and that worked for me. So in my Java class, I had country declared as follows : private String country; and I changed it to private String[] country.

Upvotes: 0

Related Questions