how to open a modal window on jqgrid edit?

how to open a small form or window from Jqgrid cell Edit

• I'm new to jquery. My requirement is that I need to show a MultiLine text box value in Jqgrid and allow the user to edit it. Since my grid has many columns, I thought when the user edits the Multiline textbox in jqgrid, popup a small window where user can enter value and on clicking a button, the value will be returned back to multiline textbox in jqgrid. Again when the user wants to see them, clicking on the Multiline box should open the window with the text entered. Could anyone help me with this? Thanks Below is my grid details..Its an editable grid. My requirement is to open a pop up any time the user clicks on the Freq Missed Questions column. function loadCustomerBenefitResultsGrid() { var lastsel; jQuery("#CustomerSavingsView").jqGrid( { dataType:"local", colNames: ['UID','Date','QPlus Savings', 'Savings Available', 'Consignment Savings','Cost Increases','Distribution Fees', 'Clinical Review', 'Inventory Red','Clinical Time', 'Logistical Time', 'SpaceUtil Time','GreenSmart Savings','Gold Standard', '%Staff Engaged in Courses','InsertUpdateDel','IsEdited', 'CustomerID','GreenItems in Trays','SSF Layout', 'StaffTest Scores','Freq Missed Questions','Popular Courses','Delete'], colModel: [ {name:'UID',index:'UID', width:40, sorttype:'string',"key": true,hidden:true}, {name:'Date', index:'Date',width:100,align:'center', sorttype: 'string',editable:true, editoptions:{size:20, dataInit:function(el) { $(el).datepicker({dateFormat:'mm/dd/yy'}); }, defaultValue: function() { var currentTime = new Date(); var month = parseInt(currentTime.getMonth() + 1); month = month <= 9 ? "0"+month : month; var day = currentTime.getDate(); day = day <= 9 ? "0"+day : day; var year = currentTime.getFullYear(); return month+"/"+day + "/"+year; } } }, { name: 'ProductSavings', index: 'ProductSavings',width:70,align:'center', sorttype: 'string',editable: true,edittype: 'text', editoptions: { size: 10} }, { name: 'SavingsstillAvailable', index: 'SavingsstillAvailable',width:70,align:'center', sorttype: 'string',editable: true,edittype: 'text', editoptions: { size: 10} }, { name: 'Consignment', index: 'Consignment',width:105,align:'center', sorttype: 'string',editable: true,edittype: 'text', editoptions: { size: 10} }, { name: 'CostIncreases', index: 'CostIncreases',width:80,align:'center', sorttype: 'string',editable: true,edittype: 'text', editoptions: { size: 10} }, { name: 'Distribution', index: 'Distribution',width:110,align:'center', sorttype: 'string',editable: true,edittype: 'text', editoptions: { size: 10} }, { name: 'ClinicalReview', index: 'ClinicalReview',width:70,align:'center', sorttype: 'string',editable: true,edittype: 'text', editoptions: { size: 10} }, { name: 'InventoryRed', index: 'InventoryRed',width:90,align:'center', sorttype: 'string',editable: true,edittype: 'text', editoptions: { size: 10} }, { name: 'ClinicalTime', index: 'ClinicalTime',width:70,align:'center', sorttype: 'string',editable: true,edittype: 'text', editoptions: { size: 10} }, { name: 'LogisticalTime', index: 'LogisticalTime',width:90,align:'center', sorttype: 'string',editable: true,edittype: 'text', editoptions: { size: 10} }, { name: 'SpaceUtilTime', index: 'SpaceUtilTime',width:90,align:'center', sorttype: 'string',editable: true,edittype: 'text', editoptions: { size: 10} }, { name: 'GreenSmart', index: 'GreenSmartSavings',width:90,align:'center', sorttype: 'string',editable: true,edittype: 'text', editoptions: { size: 10} }, { name: 'GoldStandard', index: 'GoldStandard',width:80,align:'center', sorttype: 'string',editable: true,edittype: 'text',editoptions: { size: 10} }, { name: 'StaffTestScores', index: 'StaffTestScores',width:80,align:'center', sorttype: 'string',editable: true,edittype: 'text', editoptions: { size: 10} }, { name: 'InsertUpdateDel', index: 'InsertUpdateDel',width: 100, align:'center', sorttype: 'string',hidden:true}, { name: 'IsEdited', index: 'IsEdited',width: 40, align:'center', sorttype: 'string',hidden:true}, { name: 'CustomerID', index: 'CustomerID',width: 40, align:'center', sorttype: 'string',hidden:true}, { name: 'GreenItemsinTray', index: 'GreenItemsinTray',width:90,align:'center', sorttype: 'string',editable: true,edittype: 'text', editoptions: { size: 10} }, { name: 'SpacestoragefacultyAnalysis', index: 'SpacestoragefacultyAnalysis',width:80,align:'center', sorttype: 'string',editable: true,edittype: 'text', editoptions: { size: 10} }, { name: 'StaffEducationalCourses', index: 'StaffEducationalCourses',width:80,align:'center', sorttype: 'string',editable: true,edittype: 'text', editoptions: { size: 10} }, { name: 'FreqMissedQuestions', index: 'FreqMissedQuestions',width:200, sorttype: 'string',editable: true,edittype:"textarea", editoptions:{rows:"3",cols:"25"}} , { name: 'PopularCourses', index: 'PopularCourses',width:150,sorttype: 'string',editable: true,edittype:"textarea", editoptions:{rows:"3",cols:"20"}} , { name: 'Delete', index: 'Delete',width: 90, align:'center' } ], height: 250, width:1175, gridview:true, hidegrid: false, viewrecords:true, sortable: true, sortname: 'Date', sortorder: "asc", editurl: "clientArray", onSelectRow: function(id) { if (id && id !== lastsel) { jQuery("#CustomerSavingsView").saveRow(lastsel,false,'clientArray'); jQuery("#CustomerSavingsView").editRow(id,true); lastsel = id; //Get the current row var currentRow = jQuery("#CustomerSavingsView").getRowData(id); //For Insert if(currentRow['InsertUpdateDel']!= null && currentRow['InsertUpdateDel'] == "Inserted") { changedRowsBeforeInsert.push(id); } //For Update if(currentRow['InsertUpdateDel']!= null && currentRow['InsertUpdateDel'] == "Updated") { changedRows.push(id); } } else { jQuery("#CustomerSavingsView").saveRow(lastsel,false,'clientArray'); jQuery("#CustomerSavingsView").editRow(id,true); lastsel = id; //Get the current row var currentRow = jQuery("#CustomerSavingsView").getRowData(id); //For Insert if(currentRow['InsertUpdateDel']!= null && currentRow['InsertUpdateDel'] == "Inserted") { changedRowsBeforeInsert.push(id); } //For Update if(currentRow['InsertUpdateDel']!= null && currentRow['InsertUpdateDel'] == "Updated") { changedRows.push(id); } } //Limit the Keypress $('input[name=ProductSavings]').limitkeypress({ rexp: /^[+]?\d*\.?\d*$/ }); $('input[name=Consignment]').limitkeypress({ rexp: /^[+]?\d*\.?\d*$/ }); $('input[name=CostIncreases]').limitkeypress({ rexp: /^[+]?\d*\.?\d*$/ }); $('input[name=Distribution]').limitkeypress({ rexp: /^[+]?\d*\.?\d*$/ }); $('input[name=ClinicalReview]').limitkeypress({ rexp:/^[+]?\d*\.?\d*$/ }); $('input[name=InventoryRed]').limitkeypress({ rexp: /^[+]?\d*\.?\d*$/ }); $('input[name=ClinicalTime]').limitkeypress({ rexp: /^[+]?\d*\.?\d*$/ }); $('input[name=LogisticalTime]').limitkeypress({ rexp:/^[+]?\d*\.?\d*$/ }); $('input[name=SpaceUtilTime]').limitkeypress({ rexp: /^[+]?\d*\.?\d*$/ }); $('input[name=GreenSmart]').limitkeypress({ rexp: /^[+]?\d*\.?\d*$/ }); $('input[name=StaffTestScores]').limitkeypress({ rexp: /^[+]?\d*\.?\d*$/ }); $('input[name=SavingsstillAvailable]').limitkeypress({ rexp: /^[+]?\d*\.?\d*$/ }); $('input[name=GreenItemsinTray]').limitkeypress({ rexp:/^[+]?\d*\.?\d*$/ }); $('input[name=SpacestoragefacultyAnalysis]').limitkeypress({ rexp: /^[+]?\d*\.?\d*$/ }); $('input[name=StaffEducationalCourses]').limitkeypress({ rexp: /^[+]?\d*\.?\d*$/ }); }, gridComplete: function () { var ids = jQuery("#CustomerSavingsView").jqGrid('getDataIDs'); if (ids.length > 0) { for (var i = 0; i < ids.length; i++) { var cl = ids[i]; cb = "<input type='checkbox' id='chkDelete"+cl+"' value='" + cl + "' />"; jQuery("#CustomerSavingsView").jqGrid('setRowData', cl, { Delete: cb}); } } } }); }

• Answer:

  Begin by referring to this page: http://www.trirand.com/jqgridwiki/doku.php?id=wiki:events Find the option for onCellSelect, this is the event you'll need to listen bind. onCellSelect : function (rowid,iCol, cellcontent, e) { // ... } Within that event, check to make sure iCol is the index of your particular text box cell (since this event will fire for every cell, and you only want this functionality for a particular one). If it is the correct cell, then you have a few ways you could accomplish the actual editing. I would do this by popping open a http://jqueryui.com/demos/dialog/ with a form embedded. I would also use jquery to populate the form contents with the rowID of the record that was clicked on, and load a textarea field with the current value of the cell (available within your event handler as cellcontent). You could then use jQuery's Ajax form submit options (see .serialize(), and $.ajax()) to post the new value back to the server to have the value updated on the backend (in say, a database update). Finally, in your Ajax success handler, you close the modal dialog and run a .trigger("reloadGrid"); on your table, to reload the grid with the current value.