Replies

• bindrid Posts: 730Questions: 0Answers: 119

  August 2017

  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 Posts: 35Questions: 13Answers: 1

  August 2017

  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 Posts: 63,852Questions: 1Answers: 10,519 Site admin

  August 2017

  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 Posts: 35Questions: 13Answers: 1

  August 2017

  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 Posts: 63,852Questions: 1Answers: 10,519 Site admin

  August 2017

  Change:

  { "data": "inventory_main_list_cat_link_uuid"},
  

  to be:

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

  Allan
• davykiash Posts: 35Questions: 13Answers: 1

  August 2017

  @allan Perfect!