i have a little problem using datagrid filter extension, and this is first time i meet with this problem.
my problem is, when i try to filter the datagrid, result from filter always calling twice, and the weirdest is that row become multiple, for example , when i filter something just said it return 2 record which mean it's 2 rows, but in my case, the datagrid is request again to server, (until here i think it's ok) , but the problem is showing up. on the second request, record become multiple which mean 4 record.
i already try to debug it on my application log, and on that second request, i check the query result is 2, but when after loaded into datagrid, become 4.? why it is happen? is i miss something?
<div class='tb' id='tb_grid_wizard'>
<a class="easyui-linkbutton" href="javascript:void(0)" iconCls="icon-add" id="add_row" onclick="add_row();">Add Row</a>
</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 = 'b_product_b_attr' ; //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 = "/bmod/product/b_product_b_attrs/control_data_pivot?prm=4801"; // CUSTOMIZE define url yang digunakan untuk proses save, update, dan delete datagrid.
var init_url = "/bmod/product/b_product_b_attrs/sc_counter?prm=4801"; //define url yang digunakan untuk init data ketika create new data.
var is_master_detail = true; // custom master detail;
// stop VAR
$(function(){
$('#list_data').datagrid({
url:'/bmod/product/b_product_b_attrs/sc_load_data_pivot_index?prm=4801',
method:'get',
toolbar: '#tb_grid_wizard',
fitColumns:false,
fit: true,
rownumbers: true,
striped: true,
idField: 'id',
remoteFilter: true,
autoRowHeight: true,
checkOnSelect: false,
selectOnCheck: false,
view: scrollview,
frozenColumns:[
[
{field:'action',title: 'Nav', align: 'center', halign: 'center', sortable: false, rowspan: 2, width: 100,
formatter: function(value,row,index){
var s = '<a href="#" onclick="save_attr_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_attr_row(this, $(\'#list_data\'))" data-no-turbolink="true" id="cancel" class="easyui-linkbutton" iconCls="icon-cancel" title="Cancel"></a>';
var e = '<a href="#" onclick="edit_attr_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_attr_row(this, $(\'#list_data\'), state)" data-no-turbolink="true" id="delete" class="easyui-linkbutton" iconCls="icon-remove" title="Delete"></a>';
if (row.editing){
return s+" | "+c;
}else{
return d;
}
}
}
],[]
],
columns: [[{title: 'Attributes',halign: 'center', colspan: 4}],[{field: 'attribute_0', title:'COLOUR', align:'left', halign:'center',width:200, sortable: false,
formatter: function(value, row,index){
return row.attribute_0_name;
},
editor:{
type:'combogrid',
options:{
url: '/ncs_lookups/a_lov_user_as',
queryParams:{role:9, prm_parent:'42', prm_active: true},
mode: 'remote',
method: 'get',
panelWidth: 300,
idField: 'lov_id_user',
textField: 'lov_title_b',
height:22,
required: true,
tipPosition: 'top',
attr_id: '124',
onShowPanel:function(){return rowHeight(this);},
columns: [[
{field: 'lov_title_b', width: 230,title: 'Name', halign: 'center', sortable: true}
]]
}
}
},{field: 'attribute_1', title:'BRAND', align:'left', halign:'center',width:200, sortable: false,
formatter: function(value, row,index){
return row.attribute_1_name;
},
editor:{
type:'combogrid',
options:{
url: '/ncs_lookups/a_lov_user_as',
queryParams:{role:9, prm_parent:'44', prm_active: true},
mode: 'remote',
method: 'get',
panelWidth: 300,
idField: 'lov_id_user',
textField: 'lov_title_b',
height:22,
required: true,
tipPosition: 'top',
attr_id: '125',
onShowPanel:function(){return rowHeight(this);},
columns: [[
{field: 'lov_title_b', width: 230,title: 'Name', halign: 'center', sortable: true}
]]
}
}
},{field: 'attribute_str_2', title: 'TYPE', align: 'left', halign: 'center', width: 200, sortable: false,
editor: {
type: 'textbox',
options: {
validType: 'maxLength[50]',
required: true,
attr_id: '126'
}
}
},{field: 'attribute_bool_3', title: 'NEW', align: 'center', halign: 'center', width: 100, sortable: false,
formatter: function(value,row,index){
if (row.attribute_bool_3 == 1){
row.attribute_3_name = 'TRUE';
return row.attribute_3_name;
}else{
row.attribute_3_name = 'FALSE';
return row.attribute_3_name;
}
},
editor: {
type: 'checkbox',
options: {on: 1, off: 0, attr_id: '171'}
}
}]],
// onHeaderContextMenu: function(e, field){
// e.preventDefault();
// if (!cmenu){
// createColumnMenu($list_data);
// }
// cmenu.menu('show',{
// left: e.pageX,
// top: e.pageY
// });
// },
onCheck: function(index,row){
start_edit(this);
},
onCheckAll: function(rows){
start_edit(this);
},
onUncheck: function(index,row){
stop_edit(this, row);
},
onUncheckAll: function(rows){
stop_edit(this, rows);
},
onBeforeEdit: function(index,row){
row.editing = true;
updateActions(index, $(this));
loadLinkbutton(this);
state.op = "edit";
},
onBeginEdit: function(index,row){
var field = $(this).datagrid('getColumnFields');
/*
for(var i=0; i< field.length;i++){
var col_opt = $(this).datagrid('getColumnOption', field[i]);
row[field[i]+"_attr_id"] = col_opt.attr_id;
}
*/
},
onAfterEdit: function(index, row, changes){
row.editing = false;
var data = $(this).datagrid('getData');
var rows = data.rows;
if (data.total > 1){
var count = 0;
for(var i=0; i< rows.length; i++){
var vrow = rows[i];
if (index != i){
if (JSON.stringify(row) == JSON.stringify(vrow)){
count += 1;
}
}
}
if (count == 0){
get_attr_change($(this), index, row, this);
}else{
$(this).datagrid('acceptChanges');
updateActions(index, $(this));
loadLinkbutton(this);
state.op = 'show';
state.row = '';
$(this).datagrid('beginEdit', index);
$.messager.alert('Info','Each record must uniqe.','info');
}
}else{
get_attr_change($(this), index, row, this);
// $(this).datagrid('acceptChanges');
// updateActions(index, $(this));
// loadLinkbutton(this);
// state.op = 'show';
// state.row = '';
}
},
onEndEdit: function(index,row,changes){
var field = $(this).datagrid('getColumnFields');
var id_attr = "";
var produk_name = "";
for(var i=0; i < field.length; i++){
var col_opt = $(this).datagrid('getColumnOption', field[i]);
if (col_opt.editor.type == 'combogrid'){
var ed = $(this).datagrid('getEditor', {index: index, field: field[i]});
var text = $(ed.target).combogrid('getText');
var value = $(ed.target).combogrid('getValue');
row[field[i]+"_name"] = text;
id_attr += value;
produk_name += " "+text;
}else if (col_opt.editor.type == 'textbox'){
var ed = $(this).datagrid('getEditor', {index: index, field: field[i]});
var value = $(ed.target).textbox('getValue');
produk_name += " "+value;
}else if (col_opt.editor.type == 'checkbox'){
if (row[field[i]] == 1){
row[field[i]+"_name"] = "TRUE";
// row[field[i]] = "TRUE";
}else{
row[field[i]+"_name"] = "FALSE";
// row[field[i]] = "FALSE";
}
var text = row[field[i]+"_name"]
var value = row[field[i]]
id_attr += value;
produk_name += " "+text;
}
}
row["vproduk_name"] = produk_name;
row["vid_attr"] = id_attr;
},
onCancelEdit: function(index,row){
row.editing = false;
updateActions(index, $(this));
loadLinkbutton(this);
state.op = "show";
},
onLoadSuccess:function(data){
var ck = $('.datagrid-header-check').find('input[type="checkbox"]');
ck.remove();
loadLinkbutton(this);
state.op = "show";
if (data.rows == []){
if (data.rows[0].product_id != null){
obj.idParent = data.rows[0].product_id;
}
}
var panel = $(this).datagrid('getPanel').find('.datagrid-view2');
var body = $(panel).find('.datagrid-body');
if (data.total == 0) {
$(body).append("<div class='no-result'>Please click button add row first.</div>");
} else {
$(body).remove('.no-result');
}
},
onSelect: function(index,row){
// $(this).datagrid('unselectRow',index);
}
});
$('#list_data').datagrid('enableFilter',[
{field: 'action', type: 'label'}
]);
});
function loadDataFromParent(idParent){
$.get("/bmod/product/b_product_b_attrs/sc_load_datagrid_column?prm=4801",
function(data){
obj.idParent = idParent;
if (data.code_string != "" || data.code_string != null){
eval("("+data.code_string+")");
}
$('#list_data').datagrid('enableFilter',[
{field: 'action', type: 'label'}
]);
}
);
}
function save_attr_row(target, obj){
obj.datagrid('endEdit',getRowIndex(target));
}
function cancel_attr_row(target, obj){
if (state.row == "new_row"){
obj.datagrid('rejectChanges');
var data = obj.datagrid('getData');
if (data.total > 0){
obj.datagrid('reload');
// updateActions(getRowIndex(target), $(target));
// loadLinkbutton(target);
}
}else{
if (obj.datagrid('getChanges').length){
obj.datagrid('rejectChanges');
}else{
obj.datagrid('cancelEdit', getRowIndex(target));
}
}
state.row = "";
}
function edit_attr_row(target, obj){
obj.datagrid('beginEdit', getRowIndex(target));
}
function delete_attr_row(target, obj, state){
$.messager.confirm("Confirmation","Are you sure to delete this product attribute ?",function(r){
if (r){
var index = getRowIndex(target);
obj.datagrid('deleteRow', index);
get_attr_change($('#list_data'), index, {}, target);
// obj.datagrid('acceptChanges');
// var data = obj.datagrid('getData');
// if (data.total > 0){
// obj.datagrid('reload');
// }else{
// obj.datagrid('loadData',[]);
// }
}
});
}
function add_row(){
if (is_master_detail){
if (typeof obj.idParent === "undefined"){
$.messager.alert('Warning', 'Create parent data first before create detaill data.');
return false;
}
}
var row = $('#list_data').datagrid('getChecked');
if (state.op == "edit"){
$.messager.alert('Warning', 'There are current record being edited. You can not editing different record in the same time.');
return false;
}
$('#list_data').datagrid('insertRow',{
index: 0,
row: {}
});
state.row = "new_row";
$('#list_data').datagrid('selectRow',0);
$('#list_data').datagrid('beginEdit',0);
}
function new_row(dg){
$.messager.alert('Info',"Please use button 'Add Row' below.", 'info');
return false;
}
function new_form(state){
$.messager.alert('Info',"Please use button 'Add Row' below.", 'info');
return false;
}
function get_attr_change(dg, index, row, target){
// var dg = $(target);
if (dg.datagrid('getChanges').length){
var inserted = dg.datagrid('getChanges','inserted');
var updated = dg.datagrid('getChanges', 'updated');
var deleted = dg.datagrid('getChanges','deleted');
var changedRow = new Object();
if (inserted.length){
changedRow['inserted'] = JSON.stringify(inserted);
}
if (updated.length){
changedRow['updated'] = JSON.stringify(updated);
}
if (deleted.length){
changedRow['deleted'] = JSON.stringify(deleted);
}
}
if (typeof changedRow == 'undefined' || changedRow == null){
updateActions(index, $(target));
loadLinkbutton(target);
state.op = 'show';
state.row = '';
return false;
}
// AJAX REQ
$.post(url_crud_row,
{
row_data: changedRow
}, function(data){
if (data.msg == "OK"){
dg.datagrid('acceptChanges');
if (state.row == 'new_row'){
updateActions(index, dg);
loadLinkbutton(target);
}else if (state.op == 'edit'){
updateActions(index, dg);
loadLinkbutton(target);
}else{
var page = getCurrentPage(dg);
if (page == 1){
dg.datagrid('reload');
}else{
dg.datagrid('refetch');
}
// jika datagrid empty.
if (isNaN(page)){
dg.datagrid('reload');
}
}
state.op = 'show';
state.row = '';
} else {
if (state.row == 'new_row'){
dg.datagrid('rejectChanges');
}else if (state.op == 'edit'){
dg.datagrid('beginEdit',index);
}else{
dg.datagrid('rejectChanges');
}
$.messager.alert('Info', data.msg, 'info');
}
});
}
</script>
many thanks for the answer and explanation (i hope you understand with my explanation).
if you guys need more information about my problem, just replay my post.
