Title: Expanding row of a grid does not load datagrid all time
Post by: thecyberzone on March 08, 2017, 03:11:03 AM
I am developing an application using Easyui Grid/Subgid Panel. Screen shot is attached with. Here data of the main grid is populated after selecting year and section. It is loading fine. Now when I expand row of this grid from last row to first backwards, everytime subpanel opens and data is loaded correctly, but if I expand rows from first to last that is in forward direction only first panel loads data, expanding rest of the rows do not load data in subpanel. In this connection I am attaching some code snippet for the application. Javascript for the main grid (#dg1) $('#dg1').datagrid({
view: detailview,
detailFormatter:function(index,row){
return '<div class="ddv" style="padding:2px"></div>';
},
onExpandRow: function(index,row){
var yr = $('#year').combobox('getValue');
var ddv = $(this).datagrid('getRowDetail',index).find('div.ddv');
ddv.panel({
border:false,
cache:false,
href:'exeneed.getDetails.php?yr='+yr+'&tno='+row.tno,
onLoad:function(){
$('#dg1').datagrid('fixDetailRowHeight',index);
}
});
$('#dg1').datagrid('fixDetailRowHeight',index);
}
});
Now here is details of SubPanel / exeneed.getDetails.php : <?php
include 'config.php';
include 'lock.php';
$tno = intval($_REQUEST['tno']);
$yr = intval($_REQUEST['yr']);
?>
<div style="width:918px; border: 1px solid #cacaff; padding:10px 10px 10px 50px;">
<label>Need-Based Module:</label>
<input id="progname" name="progname" class="easyui-combobox"
style="width:500px;"
data-options="valueField:'Id', textField:'progname', url:'getExeProg.php', required:true " />
<a href="#" class="easyui-linkbutton" iconCls="icon-add" onclick="addNeed()">Add</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-remove" onclick="delNeed()">Remove</a>
</div>
<table id="dg3" class="easyui-datagrid" style="width:980px;height:200px; float:left;"
rownumbers="true" singleSelect="true" >
</table>
<script type="text/javascript">
$(function(){
var yr = $('#year').combobox('getValue');
var s = $('#dg1').datagrid('getSelected');
var t = <?php echo $tno; ?>;
$('#dg3').datagrid({
url:'exeNeedInd.php?tno='+t+'&yr='+yr,
columns:[[
{field:'Id',title:'',width:0,align:'right',hidden:true},
{field:'trgcode',title:'ProgCode',width:80,align:'center'},
{field:'mapprog',title:'Training Module',width:500},
{field:'status',title:'Status',width:50,align:'center'},
{field:'trgdate',title:'Plan Date',width:80,align:'center'},
{field:'actdate',title:'Act Date',width:80,align:'center'},
{field:'updcause',title:'Remarks',width:140}
]]
});
});
</script>
Now In this panel Subgrid is loaded from another PHP code exeNeedInd.php, this is given below: <?php
include 'config.php';
include 'lock.php';
$tno = intval($_REQUEST['tno']);
$yr = intval($_REQUEST['yr']);
$sql2 = "select * from empmst where tno=$tno";
$rs2 = mysql_query($sql2) or die('not found!');
$row2 = mysql_fetch_object($rs2);
$grade = $row2->grade;
$descode = $row2->descode;
$level = substr(trim($grade),1,1);
$sql3 = "select * from priority where year=$yr and level1<=$level and level2>=$level ";
//echo $sql3 . "<br>";
$rs3 = mysql_query($sql3) or die('not found!');
if($rs2){
while($row3 = mysql_fetch_object($rs3)){
$sql5 = "select * from skrating where year=$yr and tno=$tno and trgcode='$row3->trgcode'";
//echo $sql5 . "<br>";
$rs5 = mysql_query($sql5) or die('not found!');
if(mysql_num_rows($rs5)<=0){
$sql4 = "insert into skrating (tno, fileno, secode, secode2, year, skname, sktype, mapprog, trgcode, status, tno2, lastupdt) values ($tno,$row2->fileno,$row2->secode,$row2->secode2,$yr,'', '', '$row3->mapprog', '$row3->trgcode', $row3->status ,'AUTO', now())";
$rs4 = @mysql_query($sql4);
//echo $sql4 . "<br>";
}
}
}
$sql = "select * from skrating where year=$yr and tno=$tno order by mapprog";
$rs = mysql_query($sql) or die('not found!');
if ($rs){
$items = array();
while($row = mysql_fetch_object($rs)){
array_push($items, $row);
}
echo json_encode($items);
}
?> I have checked this PHP file by passing year and Tno parameter individually, moreover I have checked database, skrating table is populating correctly, although data is not loaded if I expand from top to bottom rows, but underlying data is there in table. Same data will be displayed if I expand from bottom to top rows one after another. I cannot understand what is happening and feeling helplessness. So please anybody help me.
Title: Re: Expanding row of a grid does not load datagrid all time
Post by: thecyberzone on March 08, 2017, 03:12:26 AM
I am also attaching the screenshot of another row expanded when data is not loaded.
Title: Re: Expanding row of a grid does not load datagrid all time
Post by: jarry on March 08, 2017, 05:22:06 PM
Your detail page has the 'dg3' id attribute defined on the <table>. After loading these pages, you have more than one 'dg3'. When using $('#dg3') to query the element, it always return the first element matched this selector. Please try to use this code in your detail page. <table class="easyui-datagrid" style="width:100%;height:200px; float:left;" rownumbers="true" singleSelect="true" >
<thead>
<tr>
<th data-options="field:'trgcode',title:'ProgCode',width:80,align:'center'"></th>
<th data-options="field:'mapprog',title:'Training Module',width:500"></th>
<th data-options="field:'status',title:'Status',width:50,align:'center'"></th>
<th data-options="field:'trgdate',title:'Plan Date',width:80,align:'center'"></th>
<th data-options="field:'actdate',title:'Act Date',width:80,align:'center'"></th>
<th data-options="field:'updcause',title:'Remarks',width:140"></th>
</tr>
</thead>
</table>
Title: Re: Expanding row of a grid does not load datagrid all time
Post by: thecyberzone on March 08, 2017, 10:34:10 PM
Two points to discuss, if it could not locate the particular dg3 element associated with the row expanded, then how it can load if I expand rows from bottom to top? In that case it is working fine. But if I expand from top to bottom row one after another then it fails to load data.
In your how I load the datagrid, because I have to parameterize the datagrid source url, and in that case I have to reference the same datagrid, if datagrid Id is not there using javascript it is difficult to do so.
So I am totally stuck off. Please help me.
Title: Re: Expanding row of a grid does not load datagrid all time
Post by: thecyberzone on March 09, 2017, 08:03:30 AM
As told by jarry, I have changed the code of the details page as follows: <table id="dg3" class="easyui-datagrid" style="width:980px;height:127px;"
data-options="singleSelect:true,
fitColumns:true,
rownumbers:true,
loadMsg:'loading...',
height:'auto',
idField: 'Id',
url:<?php echo $ur; ?>,
method: 'get',
onClickCell: onClickCell,
onResize:function(){
$(this).datagrid('fixDetailRowHeight',index);
},
onLoadSuccess:function(){
setTimeout(function(){
$(this).datagrid('fixDetailRowHeight',index);
},0);
},
onBeforeEdit: function(index,row){
row.editing = true;
var yr = <?php echo $yr; ?>;
$(this).datagrid('updateRow',{index:index, row:{}});
var colDate = $(this).datagrid('getColumnOption', 'trgdate');
colDate.editor = {
type:'combodate',
options:{
method: 'get',
valueField:'trgdate',
textField:'trgdate',
panelHeight:135,
url: 'rating.getPlan.php?yr='+yr+'&trgcode='+row.trgcode,
onLoadSuccess: function() {
}
}
};
},
onAfterEdit:function(index,row){
row.editing = false;
$(this).datagrid('updateRow',{index:index, row:{}});
// $(this).datagrid('endEdit', getRowIndex(target));
var yr = <?php echo $yr; ?>;
$.get('exeneed.skUpdate.php?yr='+yr+'&tno='+row.tno+'&trgcode='+row.trgcode+'&trgdate='+row.trgdate+'&actdate='+row.actdate
+'&status='+row.status+'&remarks='+encodeURIComponent(row.remarks));
$.messager.show({title:'Information',msg:'Data has been updated successfully!',timeout:2000,showType:'slide'});
}
">
<thead>
<tr>
<th data-options="field:'trgcode',width:80">ProgCode</th>
<th data-options="field:'mapprog',width:500">Training Module</th>
<th data-options="field:'trgdate',width:100,
editor:{
type:'combodate',
options:{
method: 'get',
valueField:'trgdate',
textField:'trgdate',
panelHeight:135
}
}">Plan Date</th>
<th data-options="field:'status',width:50,align:'right',
styler: function(value,row,index){
if (value==0){
return 'background-color:#ffffff;color:#ffffff;';
}
else {
if (value==1){
return 'background-color:#ff9f9f;color:#ff9f9f;'; }
else {
if (value==2){
return 'background-color:#80ff80;color:#80ff80;';
}
}
}
}">Status</th>
<th data-options="field:'actdate',width:80,align:'right'">Actual Date</th>
<th data-options="field:'updcause',width:120">Remarks</th>
</tr>
</thead>
</table>
And the problem has been solved, Thanks Jarry.
|