0

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>
Yola
  • 18,496
  • 11
  • 65
  • 106
  • Do you need it in inline editing? – joni_demon Mar 14 '12 at 12:34
  • Look at [the answer](http://stackoverflow.com/a/7392816/315935) which contains [the demo project](http://www.ok-soft-gmbh.com/jqGrid/jqGridDemoVS2010_withAutocomplete.zip) which you can download. The autocomplete has sense either in searching or in editing. In case of inline editing it will be displayed in the cell of the grid. What exactly need you? – Oleg Mar 14 '12 at 12:34
  • cells of the grid has no controls where Autocomplete can be displayed. Could you describe your situation more clear: do you use custom formatter to create cells with input fields or you use inline editing in one line or you have some other situation? Do you use local `datatype` or need to get the data from the server? In any way more information is required. You can just append your question with the JavaScript code which you use currently. – Oleg Mar 14 '12 at 12:51
  • 1
    Please write a comment with `@Oleg` if you modify the text of the question. It gives notification. From your code is not clear *what can be used as the source of the texts displayed by Autocomplete*? Moreover I strictly recommend you to use `addRowData` only it it really required. In the demo you should better use `data: myphonedata` option of jqGrid to create the grid **with the data**. If you have many rows it works much more quickly, sorting and paging of data will be automatically enabled too. – Oleg Mar 14 '12 at 13:08

2 Answers2

1

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.

Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • +1, and i figured out autocomplete. now working on grid in cell. it may be much sophisticated or even impossible(( – Yola Mar 14 '12 at 14:03
0

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

joni_demon
  • 656
  • 6
  • 12