Selectize in datatables gives empty values when clicked on edit

Selectize in datatables gives empty values when clicked on edit

AJ31AJ31 Posts: 4Questions: 3Answers: 0

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 editor defined 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",
    }],
});

If the row has only one value for country, clicking on edit populates that value in the editor. However, if it has multiple value, the edit screen displays it as empty. How do I make the editor to display the multiple values as well?

Answers

  • rf1234rf1234 Posts: 2,996Questions: 87Answers: 421

    I have pretty much the same situation - and it works fine. The difference I can see is that I have the variable defined as an array. I post my working use case below. Maybe that helps?!

    In this editor the user can select category ids that are rendered for display.

    ctrCategoryWithValueRangeEditor = new $.fn.dataTable.Editor( {
        ajax: {
            url: 'actions.php?action=tblCtrCategoryWithValueRange',
            data: function ( d ) {
                d.parent_id = parentId;
            }
        },
        table: "#tblCtrCategoryWithValueRange",
        fields: [
                 {
                label: lang === 'de' ? 'Kategorien Auswahl:' : 'Category selection:',
                name: "ctr_category[].id",
                type: "selectize",
                opts: {
                    create: false,
                    maxItems: null,
                    openOnFocus: true,
                    allowEmptyOption: true,
                    placeholder: lang === 'de' ? 'Bitte wählen Sie eine oder mehrere Kategorien' : 'Please select one or more categories',
                }
            }
        ]
    } );
    

    In the server script I use an Mjoin to retrieve the options and populate the link table accordingly. The link table's name is "ctr_has_ctr_category".

    Mjoin::inst( 'ctr_category' )
        ->link( 'ctr_ctr_category.ctr_id', 'ctr_has_ctr_category.ctr_id' )
        ->link( 'ctr_category.id', 'ctr_has_ctr_category.ctr_category_id' )
        ->order( 'ctr_category.category_name asc' )
        ->fields(
            Field::inst( 'id' )->set( false )
                ->options( Options::inst()
                    ->table('ctr_category')
                    ->value('id')
                    ->label('category_name')
                    ->render( function ( $row ) {   
                        return $row['category_name'];
                    } )
                    ->order( 'category_name asc' )
                    //where clause MUST be a closure function in Options!!!
                    //users can only choose from ctr_categorys that are permissible for them.
                    ->where( function ( $q ) {        
                        $q ->where( 'id',
                            '( SELECT DISTINCT ctr_has_available_category.ctr_category_id  
                                 FROM ctr_has_available_category  
                                WHERE ctr_has_available_category.ctr_id = :ctr_id
                            )', 'IN', false);        
                        $q ->where( 'id',
                            '( SELECT DISTINCT ctr_has_ctr_category.ctr_category_id  
                                 FROM ctr_has_ctr_category  
                                WHERE ctr_has_ctr_category.ctr_id = :ctr_id
                            )', 'NOT IN', false);        
                        $q ->bind( ':ctr_id', $_POST['parent_id'] );
                    } )
                ),
            Field::inst( 'category_name' )->set( false )             
        )
    )    
    
  • AJ31AJ31 Posts: 4Questions: 3Answers: 0

    @rf1234 It would be really helpful if you can provide a javascript sample. And also please can you add a sample of your array?

  • rf1234rf1234 Posts: 2,996Questions: 87Answers: 421
    edited December 2022

    It would be really helpful if you can provide a javascript sample.

    Well that is in my post above. It is reallly simple, I know ...
    The Editor only has one field - and that is the selectize field "ctr_category[].id"

    And the array:

    The usual label-value pairs as an array of objects. Nothing special. The label is shown to the user and the value is the respective id.

Sign In or Register to comment.