Display select dropdown "name" value instead of "id" value.

davykiash

Hello,

Am using the select2 plugin to display dropdown information from a table. Instead of having the table display the name e.g. "1 (highest)" it displays the id "1". What options do I need to set/adjust to achieve it?

My code

{
    label: "Rule:",
    name: "price_list_link_rule_id",
    type: "select2",
    options: [
        { name: "1 (highest)", id: "1" },
        { name: "2 (Mid)",     id: "2" },
        { name: "3 (Level)",   id: "3" },
        { name: "4 (Good)",    id: "4" },
        { name: "5 (lowest)",  id: "5" }
    ],
    optionsPair: {
        label: 'name',
        value: 'id'
    }
    /*
    options: [
         { "label": "1 (highest)", "value": "1" },
         { "label": "2",           "value": "2" },
         { "label": "3",           "value": "3" },
         { "label": "4",           "value": "4" },
         { "label": "5 (lowest)",  "value": "5" }
     ]
     */
}

bindrid

Like this? http://jsbin.com/mamuxig/edit?html,js,output

It puts a select2 using the data set above, though, when you push data directly into select2, it will be an array of text: "" , id: "" as shown at the link

davykiash

Hello @bindrid

Please check the source below. The solution you provided partially works.

Yes I can display the select2 plugin inline but the values do not change and the select2 should be visible one the user clicks to edit.

My Javascript

var editor_main_list;

categoryData = [
    { "text": "NON-CONSUMABLES", "id": "62a71479-2ac8-44ea-b119-85c718dfa545" },
    { "text": "CONSUMABLES", "id": "b1668ac6-724a-4a3b-8bf9-318f41e76b51" },
    { "text": "ELECTRONICS", "id": "7cd96ad2-e9b0-4645-a82d-613b502e7108" },
    { "text": "FAST MOVING", "id": "b6ef3eb0-c99b-48d5-8131-7697693b06e1" },
    { "text": "SERVICES", "id": "adf812e7-2ea7-424a-a339-ef8eadb1ec57" }
];

editor_main_list = new $.fn.dataTable.Editor( {
"ajax": {
        "url": "../actions/process.php",
        "type": "POST",
        "data": function ( d ) {
             return $.extend( {}, d, {
               "mpl_srv": "12",
             } );
          },
      },
table: "#main_table",
fields: [ 
            {
                label: "Item Category:",
                name: "inventory_main_list.inventory_main_list_cat_link_uuid",
                type: 'select2',
                options: categoryData
            },      
            {
                label: "Item Code:",
                name: "inventory_main_list.inventory_main_list_code"
            },                          
            {
                label: "Item Description:",
                name: "inventory_main_list.inventory_main_list_desc"
            }
    ]
});


// Activate an inline edit on click of a table cell
$('#main_table').on( 'click', 'tbody td:not(:first-child)', function (e) {
editor_main_list.inline( this );
} );

$('#main_table').DataTable ( 

{

    "dom": "Bfrtip",                                
    "order": [[ 1, "desc" ]],
    "ajax": {
        "url": "../actions/process.php",
        "type": "POST",
        "data": function ( d ) {
             return $.extend( {}, d, {
               "mpl_srv": "12",
             } );
          },
      },                      
    "columnDefs": [
        {
            "targets": [ 1 ],
            "visible": false,
            "searchable": false
        }                       
    ],
                        
    "columns": [
        {
            data: null,
            defaultContent: '',
            className: 'select-checkbox',
            orderable: false
        },                                      
        { "data": "inventory_main_list.uuid"},
        { "data": "inventory_main_list.inventory_main_list_code"},      
        {   
            "data": "inventory_main_list.inventory_main_list_cat_link_uuid", 
            "render": function()
                {
                    return "<select></select>";
                }
        },
        { "data": "inventory_main_list.inventory_main_list_desc"},
        
    ],
    "select": {
        style:    'os',
        selector: 'td:first-child'
    },
    "buttons": [
        { extend: "create"  , editor: editor_main_list ,"className": "btn btn-primary"},
        { extend: "edit"    , editor: editor_main_list ,"className": "btn btn-info"},
        { extend: "remove"  , editor: editor_main_list ,"className": "btn btn-warning"}
    ],
    "initComplete": function()
        {
            $("#main_table select").select2({data:categoryData, width:"150px"})
         
        }
   
} 

My HTML

<table class="table table-striped table-bordered" cellspacing="0" width="100%" id="main_table">
    <thead>
        
        <tr>                    
            <th width="5%"></th>
            <th width="0%">Item UUID</th>
            <th width="15%">Item Code</th>
            <th width="20%">Item Category</th>
            <th width="55%">Item Description</th>       
        </tr>
        
    </thead>
    <tbody>
        <tr>
            <td colspan="5" class="dataTables_empty">Loading data from server</td>
        </tr>
    </tbody>            
</table>

Server Side

Field::inst( 'inventory_main_list.uuid' )->set( false ),
Field::inst( 'inventory_main_list.inventory_main_list_code' )
    ->validator( 'Validate::notEmpty' ),
Field::inst( 'inventory_categories.inventory_categories_desc' ),
Field::inst( 'inventory_main_list.inventory_main_list_cat_link_uuid' ),
Field::inst( 'inventory_main_list.inventory_main_list_desc' )
    ->validator( 'Validate::notEmpty' ),

Please assist

allan

I'm not clear on why you are using return "<select></select>"; in a renderer for that column? If you want Select2 to show when the user clicks on the cell, drop that and just keep the inline() call.

Could you link to the page so I can check it out and see if I can see why the correct value isn't being selected please?

Thanks,
Allan

davykiash

Hello @allan

I have pasted my full source at http://jsbin.com/cusoteb/edit?html,js,output.

All I need is for the column "Item Category" to be select2 enabled for editing. On display it should display the "Category Description" and not the "Category UUID"

Thanks.

allan

Change:

{ "data": "inventory_main_list_cat_link_uuid"},

to be:

{ "data": "inventory_main_list_desc", "editField": "inventory_main_list_cat_link_uuid"},

Allan

davykiash

@allan Perfect!