jqgrid autocomplete cannot post id column

Question

I've following the instruction on jqGrid inline edit: odd behavior with an autocomplete column

But I've got wrong with it ...

I've already paste into :

{name:'SUPPLIERID', index:'SUPPLIERID', width:10, editable:true,align:'right',formatter: 'number', hidden: true},
{name:'SUPPLIER', index:'SUPPLIER', width:10, editable:true,edittype: 'text',
           editoptions:{dataInit: function(elem) { 
                $(elem).autocomplete({
                    source: function(request, response) {$.getJSON("../../main/lookup/supplierExt.php", { q: request.term }, response)},
                    select: function(event, ui){
                        //alert (ui.item.SUPPLIERID);
                        var rowId = $("#g_terima").jqGrid('getGridParam', 'selrow');
                        var rowData = $("#g_terima").jqGrid('getRowData', rowId);
                        rowData.SUPPLIERID = ui.item.SUPPLIERID;
                        $("#g_terima").jqGrid('setRowData', rowId, rowData);

                        }
                });
            }}},

and our lookup Json :

    <?php
session_start();
include($_SESSION[apppath].'modules/firebird.php');
$term = trim(strip_tags($_REQUEST['q']));

$sql = "select s.supplierid, c.contact supplier from supplier s 
left join contact c on c.contactid = s.contactid
where s.companyid = $_SESSION[companyid] and c.contact like '%".$term."%'  
order by c.contact ";
$stmt = $conn->query($sql);
while($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
    $row['id']=(int)$row[SUPPLIERID];
    $row['SUPPLIERID']=(int)$row[SUPPLIERID];
    $row['value']=htmlentities(stripslashes($row[SUPPLIER]));

    $row['label']=htmlentities(stripslashes($row[SUPPLIER]));
    $row_set[] = $row;
}

echo json_encode($row_set);
return true;
//exit();
?>

Autocomplete looks promising, but I can't passing ID / SUPPLIERID into SUPPLIERID COLUMN. Please is there something I make wrong ? I couldn't find it...

After pasting Oleg suggestion :

    var g_terima = '#g_terima'; var pg_terima = '#pg_terima'; var file_terima = 'bip_terima_.php';
jQuery(document).ready(function(){ 
jQuery(g_terima).jqGrid({
    url:file_terima,
    editurl: file_terima,
    datatype: 'json',
    mtype: 'GET',
    colNames:['Tgl','SUPPLIERID', 'Supplier', 'Internal','Peternak','Tipe', 'Produk', 'Jml/Berat', 'Harga','Total','PPN', 'Total+PPN'
     , 'Inv No','Tax No','NoId'],
    colModel :[ 
    {name:'TGL', index:'TGL', width:9, editable:true,sorttype:'date',
                editoptions:{
                    dataInit:function(el){$(el).datepicker({dateFormat:'yy-mm-dd',changeMonth: true,changeYear: true})}},
                    searchoptions:{dataInit:function(el){$(el).datepicker({dateFormat:'yy-mm-dd',changeMonth: true,changeYear: true})}}
            }, 
      {name:'SUPPLIERID', index:'SUPPLIERID', width:10, editable:true,align:'right',formatter: 'number', hidden: true},
      {name:'SUPPLIER', index:'SUPPLIER', width:10, editable:true,edittype: 'text',
           editoptions:{dataInit: function(elem) { 
                var $self = $(this);
                $(elem).autocomplete({
                    source: function(request, response) {$.getJSON("../../main/lookup/supplierExt.php", { q: request.term }, response)},
                    select: function(event, ui){
                        //alert (ui.item.SUPPLIERID);
                        var rowId = $self.jqGrid('getGridParam', 'selrow');
                        $("#" + rowId + "_SUPPLIERID").val(ui.item.SUPPLIERID);

                        }
                });
            }}},

SUPPLIERID COLUMN still null value...

enter image description here

Oleg · Accepted Answer · 2014-12-26T09:14:03.183

You posted not enough details about what you do. Which editing mode you use? If you use inline editing then you can't use setRowData method during editing of the row, but you still can use jQuery.val to modify the value of editing cell which is in editing mode.

If you use inline editing then the id of the cell which is editing will be constructed from the rowid, _ and the column name (SUPPLIERID in you case). So you can replace getRowData and setRowData from your code to something like the following:

dataInit: function(elem) {
    var $self = $(this);
    $(elem).autocomplete({
        source: function(request, response) {
            $.getJSON(
                "../../main/lookup/supplierExt.php",
                { q: request.term },
                response
            );
        },
        select: function (event, ui) {
            var rowId = $self.jqGrid('getGridParam', 'selrow');
            $("#" + rowId + "_SUPPLIERID").val(ui.item.SUPPLIERID);
        }
    });
}

UPDATED: It's really important to know which editing mode you use because id of input fields will be set based on different rules. The below code detect whether form editing, inline editing or toolbar filter will be used which to choose the corresponding id.

select: function (event, ui) {
    var id;
    if ($(elem).hasClass("FormElement")) {
        // form editing
        id = "SUPPLIERID";
    } else if ($(elem).closest(".ui-search-toolbar").length > 0) {
        // filter foolbar
        id = "gs_SUPPLIERID";
    } else if ($(elem).closest("tr.jqgrow").length > 0) {
        id = $(elem).closest("tr.jqgrow").attr("id") + "_SUPPLIERID";
    }
    $("#" + id).val(ui.item.SUPPLIERID);
}

Hi Oleg, Thanks for your answer... I want this can be edit through form and inline editing... this is my application screenshot... [IMG]http://i62.tinypic.com/2q2r5te.png[/IMG] i've copy your suggestion, but supplierid column still null. If i try to alert(ui.item.SUPPLIERID ), a number has already there. — ari adrianto, Dec 26 '14 at 02:02
@ariadrianto: You should use *another* `id` in case of form editing: just `$("#SUPPLIERID").val(ui.item.SUPPLIERID);` Alternatively you can detect the editing mode like I described in the **UPDATED** part of my answer. — Oleg, Dec 26 '14 at 09:16

jqgrid autocomplete cannot post id column

1 Answers1