filter row datagrid with checkbox with three states

[Opan Mustopah]

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?

Code:

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

[stworthy]

Please try this extended filter:

Code:

$.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){

		}
	}
});

[Opan Mustopah]

thanks stworthy for your replay, i'll try it ASAP.

[Opan Mustopah]

hello stworthy, i already try your extended filter,

here is my code:

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