-1

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");
});
CodeMad
  • 950
  • 2
  • 12
  • 30

1 Answers1

2

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);
});
Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • Oleg, great!!! Thanks for the sample code. Auto-complete is now working. There is an attribute called "searchOnEnter=true"; but i want to "saveOnEnter" that should call a controller action with all entered values; also should insert another blank row. – CodeMad Jan 23 '12 at 08:20
  • 1
    @CodeMad: You are welcome! About saving on enter and inserting of new row: `keys: true` parameter of `editRow` will implement saving on enter. Inside of `aftersavefunc``you can implement any additional actions like inserting new row if it's required. – Oleg Jan 23 '12 at 08:39
  • Thanks again. I tried it, but somehow not getting clarity. So tried using this. var emptyRow = [{ID:"1",col1:"",col2:"",col3:"" }]; $("#grid_id").addRowData(emptyRow.id, emptyRow); this created an empty row, but edit was disabled. I want the whole row to be enabled for me to edit. – CodeMad Jan 23 '12 at 13:29
  • @CodeMad: You never posted full example which you use. If all grid columns have `editable: true` property the new added row will be editable. The question is only how you activate the editing? Where you call `editRow` method? If you call `editRow` inside of `onSelectRow` for example all should work. – Oleg Jan 23 '12 at 13:43
  • Oleg, I have edited my question with the complete code block. My concerns is, "Click to add a row" button should create a new editable row so that i can simply enter values by pressing tab key – CodeMad Jan 23 '12 at 14:07
  • In "jQuery.jqGrid.src.js" file, i changed "keys" to true. No other changes made in any file. – CodeMad Jan 23 '12 at 14:13
  • 1
    @CodeMad: Something is wrong with the code which you posted. The `'Col1'` column has no `editable: true` property. `dataInit` should be inside of `editoptions`. Moreover I don't see any all of `editRow`. You should not modify "jQuery.jqGrid.src.js" file to change "keys" to true. You should just use the corresponding parameter of `editRow` method. – Oleg Jan 23 '12 at 14:41
  • Oleg, Thanks for the suggestion. Its now adding an empty editable row. But the problem is, it adds for the first time which is fine. But if i click the "Click to add a row" button for the Second time, the row is added but its not editable. One finding is, "onSelectRow: function(currentSelectedRow)" is called only for the first time. Can you please tell me why this is not happening for the second time onwards? Its driving me nuts. – CodeMad Jan 24 '12 at 06:13
  • @CodeMad: Your code has at least two important problems: 1) your code produces id duplicates 2) you have to call `editRow` explicitly after adding new row with respect of `addRowData`; you can call `setSelection` instead. To the first problem I recommend you to read [the answer](http://stackoverflow.com/a/6467708/315935) and use `undefined` or `$.jgrid.randId()` as the first parameter of `addRowData`. The second problem is simple. The problem is that new added row is *editable*, but if you want to change it's editing state you have to call `editRow` either explicitly or implicitly by selection – Oleg Jan 24 '12 at 07:28
  • Oleg, I understand the points here. As you said, I have made the id column "undefined" but still its a problem. Please note: When i add a new row for the first time, its editable. Its calling "onSelectRow" which contains 'editRow' and makes it editable. But the problem comes only from second time onwards. – CodeMad Jan 24 '12 at 07:44
  • It would be helpful if you can provide me a code sample / edit the code posted by me on how to add an empty row and call "editRow" to make it editable. – CodeMad Jan 24 '12 at 07:55
  • 1
    @CodeMad: I understand, that if you add *the first row* it can be automatically be selected. You should select the new added row *explicitly*. If you use "" as the rowid it will be interpret in the same way as `undefined`: the new rowid will be generated with `$.jgrid.randId()`. So I suggest that you use the following code inside of `click` handler: `var myGrid = $("#jqgSkills"), rowid = $.jgrid.randId(); myGrid.jqGrid('addRowData', rowid, {ID: "", SkillName: "", RequiredDesired: "", RelevantExp: ""})); myGrid.jqGrid('setSelection', rowid);`. In the way you *know* the rowid and can use it. – Oleg Jan 24 '12 at 08:38
  • 1
    @CodeMad: You are welcome! I am glad to read that I could help you. – Oleg Jan 24 '12 at 10:23