How do you get record values of the selected record in a SUBGRID in a datagrid?

[andyj]

In a standard datagrid then to get the field values for the selected record then you call the following:

Code:

var row = $('#dg').datagrid('getSelected');

How do you do the same for the subgrid of a datagrid?
I am using the code as per the "Subgrid" example in the datagrid demos

This is wrong but I suspect it may be something similar...?

Code:

var row = $('#dg').datagrid().datagrid('subgrid', conf).datagrid('getSelected');

I just want to add an Edit button column to the subgrid, which calls a pop-up dialog form, for which I need the record field values...

Thanks for any ideas.

[jarry]

The way to get subgrid depends on how you define the subgrid. Please show some code to describe your issue.

[andyj]

This is the grid and subgrid:

Code:

   <table id="dg" style="width:650px;height:250px" class="easyui-datagrid" 
            url="data_select.php" idField="document_id" striped="true" loadMsg="Data loading... Please wait..."
            title="Document Review"  fit="true" toolbar="#toolbar" pagination="true" pageSize="30"
            rownumbers="true" fitColumns="true" showFooter="true" singleSelect="true"
            >
        <thead>
            <tr>
				<th id="iddocument_id" field="document_id" width="20">document_id</th>
				<th id="idDocumentType" field="DocumentType" width="60">Document Type</th>
				<th id="idDocumentName" field="DocumentName" width="220">Document Name</th>
				<th id="idReviewPeriod" field="ReviewPeriod" align="left" width="30">Review Period</th>
				<th id="idLastRatified" field="LastRatified" align="center" width="30">Last Ratified</th>
            </tr>
        </thead>
    </table>

    <script type="text/javascript">
        $(function(){
            $('#dg').datagrid({
                view: detailview,
                detailFormatter:function(index,row){
                    return '<div style="padding:2px"><table class="ddv"></table></div>';
                },
                onExpandRow: function(index,row){
                	//Auto-Collapse last expanded row START
					var opts = $(this).datagrid('options');
					if (opts.lastExpandIndex != undefined){
					$(this).datagrid('collapseRow',opts.lastExpandIndex);
					}
					opts.lastExpandIndex = index;
                	//Auto-Collapse last expanded row END


                    var ddv = $(this).datagrid('getRowDetail',index).find('table.ddv');
                    ddv.datagrid({
                        url:'data_select_getdetail.php?document_id='+row.document_id,
                        fitColumns:true,
                        singleSelect:true,
                        rownumbers:true,
                        loadMsg:'',
                        height:'auto',
                        columns:[[
                            {field:'documentreview_id',title:'ID',width:20},
                            {field:'LeadReviewer',title:'Lead Reviewer',width:200},
                            {field:'ReviewStartDate',title:'Review Started',width:200},
                            {field:'ProposedDeadline',title:'Proposed Deadline',width:100,align:'right'},
                            {field:'ApprovalDate',title:'Review Approved',width:100,align:'right'},
                            {field:'RatificationDate',title:'Review Ratified',width:100,align:'right'},
							{field: 'action', title: 'Action',
									 formatter:function(value,row,index)
									 {
										var s = '<button onclick="editRecord()">Edit</button> ';
										return s;
									}
								}
							]]
                        ,
                        onResize:function(){
                            $('#dg').datagrid('fixDetailRowHeight',index);
                        },
                        onLoadSuccess:function(data){
                            setTimeout(function(){
                                $('#dg').datagrid('fixDetailRowHeight',index);

                                if (!data.rows.length) {
                                	$.messager.show({	// show error message
									title: 'Warning',
									msg: 'This document has not yet been reviewed!'
									});
                            	} 

                            },0);
                        }
                    });
                    $('#dg').datagrid('fixDetailRowHeight',index);
                }
            });
        });
    </script>

The editRecord() function will then open a modal dialog box (as per the demo CRUD application) with details of the subgrid record.
For this I need the selected subgrid record row data...

Thanks Jarry!

[jarry]

Your action field of subgrid can be defined as:

Code:

{field: 'action', title: 'Action',
	 formatter:function(value,row,index)
	 {
		var s = '<button onclick="editRecord(this)">Edit</button> ';
		return s;
	}
}

The 'editRecord' function can be defined as:

Code:

function editRecord(btn){
	var tr = $(btn).closest('tr.datagrid-row');
	var index = parseInt(tr.attr('datagrid-row-index'));
	var dg = tr.closest('div.datagrid-view').children('table');
	var row = dg.datagrid('getRows')[index];
	console.log(row)
}

[andyj]

Pure genius

Works like a treat

Thank you!