Cell editing - autocomplete with php remote datasource

[Rimokas]

Hi,

Did something similar, like "inline editing" with autocomplete. It's working. Now I did with one table field.
I want to do return with 2 fields. Let say "itemId" and "itemName" . But after choise save in cell "itemId". How to do that ?

mine source :

Code: [Select]

combo_box = ( source ) =>
{
   var func = function( ui )
   { 
      ui.$cell.addClass('ui-front')
      ui.$editor.autocomplete(
      {
         source  : source,
         position:
         {
            collision: 'flipfit',
            within: ui.$editor.closest( ".pq-grid" )
         },
         selectItem   : { on: true }, //custom option
         highlightText: { on: true }, //custom option
         minLength    : 0
      }).focus( function()
      {
         $( this ).autocomplete( "search", "" )
      })
   }
   return func
}

... itemId colmodel column editor

               colMd[ t ].editor =
               {
                  type: "textbox",
                  init: combo_box( 'phpf/prg_combo.php?tps=' + myParam ) // added own needful parameter
               }

Thanks in advance ...

[paramvir]

Define options as value/ label pairs.

Code: [Select]

var ships = [
      { "value": "", "label": "" },
      { "value": "SE", "label": "Speedy Express" },
      { "value": "UP", "label": "United Package" },
      { "value": "FS", "label": "Federal Shipping" }
];

Define the autoComplete to accomodate 2 fields.

Code: [Select]

function autoCompleteEditor( source, di ) {
    return function (ui) {
        ui.$cell.addClass('ui-front');//so that dropdown remains with input.           
        //initialize the editor
        ui.$editor.autocomplete({                   
            source: source,
            position: {
                collision: 'flipfit',
                within: ui.$editor.closest(".pq-grid")
            },
    select: function (event, ui2) {
ui.$editor.val( ui2.item.label ); // display the selected text
ui.rowData[di] = ui2.item.value; // save selected id to hidden input
return false;
            },
            minLength: 0
        }).focus(function () {
            //open the autocomplete upon focus               
            $(this).autocomplete("search", "");
        });
    }
}

Then define columns in colModel.

Code: [Select]

            { dataIndx: 'ShipViaId', hidden: true }, //hidden column to store ShipVia Id.
    {
        title: "Shipping Via", dataIndx: "ShipVia", width: 110,
        cls: 'pq-dropdown pq-side-icon',
        editor: {
            type: 'textbox',            
    init: autoCompleteEditor(ships, 'ShipViaId' )
        }
     },


[Rimokas]

Thanks for your reply ...

Interesting ... The 2 columns model, with 1 hidden not fit to me ... Because I'm having this columns both in the grid. Name is not editable. Now changing itemId, user must to see and item Name in the list ...
Sorry, your sample maybe works only with arrays ...

I tried something in other way. In Php from mysql I'm filling "id": as itemId and "text" : as itemId + itemName .
It return fine . But ... the select isn't seeing "text" dimension ... added picture, it show problem ...

Mine source - simply copied your and changed dimensions name, "id" and "text" :

Code: [Select]

function autoCompleteEditor( source, di ) {
    return function (ui) {
        ui.$cell.addClass('ui-front');//so that dropdown remains with input.           
        //initialize the editor
        ui.$editor.autocomplete({                   
            source: source,
            position: {
                collision: 'flipfit',
                within: ui.$editor.closest(".pq-grid")
            },
    select: function (event, ui2) {
ui.$editor.val( ui2.item.text ); // display the selected text
ui.rowData[di] = ui2.item.id; // save selected id
return false;
            },
            minLength: 0
        }).focus(function () {
            //open the autocomplete upon focus               
            $(this).autocomplete("search", "");
        });
    }
}
The main difference here, that your source is "ships" array, not php query response ...

Maybe something not understand ?

[Rimokas]

Woww  !

I changed in php "id" - > "value" and "text" -> "label"

It's working FINE! Thanks you! Problem solved ...