jQWidgets Forums

jQuery UI Widgets › Forums › Grid › Modification of Nested Grid with popup dialog

Tagged: 

This topic contains 1 reply, has 2 voices, and was last updated by  Peter Stoev 10 years, 5 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Modification of Nested Grid with popup dialog Posts
  • February 2, 2015 at 11:11 pm Modification of Nested Grid with popup dialog #66363

    phpman
    Participant

    Hello support, i have table with nested grid as you can see on the show below. The main table contains information about supervisors and nested table contains information about employees below this supervisors.

    | name | surname | position |
    ———————————————–
    | Peter | Waltz | manager |
    ————————————————-
    | name | surname | is_active | active |
    ———————————————–
    | Luka | Brown | 1 |[ De/Activate] — this is button, when you click it should raise window with confirmation about modification
    | Michal | Window | 0 |[ De/Activate]
    | Micha..| Table | 1 |[ De/Activete]
    ————————————————
    |Monica | Leno | manager |
    ——————————— —

    The main reason of this grid is when you click on [De/activate] – the dialog with confirmation yes/no will appear. When you click in this dialog on yes the cell “is_active” on the left will be change with oposite number 1 => 0 or 0 => 1.
    Before this the parameters about the record (id_supervisor) of the main grid and the record(id_employee) where i clicked in nested grid should be sent in parameter on the server and the value about value in “is_active”, the parameters should look like this below:

    “update=true&id_supervisor=1&id_employee=2&change_value=1”

    and after that i would like to add into there the pagenum+pagesize and etc. from nested grid if i would go on the next page.

    Below is the code for this i made:

    <!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../jqWidget_v3_6_0/jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqWidget_v3_6_0/jqwidgets/styles/jqx.classic.css" type="text/css" />
    <script type="text/javascript" src="../jqWidget_v3_6_0/scripts/jquery-1.10.2.min.js"></script>  
	<script type="text/javascript" src="../jqWidget_v3_6_0/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqWidget_v3_6_0/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqWidget_v3_6_0/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqWidget_v3_6_0/jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqWidget_v3_6_0/jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqWidget_v3_6_0/jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqWidget_v3_6_0/jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqWidget_v3_6_0/jqwidgets/jqxgrid.js"></script>
	<script type="text/javascript" src="../jqWidget_v3_6_0/jqwidgets/jqxgrid.sort.js"></script>	
	<script type="text/javascript" src="../jqWidget_v3_6_0/jqwidgets/jqxgrid.selection.js"></script>
  	<script type="text/javascript" src="../jqWidget_v3_6_0/jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqWidget_v3_6_0/jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqWidget_v3_6_0/jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqWidget_v3_6_0/jqwidgets/jqxgrid.filter.js"></script>
	<script type="text/javascript" src="../jqWidget_v3_6_0/jqwidgets/jqxwindow.js"></script>
	<script type="text/javascript" src="../jqWidget_v3_6_0/jqwidgets/jqxinput.js"></script>
   <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            
            var source =
            {
                datatype: "json",
                datafields: [
					{ name: 's_name', type: 'string'},
                    { name: 's_surname', type: 'string'},
                    { name: 's_position', type: 'string'}
                ],
				id: 'id_supervisor',
                url: 'dat_1.php',
				root: 'Rows',
				cache: false,
                beforeprocessing: function (data) {
                    source.totalrecords = data[0].TotalRows;
                },
				sort: function()
				{
					$("#jqxgrid").jqxGrid('updatebounddata', 'sort');
				}				
            };

            var dataAdapter = new $.jqx.dataAdapter(source);
			
			var initrowdetails = function (index, parentElement, gridElement) {      
				var row = index;
				var id = $("#jqxgrid").jqxGrid('getrowdata', row)['id_supervisor'];
			    var grid = $($(parentElement).children()[0]);
               
				var subSource =
				{
					url: 'dat_2.php',
					dataType: 'json',
					data: {id_supervisor: id},
					datatype: "json",
					cache: false,
					datafields: [
						 { name: 'id_employee' },
						 { name: 'e_name' },
						 { name: 'e_surname' },
						 { name: 'e_value' }
					],
					root: 'Rows',
					beforeprocessing: function (data) {
						source.totalrecords = data[0].TotalRows;
					},     
					sort: function()
					{
						grid.jqxGrid('updatebounddata', 'sort');
					},
					updaterow: function (rowid, rowdata, commit) {
						// synchronize with the server - send update command

						var data = "update=true&id_supervisor=" + rowdata.id_supervisor;
						data = data + "&id_employee=" + rowdata.id_employee
						data = data + "&changed_value=" + rowdata.returned_value_from_button;
						$.ajax({
							dataType: 'json',
							url: 'dat_3.php',
							type: 'POST',
							data: data,
							success: function (data, status, xhr) {
								// update command is executed.
								commit(true);
							},
							error: function () {
								// cancel changes.
								commit(false);
							}
						});
					}	
 				};
				
				var subDataAdapter = new $.jqx.dataAdapter(subSource);
				var editrow = -1;

				// init Orders Grid
				grid.jqxGrid(
				{
					virtualmode: true,
					height: 250,
					width: 350,
					sortable: true,
					pageable: true,
					pagesize: 30,
				    showfilterrow: true,
				    filterable: true,
				    rowsheight: 60,
					source: subDataAdapter,
					theme: 'classic',
					rendergridrows: function (obj) {
						return obj.data;
					},
					columns: [
					        { text: 'name', datafield: 'e_name', width: 60 },
							{ text: 'surname', datafield: 'e_surname', width: 100},
							{ text: 'is active', datafield: 'e_value', width: 80},
							{ text: 'Active', datafield: 'Edit', columntype: 'button', cellsrenderer: function () {
								 return "De/Activate";
								  }, buttonclick: function (row) {
									 // open the popup window when the user clicks a button.
									 editrow = row;
									 var testSub = grid.jqxGrid('getrowdata', editrow);
									 var offset = $("#jqxgrid").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);
									 $("#popupWindow").val(dataRecord.id_supervisor);
									 // show the popup window.
									 $("#popupWindow").jqxWindow('open');
								 }
							}
					  ]
				});	
				
				// initialize the popup window and buttons.
				$("#popupWindow").jqxWindow({
					width: 250, resizable: false,  isModal: true, autoOpen: false, cancelButton: $("#Cancel"), modalOpacity: 0.01           
				});
				$("#popupWindow").on('open', function () {
					$("#id_supervisor").jqxInput('selectAll');
				});

				// update the edited row when the user clicks the 'Save' button.
				$("#Save").click(function () {
					if (editrow >= 0) {
						var row = { id_supervisor: $("#id_supervisor").val()
						};
						var rowID = $('#jqxgrid').jqxGrid('getrowid', editrow);
						
						$('#jqxgrid').jqxGrid('updaterow', rowID, row);
						$("#popupWindow").jqxWindow('hide');
					}
				});	

				
						
			};
			  
			// set rows details.
            $("#jqxgrid").bind('bindingcomplete', function (event) {
                if (event.target.id == "jqxgrid") {
                    $("#jqxgrid").jqxGrid('beginupdate');
                    var datainformation = $("#jqxgrid").jqxGrid('getdatainformation');
                    for (i = 0; i < datainformation.rowscount; i++) {
                        $("#jqxgrid").jqxGrid('setrowdetails', i, "<div id='grid" + i + "' style='margin: 10px;'></div>", 300, true);
                    }
                    $("#jqxgrid").jqxGrid('resumeupdate');
                }
            });

			
			$("#jqxgrid").jqxGrid(
            {
                source: dataAdapter,
                theme: 'classic',
				pageable: true,
				sortable: true,
				autoheight: true,
                virtualmode: true,
                rowdetails: true,
                pagesize: 30,
				rowsheight: 60,
                showfilterrow: true,
                filterable: true,
                width: 1650,
                initrowdetails: initrowdetails,
                rendergridrows: function () {
                    return dataAdapter.records;
                },				
                columns: [
				  { text: 'name', datafield: 's_name', width: 60},
                  { text: 'surname', datafield: 's_surname', width: 250},
				  { text: 'position', datafield: 's_position', width: 250}			  
              ]
            }); 

        });
    </script>
</head>
<body class='default'>
   <div id="jqxgrid"></div>
   <div style="margin-top: 30px;">
            <div id="cellbegineditevent"></div>
            <div style="margin-top: 10px;" id="cellendeditevent"></div>
       </div>
       <div id="popupWindow">
            <div>Edit</div>
            <div style="overflow: hidden;">
                <table>
					<tr>
						<td colspan="2">Do you want to activate the employee?</td>
					</tr>
                    <tr>
                        <td align="right"></td>
                        <td style="padding-top: 10px;" align="right"><input style="margin-right: 5px;" type="button" id="Save" value="yes" /><input id="Cancel" type="button" value="no" /></td>
                    </tr>
                </table>
            </div>
		</div>
</body>
</html>

    Here are source for that, it is only static because of example:

    dat_1.php

    [{"Rows":[
		 { "id_supervisor" : "1", "s_name" : "Peter", "s_surname" : "Waltz", "s_position" : "manager" },
		 { "id_supervisor" : "2", "s_name" : "Monica", "s_surname" : "Leno", "s_position": "manager" },
		 { "id_supervisor" : "3", "s_name" : "Albert", "s_surname" : "Novak", "s_position" : "director" },
		 { "id_supervisor" : "4", "s_name" : "Petra", "s_surname" : "Schwarz", "s_position" : "manager" },
		 { "id_supervisor" : "5", "s_name" : "Lucy", "s_surname" : "White", "s_position" : "manager" }
            ]}]

    dat_2.php

    [{"Rows":[
		 { "id_employee" : "3", "e_name" : "Lukas", "e_surname" : "Brown", "e_value" : "1"},
		 { "id_employee" : "4", "e_name" : "Michal", "e_surname" : "Window", "e_value" : "0"},
		 { "id_employee" : "7", "e_name" : "Michaela", "e_surname" : "Table", "e_value" : "1"},
		 { "id_employee" : "9", "e_name" : "Nikol", "e_surname" : "Chaior", "e_value" : "0"},
		 { "id_employee" : "10", "e_name" : "David", "e_surname" : "Peacock", "e_value" : "0"}
            ]}]

    Could you help me with this or write some example code for this situation?

    Thank you in advance

    Daniel

    February 3, 2015 at 6:58 am Modification of Nested Grid with popup dialog #66386

    Peter Stoev
    Keymaster

    Hi phpman,

    If you’d like to add custom params, you should implement the source object’s formatData callback function. See: http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-extra-http-variables.htm

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.