EasyUI Forum
October 12, 2025, 06:27:12 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Expanding row of a grid does not load datagrid all time  (Read 12947 times)
thecyberzone
Full Member
***
Posts: 176



View Profile Email
« 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)
Code:
		$('#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 :

Code:
<?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 "  />
&nbsp;&nbsp;&nbsp;&nbsp;
<a href="#" class="easyui-linkbutton" iconCls="icon-add" onclick="addNeed()">Add</a>
&nbsp;
<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:

Code:
<?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.
Logged
thecyberzone
Full Member
***
Posts: 176



View Profile Email
« Reply #1 on: March 08, 2017, 03:12:26 AM »

I am also attaching the screenshot of another row expanded when data is not loaded.
Logged
jarry
Administrator
Hero Member
*****
Posts: 2300


View Profile Email
« Reply #2 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.
Code:
<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>
Logged
thecyberzone
Full Member
***
Posts: 176



View Profile Email
« Reply #3 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.
Logged
thecyberzone
Full Member
***
Posts: 176



View Profile Email
« Reply #4 on: March 09, 2017, 08:03:30 AM »

As told by jarry, I have changed the code of the details page as follows:

Code:
    <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.
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!