CODEWITHSUNDEEP
jqueryjqgridgrid
Yola
Yola

Reputation: 19033

JqGrid and custom cells. Autocomplete and grid in a cell. Is it possible. How?

Need to use autocomplete and grid inside a cell of jqGrid. Is it possible. For now i know only how to format text inside cell.

EDITED: Let assume what i need autocomplete for num or note.

<table id="phoneList"><tr><td/></tr></table> 
<div id="pagerPhone"></div> 

<script language=javascript>
var lastPhoneId;
var lastPhoneSel;
var phoneGrid = "#phoneList";
var phonePager = "#pagerPhone";
jQuery(document).ready(function(){ 
  jQuery(phoneGrid).jqGrid({
    datatype: 'local',
    editurl:'clientArray',
    colNames:['num','note'],
    colModel :[ 
      {name:'num', index:'num', editable: true, width:200, sortable:false}, 
      {name:'note', index:'note', editable: true, width:300, sortable:false, edittype: 'text', editoptions: {
        dataInit:
        function (elem) {
            $(elem).autocomplete(["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"]);
        } 
    }} 
    ],
    pager: phonePager,
    onSelectRow: function(id){
          if(id && id!==lastPhoneSel){ 
                 jQuery(phoneGrid).restoreRow(lastPhoneSel); 
               lastPhoneSel=id; 
            }
            jQuery(phoneGrid).editRow(id, true); 
      }
  });
  var myphonedata = [
            {num:"80636247704", note:""}
    ];
  for(lastPhoneId=0;lastPhoneId<myphonedata.length;lastPhoneId++)
        jQuery(phoneGrid).addRowData(lastPhoneId, myphonedata[lastPhoneId]);
    jQuery(phoneGrid).jqGrid('navGrid',phonePager,{edit:false,add:false,del:false,search:false})
        .jqGrid('navButtonAdd',phonePager,{
        caption:"", 
        buttonicon :'ui-icon-circle-minus',
            onClickButton:function(id){
                jQuery(phoneGrid).delRowData(lastPhoneSel);
            },
            title:"",
            position:"first"
      })
      .jqGrid('navButtonAdd',phonePager,{
            caption:"", 
            buttonicon :'ui-icon-circle-plus',
            onClickButton:function(id){
                jQuery(phoneGrid).addRowData(lastPhoneId++, {num:"", note:""});
            },
            title:"",
            position:"first"
      });


});
</script>

Upvotes: 0

Views: 1831

Answers (2)

Oleg
Oleg

Reputation: 221997

If you have full local data and need create jQuery UI Autocomplete during inline editing of the data you can follow the code from the answer. It shows the usage of Autocomplete with searching of data, but the same will works in case of data editing too. You should just use editoptions instead of searchoptions. If you has another source of data which you can use for filling of Autocomplete source you can do this in exactly the same way.

Upvotes: 1

joni_demon
joni_demon

Reputation: 666

Try to use this,maybe it help

onSelectRow:function(){


    $(selector).autocomplete("your_url", {
        width: 200,
        selectFirst: true
    }); 

    $(selector).datepicker({
        dateFormat: 'yy-mm-dd',
        autoSize: true,
        changeYear: true
    });
}

I use it in inline editing

Upvotes: 0

Related Questions