How to populate modal popup window dynamically

[DollyBMember]

Hi,

A modal popup window opens when I click on any cell in the Grid for Editing.
Could you suggest how to populate modal popupwindow contents dynamically based on cell value and column name.

Thankx
DollyB.

[Peter StoevKeymaster]

Hi DollyB,

There’s a sample about the DataGrid Popup Editing which populates the popup window based on a clicked row. The cell values of the row are used to dynamically populate the popup window. Here’s the sample: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/popupediting.htm?classic

Hope this helps.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[DollyBMember]

Hi Peter,

Thankx for your quick reply. The example you suggested doesn’t serve my purpose.
The contents in the popup say,
If I want to have Text Filed and Input type for its value in the modal popup, the Text should be the Column name and the Value should be the clicked cell value. How to acheive this?

Thankx
DollyB.

[DollyBMember]

My actual Requirement: I have a modalWindow which contains Grid. On clicking on any of the cell in the Grid for editing, a modal popup opens. The contents for this modal popup should be loaded dynamically.
I used setContent method for acheiving this which is shown below.
Need solution for referring save button on click event so that I can populate the modified value in the modalpopup to the Grid Cell.

The setCcontent method for rendering contents dynamically:

//if(event.args.datafield == "Description"){
				//	$("#popupWindow").jqxWindow('setContent', '<div id="editPopupWindow" calss="editPopup" style="overflow: hidden;">'+
						//	'<table><tr><td align="left">'+event.args.datafield+':</td></tr>'+
						//	'<tr>'+
						//	'<td align="left"><textarea name="description" id="description" rows="10" cols="70" >'+event.args.value+'</textarea></td>'+
						//	'<tr>'+			
						//	'<td style="padding-top: 10px;" align="right">'+
						//		'<input style="margin-right: 5px;" type="button" id="Save" value="Save" />'+
						//		'<input id="Cancel" type="button" value="Cancel" />'+
						//	'</td>'+
					//		'</tr>'+
					//		'</tr>'+
					//		'</table></div>');		
				//}

//$("#Save").click(function() {	
				//alert("On Save Click:");		
				//$("#jqxgridDR").jqxGrid('setcellvalue', rowsel, dataf, $('#description').val());
				//$('#popupWindow').jqxWindow('hide');	
				//$('#jqxgridDR').jqxGrid('render');				
			//});

How to refer save button on click event in the popup? I tried multiple ways. But failed

[Peter StoevKeymaster]

Hi DollyB,

Here’s how to get the clicked cell’s Column Name and Value

           $("#jqxgrid").bind('cellclick', function (event) {
                var rowindex = event.args.rowindex;
                var datafield = event.args.datafield;
                var columntext = event.args.column.text;
                var value = $("#jqxgrid").jqxGrid('getcellvalue', rowindex, datafield);
            });

Hope this helps.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[DollyBMember]

Hi,

I tried this way and it worked.

$('#popupWindow').bind('open', function (event) { 
				//alert("Inside OPEN event bind"+rowsel+", "+dataf+", "+$('#description').val());					
				$("#Save").click(function() {	
					//alert("On Save Click:"+rowsel+", "+dataf+", "+$('#description').val());		
					$("#jqxgridDR").jqxGrid('setcellvalue', rowsel, dataf, $('#description').val());
					$('#popupWindow').jqxWindow('hide');	
					$('#jqxgridDR').jqxGrid('render');				
				});
			});

Thankx Peter.

[Author]

Posts