Title: bugs using filter datagrid and rowspan columns properties.
Post by: Opan Mustopah on March 13, 2015, 08:16:31 PM
hello again. i'm using filter extension on datagrid and adding rowspan properties on column, but the result is not what i expected. see bugs filter datagrig.png here is my code: <div class='easyui-panel' data-options='border: false, fit: true' style='padding: 5px;'>
<div data-options='fit: true' id='list_data'></div>
<div class='tb' id='tb_list_data'>
<span>
<!-- update01 ganti semua fungsi ac_get_nav_st dengan nst_get_nav_st -->
<a class="easyui-linkbutton" data-options="plain:true" href="javascript:void(0)" iconCls="icon-back" onclick="close_wizard($list_data);">Close Wizard</a>
</span>
</div>
</div>
<script>
// start VAR global atau yang dipakai berulang-ulang untuk function dibawah
var frm_url ; // variable untuk url save, update, dan delete form
var cmenu ;
var rep_obj = 't_guest_a_master' ; //CUSTOMIZE
var $list_data = $('#list_data') ; // define id yang di gunakan sebagai datagrid.
var $frm_dlg = $('#frm_dlg') ; // define id yang di gunakan sebagai form modal.
var $frm = $('#frm') ; // define id yang digunakan sebagai form di dalam form modal.
var url_crud_row = "";
var init_url = "/t_guest_a_masters/sc_counter?prm=3783" // define url untuk digunakan sebagai counter.
// stop VAR
// start function untuk TABLE
$(function(){
$('#list_data').datagrid({
title: "Invitation Event Wizard",
url: "/t_guest_c_cats/sc_load_data_pivot_index?prm=3783", //CUSTOMIZE
toolbar: "#tb_list_data",
idField: 'id' ,
resizeHandle: "both" ,
autoRowHeight: true ,
striped: true ,
method: 'get' ,
fitColumns: false ,
remoteSort: true ,
remoteFilter: true ,
sortName: 'guest_id', //CUSTOMIZE
sortOrder: 'desc',
singleSelect: true,
rownumbers: true,
//pageSize: 20, // update01 , pageSize di comment.
view: scrollview,
multiSort: true,
filterPosition: 'top',
frozenColumns: [[
{field: 'action', title: 'Nav', width: 90, halign: 'center', align: 'center',
formatter: function(value, row, index){
if (row.editing){
var s = '<a href="#" onclick="save_row(this, $list_data)" data-no-turbolink="true" id="save" class="easyui-linkbutton" iconCls="icon-save" title="Save"></a>';
var c = '<a href="#" onclick="cancel_row(this, $list_data)" data-no-turbolink="true" id="cancel" class="easyui-linkbutton" iconCls="icon-cancel" title="Cancel"></a>';
return s+" | "+c;
}else{
var x = '<a href="#" onclick="show_form(this, $list_data, $frm_dlg, $frm, rep_obj)" data-no-turbolink="true" id="show" class="easyui-linkbutton" iconCls="icon-search" title="Show"></a>';
var e = '<a href="#" onclick="edit_row(this, $list_data)" data-no-turbolink="true" id="edit" class="easyui-linkbutton" iconCls="icon-edit" title="Edit"></a>';
var d = '<a href="#" onclick="delete_row(this, $list_data, url_crud_row, state)" data-no-turbolink="true" id="delete" class="easyui-linkbutton" iconCls="icon-remove" title="Delete"></a>';
return e;
}
}
},
{field: 'guest_id' , title: 'Guest ID' , align: 'left' , halign: 'center', width:100,sortable: true, hidden: true},
{field: 'barcode_num' , title: 'Barcode' , align: 'center', halign: 'top', width:70 ,sortable: true},
{field: 'guest_name' , title: 'Invitation Name' , align: 'left' , halign: 'center', width:400,sortable: true},
{field: 'guest_cat' , title: 'Invitation Group', align: 'left' , halign: 'center', width:150,sortable: true},
{field: 'evt_level_id', title: 'Invitation Level', align: 'left' , halign: 'center', width:150,sortable: true, formatter: function(value,row,index){
return row.evt_level_name;
}
}
]],
columns: [[{title: 'Event Category',halign: 'center', colspan: 4}],[{field: '0_event', title:'AKAD', align:'center', halign:'center',width:80, sortable: false,
editor:{
type:'checkbox',
options:{on: true,off: false}
}
},{field: '1_event', title:'SIRAMAN', align:'center', halign:'center',width:80, sortable: false,
editor:{
type:'checkbox',
options:{on: true,off: false}
}
},{field: '2_event', title:'RESEPSI', align:'center', halign:'center',width:80, sortable: false,
editor:{
type:'checkbox',
options:{on: true,off: false}
}
},{field: '3_event', title:'AFTER PARTY', align:'center', halign:'center',width:80, sortable: false,
editor:{
type:'checkbox',
options:{on: true,off: false}
}
}]],
onHeaderContextMenu: function(e, field){
e.preventDefault();
if (!cmenu){
createColumnMenu($list_data);
}
cmenu.menu('show',{
left: e.pageX,
top: e.pageY
});
},
onBeforeEdit: function(rowIndex, rowData){
rowData.editing = true;
updateActions(rowIndex, $list_data);
loadLinkbutton(this);
state.op = "edit";
},
// update01 , event onBeginEdit adalah custom, digunakan jika ada kondisi atau function tertentu yang ingin dijalankan saat crud di grid.
onBeginEdit:function(index,row){
},
onAfterEdit: function(rowIndex, rowData, changes){
rowData.editing = false;
sf_save_event_guest(this, rowData,rowIndex, changes);
//getChange($list_data, url_crud_row, this, state, rowIndex, rowData); // update01
},
onCancelEdit: function(rowIndex, rowData){
rowData.editing = false;
updateActions(rowIndex, $list_data);
loadLinkbutton(this);
state.op = "show";
},
onLoadSuccess: function(data){
loadLinkbutton(this);
state.op = "show";
emptyRow(this, data.total);
}
}).datagrid('getPanel').attr('tabindex','-1').bind('keydown',function(e){
keyHandlerDatagrid(e.keyCode, $list_data, url_crud_row, $frm_dlg, $frm, rep_obj, state);
});
// start function FILTER datagrid #CUSTOMIZE
$list_data.datagrid('enableFilter', [
{
field: 'action',
type: 'label'
}
]
);
// stop function FILTER datagrid #CUSTOMIZE
});
function sf_save_event_guest(target,row, index, changes){
var vurl = "/t_guest_c_cats/sc_save_guest_event?prm=3783";
if (changes){
var vchange = $(target).datagrid('getChanges', 'updated');
var list_data = JSON.stringify(vchange);
// AJAX POST.
$.post(vurl,{prm_list_data: list_data},function(data){
if (data.msg == "OK"){
$list_data.datagrid('acceptChanges');
updateActions(index,$list_data);
loadLinkbutton(target);
state.op = 'show';
state.row = '';
}else{
$.messager.alert('INFO',data.msg, 'info');
updateActions(index,$list_data);
loadLinkbutton(target);
state.op = 'show';
state.row = '';
$list_data.datagrid('rejectChanges');
return false;
}
},'json')
.fail(function(data){
$.messager.alert('ERROR',"Something error Occured.",'error');
return false;
});
}else{
updateActions(index,$list_data);
loadLinkbutton(target);
}
}
function close_wizard(dg){
$.messager.confirm("Confirmation","Close Wizard ?",function(r){
if (r){
window.location = "/t_guest_c_cats?prm=3783";
return false;
}
});
}
function updateDataRow(index, target){
$list_data.datagrid('selectRow', index);
var row = $list_data.datagrid('getSelected');
if (row){
$.ajax({
url: "/t_guest_a_masters/sc_refresh_row?prm=3783",
dataType: 'json',
type: 'get',
data: {
// update01 , sekarang hanya kirim id yang sudah di tampung di object state.
id: state.id //CUSTOMIZE
}
})
.done(function(data){
$list_data.datagrid('updateRow', {
index: index,
row: {
id: data.id,
updated_by: data.updated_by,
updated_at: formatDate(data.updated_at),
evt_level_name: data.evt_level_name
}
});
loadLinkbutton(target);
var data = $list_data.datagrid('getData');
emptyRow('#list_data', data.total);
// update01 stop
})
.fail(function(request, error, status){
$.messager.alert('Error', request.responseText);
return false;
});
}
}
// stop function untuk TABLE
</script>
</body>
many thanks for the answer.
Title: Re: bugs using filter datagrid and rowspan columns properties.
Post by: jarry on March 15, 2015, 08:54:06 AM
Please try to use the following 'frozenColumns' definition. frozenColumns: [[
{field: 'action', title: 'Nav', width: 90, halign: 'center', align: 'center',rowspan:2
},
{field: 'guest_id' , title: 'Guest ID' , align: 'left' , halign: 'center', width:100,sortable: true, hidden: true,rowspan:2},
{field: 'barcode_num' , title: 'Barcode' , align: 'center', halign: 'top', width:70 ,sortable: true,rowspan:2},
{field: 'guest_name' , title: 'Invitation Name' , align: 'left' , halign: 'center', width:400,sortable: true,rowspan:2},
{field: 'guest_cat' , title: 'Invitation Group', align: 'left' , halign: 'center', width:150,sortable: true,rowspan:2},
{field: 'evt_level_id', title: 'Invitation Level', align: 'left' , halign: 'center', width:150,sortable: true ,rowspan:2
}
],[]],
Title: Re: bugs using filter datagrid and rowspan columns properties.
Post by: Opan Mustopah on March 15, 2015, 09:12:34 PM
thanks jarry it works!
|