2

I am new to jqGrid. Can you please help me on this request.

I would like to open a new modal dialog when a cell is double clicked in jqGrid. Each cell will open a different modal dialog and that depends on the column, row combination. So this has to be dynamically decided.

I am using asp.net mvc views to be shown in the dialog.

Adding the code that I am working on : (not formatted still)

     $.ajax(
                {
                    type: "GET",
                    url: "/Forecast/GetColumnsAndData/",
                    data: "",
                    dataType: "json",
                    success: function (result) {
                        colN = jQuery.parseJSON(result.colNames);
                        colM = jQuery.parseJSON(result.colModel);
                        jQuery("#rowed2").jqGrid({
                            url: '/Forecast/GridData/',
                            datatype: 'json',
                            mtype: 'GET',
                            colNames: colN,
                            colModel: colM,
                            rowNum: 10,
                            rowList: [10, 20, 30],
                            viewrecords: true,
                            onCellSelect: function (rowid, iCol, cellcontent) {
                                //Need to add the code for modal dialog and criteria check
                            },
                            gridComplete: function () {
                                var ids = jQuery("#rowed2").jqGrid('getDataIDs');
                                for (var i = 0; i < ids.length; i++) {
                                    var cl = ids[i];
                                    be = "<input style='height:22px;width:20px;' type='button' value='E' onclick=\"editrows('" + cl + "');\"  />";
                                    se = "<input style='height:22px;width:20px;' type='button' value='S' onclick=\"jQuery('#rowed2').saveRow('" + cl + "', '','/Forecast/GridDataSave/');\"  />";
                                    ce = "<input style='height:22px;width:20px;' type='button' value='C' onclick=\"jQuery('#rowed2').restoreRow('" + cl + "');\" />";
                                    jQuery("#rowed2").jqGrid('setRowData', ids[i], { act: be + se + ce });
                                }
                            },

                            caption: "Forecast Details"
                        });
                        jQuery("#rowed2").jqGrid('navGrid', "#prowed2", { edit: true, add: false, del: false });
                        jQuery("#rowed2").jqGrid('setGroupHeaders', {
                            useColSpanStyle: true,
                            groupHeaders: [
                                { startColumnName: 'Hours1', numberOfColumns: 2, titleText: '<center>October</center>' },
                                { startColumnName: 'Hours2', numberOfColumns: 2, titleText: '<center>November</center>' }
                              ]
                        });
                    },
                    error: function (x, e) {
                        alert(x.readyState + " " + x.status + " " + e.msg);
                    }
                });
j j
  • 65
  • 1
  • 2
  • 7
  • Can you post the code that you have already tried that is not working? – Ren Oct 31 '12 at 11:21
  • Look at [the old answer](http://stackoverflow.com/a/4983690/315935) for example. You should don't forget to include `editable: true` option in the definition of all columns of `colModel` which you want edit in the dialog. – Oleg Oct 31 '12 at 11:25
  • @Ren: Added the code for your reference. One more question that I have is regarding the group headers. How can I dynamically ( from backend) decide the headers and grouping) Currently my data and columns comes from backend. – j j Oct 31 '12 at 12:14
  • @Oleg: Thanks for that link. My intention in the new dialog is to get some information for calculation and send it to DB. And once I close the dialog the jqgrid will have to reload (get data from backend - from DB) – j j Oct 31 '12 at 12:16
  • You can use `groupingGroupBy` to set columns used for grouping and use `groupingRemove` to remove all grouping from jqGrid. You can lake a look in [the official jqGrid demo](http://trirand.com/blog/jqgrid/jqgrid.html) and open the demo under "Grouping" / "Dynamically change grouping". You can make customization of editing dialog inside of [beforeShowForm](http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing#events) callback. See example [here](http://stackoverflow.com/a/5512509/315935). After clicking on "Save" button the modified data will be sent to the server and grid reloaded. – Oleg Oct 31 '12 at 12:54
  • Thanks a lot Oleg. beforeShowForm will be of great use. And I shall try the idea for groupingGroupBy for headers. – j j Nov 01 '12 at 05:47

1 Answers1

1

There's a jqGrid event for double click which you can use in jqGrid

ondblClickRow: function (rowId, iRow, iCol, e) {
    //new modal based on above
}
dove
  • 20,469
  • 14
  • 82
  • 108
  • Thank you. I shall use this. I see one more event 'onCellSelect'. I shall work on these. – j j Oct 31 '12 at 11:25