jquery - Razor: Auto-complete text box inside jqGrid, How to bind values?

Question

I'm developing a page where i need to show a jqGrid with inline editing mode. (Razor view, MVC3) The Grid will have no rows initially but an empty row to add items and hitting "enter" upon the last field should save the row data, and then empty 2nd row should get created.

There are 4 columns in the Grid and the first column should be auto-complete. I have already written multiselect jqGrid which works fine. But now the approach changed to auto-complete.

I have already written controller method that talks to DB and gets me the values till controller. Those values are the ones to be available for auto-complete.

Can someone throw some light on,

1. Writing jqGrid with auto-complete text box inside, which binds controller returned values(I could achieve it by keeping text box outside grid)

2. Saving first row upon hitting enter and creating an empty second row

Edited: Here is my updated code:

   myGrid.jqGrid({
                url: '@Url.Action("Skills")',
                onSelectRow: function(currentSelectedRow)  {
                    alert("Always triggered inside");
                    if(currentSelectedRow && currentSelectedRow != $.lastSelectedRow){
                        alert("Before Block 1");
                        $('#jqgSkills').jqGrid('saveRow', $.lastSelectedRow, false); 
                        alert("After Block 1");
                        $.lastSelectedRow = currentSelectedRow; 
                   }
                    alert("before block 2");
                    $('#jqgSkills').jqGrid('editRow', $.lastSelectedRow, true); 
                    alert("after block 2");
                },

                datatype: 'json',
                mtype: 'POST',
                colNames: ['ID', 'SkillName', 'SkillType', 'RequiredDesired', 'RelevantExp'],
                colModel: [

                    {
                    name:'ID', index: 'ID', editable: true, width: 10
                    },
                    { name: 'SkillName', index: 'SkillName', editable: true, width: 150,
                        editoptions: {
                            sopt: ['cn', 'nc', 'bw', 'bn', 'eq', 'ne', 'ew', 'en', 'lt', 'le', 'gt', 'ge'],
                            dataInit: function (elem) {
                                $(elem).autocomplete({ source: '@Url.Action("GetSkillNameAutocomplete")' });
                            }
                        }
                    },
                    { name: 'SkillType', editable: true, index: 'SkillType', width: 40, edittype: 'select', editoptions: { dataUrl: '@Url.Action("SkillTypes")' }
                    },
                    { name: 'RequiredDesired', editable: true, index: 'RequiredDesired', width: 40, edittype:"select", editoptions:{value:":;R:Required;D:Desired"}
                    },
                    { name: 'RelevantExp', editable: true, index: 'RelevantExp', width: 40, key: true
                    },
                ],
               // pager: '#jqgpSkills',
                autowidth: true,
                rowNum: 10,
                rowList: [5, 10, 20, 50],
                sortname: 'SkillName',
                sortorder: 'asc',
                rownumbers: true,
                viewrecords: true,
                altRows: true,
                altclass: 'myAltRowClass',
                height: '100%',
                gridview: true,
                jsonReader: { cell: "" },
                caption: 'RRF - Skill Association',
            });

Here is "Click to add a row" button

$("#addrow").click( function(currentSelectedRow) {

            var emptyRow = [{ID:"",SkillName:"",RequiredDesired:"",RelevantExp:"" }];
            alert("Before new row addition");
            jQuery("#jqgSkills").addRowData(emptyRow.id, emptyRow);
            alert("new row added");
});

Answer 1

Look at the answer with the demo project. It shows how to use jQuery UI Autocomplete in searching. If you just define dataInit inside of editoptions instead of searchoptions you will have what you need.

UPDATED: You should read the answer which describes how jqGrid generate new rowid if the id (the first parameter) in the addRowData is undefined or an empty string "". To fix your current problem you can generate the rowid yourself and select the new added row explicitly with for example the following code:

$("#addrow").click( function(currentSelectedRow) {
    var myGrid = $("#jqgSkills"),
        rowid = $.jgrid.randId();

    myGrid.jqGrid('addRowData', rowid,
       {ID: "", SkillName: "", RequiredDesired: "", RelevantExp: ""}));
    myGrid.jqGrid('setSelection', rowid);
});