anand984
Newbie
Posts: 5
|
 |
« on: February 14, 2014, 11:07:40 PM » |
|
I have a scenario where I have two datagrids. MasterDataGrid (dg) and DetailDataGrid (addrdg). Now I need to pass the ID of selected record in MasterDataGrid to the saveUrl of DetailDataGrid. Please tell how this can be accomplished. I need to pass this ID using querystring PHP. <html>
<?PHP include 'dbConnect.php';?>
<head>
<head>
<meta charset="UTF-8">
<title>Contractor DB</title>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.edatagrid.js"></script>
<script type="text/javascript">
function getAllDetails(index)
{
var selected = $('#dg').datagrid('getSelected');
var url = 'getAddress.php?contractid=' + selected.ID;
$('#addressdg').edatagrid({url: url
});
};
</script>
<script type="text/javascript">
function insertAddress(index)
{
var selected = $('#dg').datagrid('getSelected');
var surl = "insert_address.php?contractid=" + selected.ID;
alert(surl);
$('#addressdg').datagrid({saveUrl: surl});
};
</script>
</head>
<body>
<div class="easyui-tabs" style="width:1300px;height:750px;">
<div title="Contractors" style="padding:10px;">
<div id="tb">
<a href="#" class="easyui-linkbutton" plain="false" onclick="getAllDetails()">Get Details</a>
<a href="#" class="easyui-linkbutton" plain="false" onclick="javascript:$('#dg').edatagrid('addRow')">New</a>
<a href="#" class="easyui-linkbutton" plain="false" onclick="javascript:$('#dg').edatagrid('destroyRow')">Delete</a>
<a href="#" class="easyui-linkbutton" plain="false" onclick="javascript:$('#dg').edatagrid('cancelRow')">Cancel</a>
<a href="#" class="easyui-linkbutton" plain="false" onclick="javascript:$('#dg').edatagrid('saveRow')">Save</a>
</div>
<table id="dg" class="easyui-datagrid" title="Contractors" style="width:800px;height:250px"
data-options="singleSelect:true,collapsible:false,url:'getContractor.php'"
rownumbers="true" pagination="true" toolbar="#tb" idField="ID">
<thead>
<tr>
<th data-options="field:'FST_NAME',width:100" editor="text">First Name</th>
<th data-options="field:'LAST_NAME',width:80,align:'right'" editor="text">Last Name</th>
<th data-options="field:'EMAIL',width:80,align:'right'" editor="text">E-Mail</th>
<th data-options="field:'INDUSTRY',width:90" editor="text">Industry</th>
<th data-options="field:'RATE',width:60,align:'center'" editor="text">Rate</th>
<th data-options="field:'EQ_GRADE',width:60,align:'center'" editor="text">Eq Grade</th>
<th data-options="field:'COUNTRY',width:60,align:'center'" editor="text">Company</th>
</tr>
</thead>
</table>
<div class="easyui-tabs" style="width:1300px;height:750px;">
<div id = "address" title="Address" closable="false" style="padding:10px;">
<table id="addressdg" class="easyui-datagrid" title="Contractors-Address" style="width:800px;height:500px"
data-options="singleSelect:true,collapsible:false,url:'javascript: getAllDetails();'"
rownumbers="true" pagination="true" toolbar="#addrtb" idField="ADDRESS_ID">
<thead>
<tr>
<th data-options="field:'ADDR_LINE1',width:100" editor="text">Address Line 1</th>
<th data-options="field:'ADDR_LINE2',width:80,align:'right'" editor="text">Address Line 2</th>
<th data-options="field:'ADDR_LINE3',width:80,align:'right'" editor="text">Address Line 3</th>
<th data-options="field:'CITY',width:90" editor="text">City</th>
<th data-options="field:'STATE',width:60,align:'center'" editor="text">State</th>
<th data-options="field:'COUNTRY',width:60,align:'center'" editor="text">Country</th>
<th data-options="field:'WORK_PHONE',width:60,align:'center'" editor="text">Work Phone</th>
<th data-options="field:'HOME_PHONE',width:60,align:'center'" editor="text">Home Phone</th>
<th data-options="field:'CELL_PHONE',width:60,align:'center'" editor="text">Cell Phone</th>
</tr>
</thead>
</table>
<div id="addrtb">
<a href="#" class="easyui-linkbutton" plain="false" onclick="javascript:$('#addressdg').edatagrid('addRow')">New</a>
<a href="#" class="easyui-linkbutton" plain="false" onclick="javascript:$('#addressdg').edatagrid('destroyRow')">Delete</a>
<a href="#" class="easyui-linkbutton" plain="false" onclick="javascript:$('#addressdg').edatagrid('cancelRow')">Cancel</a>
<a href="#" class="easyui-linkbutton" plain="false" onclick="insertAddress()">Save</a>
</div>
</div>
<div id = "skill" title="Skills/SubSkills" closable="false" style="padding:10px;">Skills</div>
</div>
</div>
<div title="Second Tab" closable="false" style="padding:10px;">Second Tab</div>
<div title="Third Tab" iconCls="" closable="false" style="padding:10px;">Third Tab</div>
</div>
<script type="text/javascript">
$(function(){
$('#dg').edatagrid({
url: 'getContractor.php',
saveUrl: 'insert_contractor.php',
updateUrl: 'update_contractor.php',
destroyUrl: 'delete_contractor.php',
autosave: 'true'
});
$('#dg').datagrid({
onLoadSuccess:function(){
var rows = $(this).datagrid('getRows');
if (rows.length){
$(this).datagrid('selectRow',0);
}
}
});
});
</script>
<script type="text/javascript">
$(function(){
$('#addressdg').edatagrid({
url: 'getAllDetails()',
saveUrl: 'insertAddress()', --> Not Working
updateUrl: 'update_contractor.php',
destroyUrl: 'delete_contractor.php',
autosave: 'true'
});
});
</script>
</body> |
|
|
|
|
Logged
|
|
|
|
|
stworthy
|
|
« Reply #1 on: February 15, 2014, 06:58:44 AM » |
|
When select a row, the 'onSelect' event fires, in which you can get the current selected row. At this point you can change the detail data grid's url property and reload its data. $('#dg').edatagrid({
//...
onSelect:function(index,row){
var opts = $('#addressdg').edatagrid('options');
opts.url = 'getAddress.php?contractid=' + row.ID;
opts.saveUrl = 'insert_address.php?contractid=' + row.ID;
$('#addressdg').edatagrid('reload');
}
})
|
|
|
|
|
Logged
|
|
|
|
anand984
Newbie
Posts: 5
|
|
« Reply #2 on: February 15, 2014, 02:13:59 PM » |
|
Thanks for your help. I wrote the following function but I am getting error in it:
Error: TypeError: $.data(...) is undefined
Please help.
<script type="text/javascript">
$(function(){
$('#dg').edatagrid({
onSelect: function(index,row){
opts = $('#addressdg').edatagrid('options');
opts.url = 'getAddress.php?contractid=' + row.ID;
alert($('#addressdg').edatagrid('options').url);
//opts.saveUrl = 'insert_address.php?contractid=' + row.ID;
//alert(opts.saveUrl);
//$('#addressdg').edatagrid('reload');
},
onLoadSuccess: function(data){
alert('Load successful');
}
});
});
</script>
|
|
|
|
|
Logged
|
|
|
|
|
stworthy
|
|
« Reply #3 on: February 16, 2014, 03:51:40 AM » |
|
Before calling any methods, you must created data grid first. Please try this: $('#addressdg').edatagrid(...);
$('#dg').edatagrid({
onSelect:function(index, row){
//...
}
});
|
|
|
|
|
Logged
|
|
|
|
anand984
Newbie
Posts: 5
|
|
« Reply #4 on: February 18, 2014, 03:43:46 AM » |
|
Hi stworthy, thank you very much for your help. Now I am able to populate the child table when a record is clicked in parent table. But now the new record functionality is not working in child table. I am not able to see any editors when I click the New button.
Here is the code for your reference.
<script type="text/javascript">
$(function(){
$('#dg').edatagrid({
url: 'getContractor.php',
saveUrl: 'insert_contractor.php',
updateUrl: 'update_contractor.php',
destroyUrl: 'delete_contractor.php',
autosave: 'true'
});
});
$(function(){
$('#addressdg').edatagrid({
url:'getAddress.php',
columns:[[
{field:'ADDR_LINE1',title:'Address Line 1',width:100},
{field:'ADDR_LINE2',title:'Address Line 2',width:100},
{field:'ADDR_LINE3',title:'Address Line 3',width:100},
{field:'CITY',title:'City',width:100},
{field:'STATE',title:'State',width:100},
{field:'COUNTRY',title:'Country',width:100}
]],
title: "Contractor - Address",
singleSelect: true,
collapsible: true,
toolbar: '#addresstb'
});
$('#dg').datagrid({
onSelect: function(index,row){
var optionsDG = $('#addressdg').datagrid('options');
var optionsEDG = $('#addressdg').edatagrid('options');
optionsDG.url = 'getAddress.php?contractid=' + row.ID;
optionsEDG.url = 'getAddress.php?contractid=' + row.ID;
optionsEDG.saveUrl = 'insert_address.php' + '?contractid='+row.ID;
optionsEDG.updateUrl = 'update_address.php';
optionsEDG.destroyUrl = "delete_contractor.php";
$('#addressdg').edatagrid('reload');
},
onLoadSuccess: function(data){
//alert('Load successful');
}
});
});
</script>
|
|
|
|
|
Logged
|
|
|
|
anand984
Newbie
Posts: 5
|
|
« Reply #5 on: February 26, 2014, 04:24:28 AM » |
|
Hi Friends! I am still not able to crack this issue. Can you please help me with it?
|
|
|
|
|
Logged
|
|
|
|
|
stworthy
|
|
« Reply #6 on: February 26, 2014, 06:36:26 AM » |
|
Here is your detail datagrid. $('#addressdg').edatagrid({
url:'getAddress.php',
columns:[[
{field:'ADDR_LINE1',title:'Address Line 1',width:100},
{field:'ADDR_LINE2',title:'Address Line 2',width:100},
{field:'ADDR_LINE3',title:'Address Line 3',width:100},
{field:'CITY',title:'City',width:100},
{field:'STATE',title:'State',width:100},
{field:'COUNTRY',title:'Country',width:100}
]],
title: "Contractor - Address",
singleSelect: true,
collapsible: true,
toolbar: '#addresstb'
});
You are missing defining editor for each column. This is why no editors display when editing a row. |
|
|
|
|
Logged
|
|
|
|
anand984
Newbie
Posts: 5
|
|
« Reply #7 on: February 26, 2014, 07:09:24 AM » |
|
My bad!! I missed that small thing.
Thanks for your help!!
|
|
|
|
|
Logged
|
|
|
|
|
