jQWidgets Forums

Tagged: edit, grid, jqxgrid, master-details

This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 11 years, 12 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)

Author

Fail to edit 'detail' grid in master-detail grid Posts

May 15, 2013 at 7:13 am Fail to edit 'detail' grid in master-detail grid #21184

Member

I have master-detail grid taken from your website, I am able to edit the master grid but fail to do it with the detail grid, here is the code:


<!DOCTYPE html>
<html lang=\"en\">
<head>
<base href=\"<?php echo base_url();?>\">
    <title id=\'Description\'>This example shows how to implement Master-Details binding scenario with two Grids.</title>
    <link rel=\"stylesheet\" href=\"media/js/jqwidgets/styles/jqx.base.css\" type=\"text/css\" />
    <script type=\"text/javascript\" src=\"media/js/scripts/jquery-1.8.3.min.js\"></script>
    <script type=\"text/javascript\" src=\"media/js/jqwidgets/jqxcore.js\"></script>
    <script type=\"text/javascript\" src=\"media/js/jqwidgets/jqxbuttons.js\"></script>
    <script type=\"text/javascript\" src=\"media/js/jqwidgets/jqxscrollbar.js\"></script>
    <script type=\"text/javascript\" src=\"media/js/jqwidgets/jqxmenu.js\"></script>
    <script type=\"text/javascript\" src=\"media/js/jqwidgets/jqxgrid.js\"></script>
    <script type=\"text/javascript\" src=\"media/js/jqwidgets/jqxgrid.selection.js\"></script>
    <script type=\"text/javascript\" src=\"media/js/jqwidgets/jqxgrid.columnsresize.js\"></script>
    <script type=\"text/javascript\" src=\"media/js/jqwidgets/jqxgrid.pager.js\"></script>
    <script type=\"text/javascript\" src=\"media/js/jqwidgets/jqxlistbox.js\"></script>
    <script type=\"text/javascript\" src=\"media/js/jqwidgets/jqxdropdownlist.js\"></script>
    <script type=\"text/javascript\" src=\"media/js/jqwidgets/jqxdata.js\"></script>
    <script type=\"text/javascript\" src=\"media/js/scripts/gettheme.js\"></script>
	<script type=\"text/javascript\" src=\"media/js/jqwidgets/jqxcalendar.js\"></script>	
    <script type=\"text/javascript\" src=\"media/js/jqwidgets/jqxdatetimeinput.js\"></script>	
    <script type=\"text/javascript\" src=\"media/js/jqwidgets/jqxgrid.edit.js\"></script>	
	
    <script type=\"text/javascript\">
        $(document).ready(function () {
            var theme = getTheme();
            // prepare the data
			
			
            var countries = <?php include \"json.php\"; ?>;
            var countriesSource =
            {
                 datatype: \"array\",
                 datafields: [
                     { name: \'label\', type: \'string\' },
                     { name: \'value\', type: \'string\' }
                 ],
                 localdata: countries
            };
            var countriesAdapter = new $.jqx.dataAdapter(countriesSource, {
                autoBind: true
            });
			
			
            var source =
            {
			    datatype: \"json\",
                datafields: [
                    { name: \'invoice_id\' },
                    { name: \'invoice_amount\' },
                    { name: \'due_amount\' },					
                    { name: \'due_date\' },
                    { name: \'unit_no\' },
					{ name: \'Status\', value: \'status\', values: { source: countriesAdapter.records, value: \'value\', name: \'label\' } },
                    { name: \'status\', type: \'string\'}				
                ],
				localdata:\'<?php include \'grid_datasource.php\'; ?>\',
				updaterow: function (rowid, rowdata, commit) {
                    // synchronize with the server - send update command
                    var data = \"update=true&due_amount=\" + rowdata.due_amount + \"&status=\" + rowdata.status + \"&invoice_id=\" +rowdata.invoice_id;
					$.ajax({
                       // dataType: \'json\',
						type: \"POST\",
					    url: \'<?php echo site_url(\"invoice/updateInvoice\");?>\',
                        data: data,
                        success: function (data, status, xhr) {
                            // update command is executed.
                            commit(true);
							
                        },
                        error: function () {
                            // cancel changes.
                            commit(false);
						
                        }
                    });
                }
				
            };
			
			
			
			
			
			
			
			
            var dataAdapter = new $.jqx.dataAdapter(source);
            $(\"#customersGrid\").jqxGrid(
            {
                width: 670,
                height: 250,
                source: dataAdapter,
                theme: theme,
				editable: true,
                keyboardnavigation: false,
                columns: [
                    { text: \'Invoice ID\', datafield: \'invoice_id\', width: 70 },
                    { text: \'Amount\', datafield: \'invoice_amount\', width: 70 },
                    { text: \'Due Amount\', datafield: \'due_amount\', width: 70 },					
                    { text: \'Due Date\', datafield: \'due_date\', width: 100 },
                    { text: \'Unit No\', datafield: \'unit_no\', width: 120 },
 
					  
                    {
                        text: \'Status\', datafield: \'status\', displayfield: \'Status\', columntype: \'dropdownlist\',
                        createeditor: function (row, value, editor) {
                            editor.jqxDropDownList({ source: countriesAdapter, displayMember: \'label\', valueMember: \'value\' });
                        }
                    }
       
					
                ]
            });
		
            // Orders Grid
            // prepare the data
            var dataFields = [
                        { name: \'invoice_item_id\' },
                        { name: \'invoice_id\' },
                        { name: \'amount\' },
                        { name: \'description\' },
						{ name: \'from_date\' },
						{ name: \'to_date\' }							
                    ];
			var data=\'<?php include \'detail_grid_datasource.php\'; ?>\';		
            var source =
            {
			    datatype: \"json\",
                datafields: dataFields,	
				localdata:data,
				updaterow: function (rowid, rowdata, commit) {
				alert(\"Going to update\");
					// synchronize with the server - send update command
					var data = \"update=true&amount=\" + rowdata.amount + \"&status=\" + rowdata.status + \"&invoice_item_id=\" +rowdata.invoice_item_id;
					alert(data);
					$.ajax({
						   // dataType: \'json\',
							type: \"POST\",
							url: \'<?php echo site_url(\"invoice/updateInvoiceItem\");?>\',
							data: data,
							success: function (data, status, xhr) {
								// update command is executed.
								commit(true);
								alert(data);
							},
							error: function () {
								// cancel changes.
								commit(false);
								alert(\"No\");
							}
					});
                }
				
				
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
			
           dataAdapter.dataBind();
            $(\"#customersGrid\").on(\'rowselect\', function (event) {
				var invoice_id=event.args.row.invoice_id;
	
                var records = new Array();
                var length = dataAdapter.records.length;
                for (var i = 0; i < length; i++) {
                    var record = dataAdapter.records[i];
                    if (record.invoice_id== invoice_id) {
                        records[records.length] = record;
                    }
                }
                var dataSource = {
                    datafields: dataFields,
                    localdata: records
                }
                var adapter = new $.jqx.dataAdapter(dataSource);
        
                // update data source.
                $(\"#ordersGrid\").jqxGrid({ source: adapter });
            });
			
			
			
            $(\"#ordersGrid\").jqxGrid(
            {			
                width: 900,
                height: 250,
                theme: theme,
				editable: true,
                keyboardnavigation: false,
				selectionmode: \'singlecell\',
                columns: [
                    { text: \'Item ID\', datafield: \'invoice_item_id\', width: 100 },
                    { text: \'Invoice ID\', datafield: \'invoice_id\', width: 150 },
                    { text: \'Description\', datafield: \'description\', width:150},
					{ text: \'From\', datafield: \'from_date\', width:100, columntype: \'datetimeinput\', cellsalign: \'right\', cellsformat: \'yyyy-MM-dd\', editable:true},
					{ text: \'To\', datafield: \'to_date\', width:100, columntype: \'datetimeinput\', cellsalign: \'right\', cellsformat: \'yyyy-MM-dd\', editable:true},	
                    { text: \'Amount\', datafield: \'amount\', width: 150 }					
                ]
            });
			$(\"#ordersGrid\").jqxGrid(\'hidecolumn\', \'invoice_item_id\');
            $(\"#customersGrid\").jqxGrid(\'selectrow\', 0);
        });
    </script>
</head>
<body class=\'default\'>
    <div id=\'jqxWidget\' style=\"font-size: 13px; font-family: Verdana; float: left;\">
        <h3>
            Invoice</h3>
        <div id=\"customersGrid\">
        </div>
        <h3>
            Items</h3>
        <div id=\"ordersGrid\">
        </div>
    </div>
</body>
</html>

What could be the problem?

May 16, 2013 at 5:33 am Fail to edit 'detail' grid in master-detail grid #21239

Dimitar

Participant

Hello soonkoh,

The reason is that each time a row in the master grid is selected, the source of the details grid is set anew, as you may observe in the line:

$("#ordersGrid").jqxGrid({ source: adapter });

Best Regards,
Dimitar

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.