Title: filter row datagrid with checkbox with three states
Post by: Opan Mustopah on February 01, 2015, 07:40:10 PM
hello again. how to make datagrid filter row to achieve feature filtering row with chekcbox with 3 states? like default: all, on: true, off: false? checkbox:{
init: function(container, options){
var span = $('<span class="tree-checkbox tree-checkbox0" style="position:relative;top:2px"></span>').appendTo(container);
span.attr('onval', options.on).attr('offval', options.off);
span.bind('click',function(){
if ($(this).hasClass('tree-checkbox1')){
$(this).val(options.off);
$(this).removeClass('tree-checkbox1').addClass('tree-checkbox0');
} else {
$(this).val(options.on);
$(this).removeClass('tree-checkbox0').addClass('tree-checkbox1');
}
});
console.log(span);
return span;
},
getValue: function(target){
if ($(target).hasClass('tree-checkbox1')){
return $(target).attr('onval');
} else {
return $(target).attr('offval');
}
},
setValue: function(target, value){
if ($(target).attr('onval') == value){
$(target).removeClass('tree-checkbox0').addClass('tree-checkbox1');
} else {
$(target).removeClass('tree-checkbox1').addClass('tree-checkbox0');
}
},
resize:function(target,width){
}
}
i already try to extend new filter with checkbox that i found on some post here, but this only two states, on: true and off: false. but actually this isn't work yet, because when i try to click that checkbox nothing happened to my datagrid. how to do that? many thanks for the answer
Title: Re: filter row datagrid with checkbox with three states
Post by: stworthy on February 02, 2015, 12:51:53 AM
Please try this extended filter: $.extend($.fn.datagrid.defaults.filters,{
checkbox:{
init: function(container, options){
var span = $('<span class="tree-checkbox tree-checkbox0"></span>').appendTo(container);
span.bind('click',function(){
if ($(this).hasClass('tree-checkbox0')){
$(this).removeClass('tree-checkbox0').addClass('tree-checkbox1');
this.v = 'checked';
} else if ($(this).hasClass('tree-checkbox1')){
$(this).removeClass('tree-checkbox1').addClass('tree-checkbox2');
this.v = 'indeterminate';
} else {
$(this).removeClass('tree-checkbox2').addClass('tree-checkbox0');
this.v = 'unchecked';
}
if (options.onChange){
options.onChange.call(this, this.v);
}
})
return span;
},
getValue: function(target){
return target.v;
},
setValue: function(target, value){
$(target).removeClass('tree-checkbox0 tree-checkbox1 tree-checkbox2');
if (value == 'checked'){
$(target).addClass('tree-checkbox1');
} else if (value == 'indeterminate'){
$(target).addClass('tree-checkbox2');
} else {
$(target).addClass('tree-checkbox0');
}
},
resize: function(target, width){
}
}
});
Title: Re: filter row datagrid with checkbox with three states
Post by: Opan Mustopah on February 02, 2015, 12:53:17 AM
thanks stworthy for your replay, i'll try it ASAP.
Title: Re: filter row datagrid with checkbox with three states
Post by: Opan Mustopah on February 26, 2015, 04:44:33 AM
hello stworthy, i already try your extended filter, here is my code:
$list_data.datagrid('enableFilter', [
{field: 'updated_at',type: 'dateRange',op: 'betweenDate'},
{field: 'pi_date',type: 'dateRange',op: 'betweenDate'},
{field: 'post_date',type: 'dateRange',op: 'betweenDate'},
{field: 'due_date',type: 'dateRange',op: 'betweenDate'},
{field: 'currency_rate',type: 'numberRange',op: 'betweenNumber'},
{field: 'amount_tax',type: 'numberRange',op: 'betweenNumber'},
{field: 'amount_pi',type: 'numberRange',op: 'betweenNumber'},
{field: 'is_pi_or_ret',type: 'checkbox',options: optFilterCheckbox($list_data, 'is_pi_or_ret', 'equal')},
{field: 'action', type: 'label'}
]);
function optFilterCheckbox(){
var dg = arguments[0];
var field = arguments[1];
var op = arguments[2]
var opts = {
onChange:function(target, value){
console.log(value);
console.log(target);
console.log(dg);
//doFilter(dg);
/*
if (value == 'checked'){
addFilterRule(field, true, op, dg);
}else if (value == 'indeterminate'){
addFilterRule(field, false, op, dg);
}else{
removeFilterRule(field, dg);
}
*/
// doFilter(dg);
}
}
return opts;
}
i make the filter options dynamic, but i can filter data correctly, the checkbox state won't change when i click it. but when i comment filter rule, i can change checkbox state, but i can't getting checkbox filter value. i can't get value from getValue function on extend filter code. thanks in advancce
|