Title: Edatagrid with edit form in expanded row details
Post by: Punkerr on October 31, 2012, 03:20:52 PM
I tried to set expanded row details with edatagrid, but not success: <script type="text/javascript">
$(function() {
$('#dg').edatagrid({
url: 'plan_get.php',
saveUrl: 'plan_save.php',
updateUrl: 'plan_update.php',
destroyUrl: 'plan_destroy.php',
view: 'detailview',
detailFormatter:function(index,row){
return '<div class="ddv"></div>';
},
onExpandRow: function(index,row){
var ddv = $(this).edatagrid('getRowDetail',index).find('div.ddv');
ddv.panel({
border:false,
cache:true,
href:'show_form.php?index='+index,
onLoad:function(){
$('#dg').edatagrid('fixDetailRowHeight',index);
$('#dg').edatagrid('selectRow',index);
$('#dg').edatagrid('getRowDetail',index).find('form').form('load',row);
}
});
$('#dg').edatagrid('fixDetailRowHeight',index);
},
rowStyler: function(index, row) {
if (row.cantidad > row.stock) {
return 'color:red;font-weight:bold;';
}
if (row.cantidad == 1) {
return 'color:green';
}
},
onClickRow:function(){
var row = $('#dg').edatagrid('getSelected');
if (row){
document.getElementById("client").value = row.client;
document.getElementById("category").value = row.category;
}
}
});
});
function doSearch() {
$('#dg').edatagrid('load', {
articleid: $('#article').val(),
article: $('#artdescription').val(),
clientid: $('#client').val(),
category: $('#category').val()
});
}
function clearSearch() {
$('#dg').edatagrid('load', {
articleid: '',
article: '',
clientid: '',
category: ''
});
document.getElementById("article").value = "";
document.getElementById("artdescription").value = "";
document.getElementById("client").value = "";
document.getElementById("category").value = "";
}
function cantNegative(val, row) {
if (val < 0) {
return '<span style="color:red;font-weight:bold;">(' + (-1) * (val) + ')</span>';
} else {
return val;
}
}
$(document).keyup(function(e) {
if (e.keyCode == 27) { $('#dg').edatagrid('cancelRow'); // esc key
}
});
</script>
</head>
<body>
<table width="100%" border="0">
<tr>
<td><img src="img/logo.bmp" /></td>
<td align="right">
<?php
session_start();
?>
<?php
if (isset($_SESSION['k_username'])) {
echo 'Welcome <b>'.$_SESSION['k_username'].'</b>.';
echo '<p><a href="index.php" class="easyui-linkbutton" iconCls="icon-home" plain="true" >Home</a><a href="log_out.php" class="easyui-linkbutton" iconCls="icon-turnoff" plain="true" >Close Sesión</a></p>';
}
?>
</td>
</tr>
</table>
<h2 align="center">PLANNER</h2>
<div class="demo-info" style="margin-bottom:5px">
<div class="demo-tip icon-about"></div>
<div>Double click to edit qty.</div>
</div>
<table id="dg" title="Planner" style="margin:0 auto" toolbar="#toolbar" pagination="true" idField="id" url="get.php" rownumbers="true" iconCls="icon-table" singleSelect="true" fitColumns="true">
<thead>
<tr>
<th field="article" width="30">Article</th>
<th field="artdescription" width="110">Description</th>
<th field="qty" width="15" align="right">Total</th>
<th field="stock" width="15" align="right">Stock</th>
<th field="diferences" width="15" align="right" formatter="cantNegative">Diferences</th>
<th field="a102" width="15" editor="{type:'numberbox',options:{required:true,precision:0,min:0,max:10}}" align="right">A102</th>
<th field="a104" width="15" editor="{type:'numberbox',options:{required:true,precision:0,min:0,max:10}}" align="right">A104</th>
<th field="a105" width="15" editor="{type:'numberbox',options:{required:true,precision:0,min:0,max:10}}" align="right">A105</th>
<th field="a109" width="15" editor="{type:'numberbox',options:{required:true,precision:0,min:0,max:10}}" align="right">A109</th>
<th field="a110" width="15" editor="{type:'numberbox',options:{required:true,precision:0,min:0,max:10}}" align="right">A110</th>
<th field="a111" width="15" editor="{type:'numberbox',options:{required:true,precision:0,min:0,max:10}}" align="right">A111</th>
<th field="a116" width="15" editor="{type:'numberbox',options:{required:true,precision:0,min:0,max:10}}" align="right">A116</th>
</tr>
</thead>
</table>
<div id="toolbar" style="padding:5px;height:auto">
<div align="center">
<span>ID Article:</span>
<input id="article">
<span>Description:</span>
<input id="artdescription">
<span>Client:</span>
<input id="client">
<span>Category:</span>
<input id="category">
<a href="#" class="easyui-linkbutton" iconCls="icon-ok" plain="true" onClick="doSearch()">Search</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-no" plain="true" onClick="clearSearch()">Clear Search</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onClick="javascript:$('#dg').edatagrid('destroyRow')">Delete</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onClick="javascript:$('#dg').edatagrid('saveRow')">Save</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-undo" plain="true" onClick="javascript:$('#dg').edatagrid('cancelRow')">Cancel</a>
</div>
</div>
</body>
I'm doing wrong?? or edatagrid not supports expanded rows?
Title: Re: Edatagrid with edit form in expanded row details
Post by: stworthy on October 31, 2012, 05:27:47 PM
You are going wrong with the view data type. It is an object not string. Try correcting your code as: $('#dg').edatagrid({
view: detailview
});
Title: Re: Edatagrid with edit form in expanded row details
Post by: Punkerr on November 02, 2012, 10:34:06 AM
Thanks for replay sworthy, but I tried that and still not success. Only displays column name header in text format, toolbar but no rows :(. Maybe "view: detailview," doesn't work in edatagrid.
Title: Re: Edatagrid with edit form in expanded row details
Post by: stworthy on November 02, 2012, 06:42:43 PM
The detailview work fine in edatagrid. Please refer to this example http://jsfiddle.net/6NXjB/.
Title: Re: Edatagrid with edit form in expanded row details
Post by: Punkerr on November 05, 2012, 10:07:10 AM
Oh great man, I got it now!! how could i missed this line!! :
<script type="text/javascript" src="jscript/datagrid-detailview.js"></script>
I assumed that feature was already included in jquery.edatagrid.js ;D.
Thanks!!
|