Title: Inline Modify data on datagrid - Closed
Post by: shivavalkyre on June 28, 2015, 05:30:33 PM
Hi, can somebody help me i have problem with inline editing on datagrid, in my design i take a combogrid and some textbox at datagrid, i have plan to update my textbox with data on selection event combogrid. i successfully when update my first row data but when i fill second row data, my first row data also change with my second row data. here my code for datagrid design:
<table id="dg2" title="" style="width:700px;height:250px"
toolbar="#toolbar" data-options="singleSelect:false,pageList:[100],pageSize:100" pagination="false" idField="trandetailid"
rownumbers="true" fitColumns="true" >
<thead>
<tr>
<th field="card_no" width="50" editor="{type:'combogrid',options:{required:true,panelWidth:580,idField:'card_no',textField:'card_no',mode:'remote',url:'./control/card.php',columns: [[
{field:'card_no',title:'Card No',width:100},
{field:'material_name',title:'Material Name',width:350},
{field:'Unit',title:'Unit',width:30},
{field:'account_code',title:'Kode Kartu',width:100}
]], onSelect: onSelectGrid,
onShowPanel: onShowPanel,
onHidePanel: onHidePanel,}}">Card No</th>
<th field="material_name" width="50" editor="{type:'text',options:{required:true}}">Material Description</th>
<th field="Unit" width="20" editor="text" >Unit</th>
<th field="quantity" width="30" editor="text">Quantity</th>
<th field="accbiaya" width="40" editor="text">Kode Kartu</th>
</tr>
</thead>
</table>
and here my script code: function getRowIndex(target) {
var tr = $(target).closest('tr.datagrid-row');
return parseInt(tr.attr('datagrid-row-index'));
}
var cbg=null;
var tb=null;
function onSelectGrid(index,record) {
if(cbg) {
var cb = cbg;
var opts =cb.combogrid('options');
var grid = cb.combogrid('grid');
var row= grid.datagrid('getSelected');
//alert (row.material_name);
var index = $('#dg2').datagrid('getSelected');
//alert (index);
//$(target).val(row.material_name);
$('#dg2').datagrid('updateRow',{
index: index,
row: {
card_no: row.card_no,
material_name: row.material_name,
Unit:row.Unit,
accbiaya:row.account_code,
}
});
$('dg2').datagrid('reload');
}
}
function onShowPanel() {
cbg = $(this);
}
function onHidePanel() {
cbg = null;
}
Title: Re: Inline Modify data on datagrid
Post by: stworthy on June 29, 2015, 12:11:10 AM
Please try the code below instead. function onSelectGrid(index,row){
var dg = $('#dg2');
var index = dg.datagrid('getRowIndex', dg.datagrid('getSelected'));
var editors = dg.datagrid('getEditors', index);
$(editors[1].target).val(row.material_name);
$(editors[2].target).val(row.Unit);
$(editors[4].target).val(row.account_code);
}
Title: Re: Inline Modify data on datagrid
Post by: shivavalkyre on June 29, 2015, 01:21:05 AM
Thanks for reply,your code for index work perfectly but i'm not use all of your code and combine it with my previous code where use datagrid update event. but now i have little problem after update event, combogrid still open after update even i try to refresh datagrid. Could you give me sugestion here my new code:
function getRowIndex(target) {
var tr = $(target).closest('tr.datagrid-row');
return parseInt(tr.attr('datagrid-row-index'));
}
var cbg=null;
var tb=null;
function onSelectGrid(index,record) {
if(cbg) {
var cb = cbg;
var opts =cb.combogrid('options');
var grid = cb.combogrid('grid');
var row= grid.datagrid('getSelected');
// alert (row.material_name);
var dg = $('#dg2');
var index = dg.datagrid('getRowIndex', dg.datagrid('getSelected'));
// var index = $('#dg2').datagrid('getSelected');
//alert (index);
//$(target).val(row.material_name);
$('#dg2').datagrid('updateRow',{
index: index,
row: {
card_no: row.card_no,
material_name: row.material_name,
Unit:row.Unit,
accbiaya:row.account_code,
}
});
$('#dg2').datagrid('reload');
}
}
function onShowPanel() {
cbg = $(this);
}
function onHidePanel() {
cbg = null;
}
Title: Re: Inline Modify data on datagrid
Post by: shivavalkyre on June 29, 2015, 01:45:51 AM
Ok, Thanks i was find it. this topic Closed..
|