Issues with modal Popup

[DollyBMember]

Hi,
I am facing 2 issues when I try to open a modal popup on clicking on Grid Cell.
Issue1: The Grid Cell is still editable even after te modal popup is opened.
Issue2: Save and Cancel buttons not being displayed in modal popup.
Here is my code:
var editrow = -1;
	    $("#jqxgridDR").bind('cellbeginedit', function (event,row) {
				
                var args = event.args;
				if(args.datafield == "Description"){
					// open the popup window when the user clicks a button.
                     editrow = row;
                     var offset = $("#jqxgridDR").offset();
                     $("#popupWindow").jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60} });
					 // get the clicked row's data and initialize the input fields.
                     var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow);
					 $("#description").val(dataRecord.description);
					 // show the popup window.
                     $("#popupWindow").jqxWindow('show');
					}
                $("#cellbegineditdrevent").html("Event Type: cellbeginedit, Column: " + args.datafield + ", Row: " + (1 + args.rowindex) + ", Value: " + args.value);
            });
$("#jqxgridDR").jqxGrid(
            {
                width: 700,
                source: reqDataAdapter,
                editable: true,
                pageable: true,
				editmode: 'click',
                autoheight: true,
                theme: theme,
                selectionmode: 'singlecell',
                columns: [                  
		  			{ text: 'name', datafield: 'name', columntype: 'textbox', width: 100, pinned: true, editable: false }                
                ]
            });	    
            // change columns collection. Requirments
            $("#jqxgridDR").jqxGrid({ columns: reqGridColumns });
			
			// initialize the popup window and buttons.
            $("#popupWindow").jqxWindow({ width: 600, height: 300, resizable: false, theme: theme, isModal: true, autoOpen: false, modalOpacity: 0.01 });
            $("#Cancel").jqxButton({ theme: theme });
            $("#Save").jqxButton({ theme: theme });
            // update the edited row when the user clicks the 'Save' button.
            $("#Save").click(function () {
                if (editrow >= 0) {
                    var row = { firstname: $("#firstName").val(), lastname: $("#lastName").val(), productname: $("#product").val(),
                        quantity: parseInt($("#quantity").jqxNumberInput('decimal')), price: parseFloat($("#price").jqxNumberInput('decimal'))
                    };
                    $('#jqxgridDR').jqxGrid('updaterow', editrow, row);
                    $("#popupWindow").jqxWindow('hide');
                }
            });
        <div style="width: 100%; height: 650px; border: 0px solid #ccc; margin-top: 10px;" id="mainDemoContainer">
            <div id="eventWindow">
                <div> <mars:marstypeimage type="<%=bObj.getTypeName()%>" width="23" height="23" border="0" alt="View Object"/><font size="2"><B><I><%=bObj.getTypeName()%></I>:&nbsp;&nbsp;<%=bObj.getName()%>&nbsp;<%=bObj.getRevision()%>&nbsp;-&nbsp;<%=bObj.getAttributeValue(context, "Title", true)%></B></font></div>
                <div style="overflow: hidden;" id="windowContent">
                    <div id="tab1">
                        <ul style="margin-left: 30px;">
                            <li>Details</li>
                            <li>Attachments</li>
							<li>Reports</li>
                        </ul>
                        <div>
						   <div id="jqxgrid"></div>
                        </div>   
						<div>			
							<div style="height: 25px; padding: 5px;" class="jqx-widget-header">						        
						        <input type="button" value="Add File" style="float: left;" id="addFileButton" onclick="javascript:openAddFilePopup()" />
						        <div style="margin-left: 5px; float: left;" id='jqxWidgetButton'></div>						        
						    </div>						
                            <div id="jqxgrid2"></div> 
                        </div>
						<div>
                            <div id="jqxgridreports"></div>
                        </div>
                    </div>
					<b>Connected Items:</b>
					<div id="tab2">
						<ul style="margin-left: 30px;">
                            <li>Detailed Requirements</li>
                            <li>Input Requirements</li>
                        </ul>
						<div>						
                           <div id="jqxgridDR"></div>
						   <div style="margin-top: 30px;">
							  <div id="cellbegineditdrevent"></div>
							  <div style="margin-top: 10px;" id="cellendeditdrevent"></div>
						   </div>						   
						</div>
						<div>						
                           <div id="jqxgridIR"></div>
						   <div style="margin-top: 30px;">
							  <div id="cellbegineditirevent"></div>
							  <div style="margin-top: 10px;" id="cellendeditirevent"></div>
						   </div>
						</div>
                    </div>
					<div id="popupWindow">
								<div>Edit</div>
								<div>
									<table>
										<tr>											
											<td align="left">Description:</td>											
										</tr>
										<tr>											
											<td align="left"><textarea name="description" id="description" rows="10" cols="70" > < /textarea></td>
										</tr>										
										<tr>			
											<td style="padding-top: 10px;" align="left"><input style="margin-right: 5px;" type="button" id="Save" value="Save" /><input id="Cancel" type="button" value="Cancel" /></td>
										</tr>
									</table>
								</div>
						   </div>
                </div> <!-- window content -->
            </div> <!-- event winodw -->
         </div> <!-- mainDemoContainer -->

[DimitarParticipant]

Hello DollyB,

Your second issue is due to the unneeded space in the close tag of textarea. Instead of:

< /textarea>

you should have:

</textarea>

We will have to further consider your first issue.

Best Regards,
Dimitar

jqWidgets team
http://www.jqwidgets.com/

[DimitarParticipant]

Hi DollyB,

Your first issue has been solved. Sorry for the delay. Please, check out the following topic for the solution:
http://www.jqwidgets.com/community/topic/issue-with-grid-and-modal-window/

Best Regards,
Dimitar

jqWidgets team
http://www.jqwidgets.com/

[DollyBMember]

Hi Dimitar,

Thankx. But it doesn’t work for me!!

I sent my code sample to support@jqwidgets.com.
Could you please have a look and tell me wht I am doing actually wrong?

Thankx
DollyB.

[DimitarParticipant]

Hi DollyB,

Your source code doesn’t seem to have our solution implemented. Check it out again:

            $("#jqxgrid").bind("cellbeginedit", function (event) {
                var column = event.args.datafield;
                var rowindex = event.args.rowindex;
                var cellvalue = $('#jqxgrid').jqxGrid('getcellvalue', rowindex, column);
                $("#jqxwindow").jqxWindow('open');
                setTimeout(function () {
                    $("#inputField").focus();
                }, 100);
            });

and the window structure is the following:

        <div id="jqxwindow">
            <div>
                Header</div>
            <div id='content'>
                <input id='inputField' type="text" /></div>
        </div>

Also, we recommend using the latest version of jqWidgets (as of today, it is 2.4).

Best Regards,
Dimitar

jqWidgets team
http://www.jqwidgets.com/

[Author]

Posts