Print Page - Change backgroundColor of combotree in datagrid filter

Title: Change backgroundColor of combotree in datagrid filter
Post by: hatux7 on June 28, 2017, 08:06:22 AM

Hello

I search to achieve this but nothing seems to work, i have a datagrid with a filter and one of the fields is type 'combotree', i want to every time the user check an option in the combotree the combotree change the background to green.

I can do this with: textbox, numberbox, combobox, and datebox with this code:

Code:

$('#myTextbox').textbox('textbox').css({backgroundColor: '#BAD7C9', color: '#515D57'});

but i dont know how to do the same in combotree, if i use this code throws error.

Can you help me please!

Title: Re: Change backgroundColor of combotree in datagrid filter
Post by: stworthy on June 29, 2017, 02:19:47 AM

This code has no problem.

Code:

$('#cc').combotree('textbox').css({backgroundColor: '#BAD7C9', color: '#515D57'});

Title: Re: Change backgroundColor of combotree in datagrid filter
Post by: hatux7 on June 29, 2017, 10:51:44 AM

Quote from: stworthy on June 29, 2017, 02:19:47 AM

This code has no problem.

Code:

$('#cc').combotree('textbox').css({backgroundColor: '#BAD7C9', color: '#515D57'});

You are right, if you create the combotree with an id like this:

Code:

$('#cc').combotree({
    url: 'get_data.php',
    required: true
});

that code works, the problem is my combotree has no id, because is create inside the datagrid filter:

Code:

$('#dg').datagrid('enableFilter',[
{
  field:'users',
  type:'combotree',
  options:{
    url:'get_users.php',
    multiple:true,
    checkbox:true,
    onCheck:function(node,checked){
        $('#dg').datagrid('addFilterRule', {
           field: 'users',
           op: 'equal',
           value: node.text
        }).datagrid('doFilter');

        //Change the background color here
    }
  }
}
]);

I tried to change with:

Code:

$(this).parent().combotree('textbox').css({backgroundColor: '#BAD7C9', color: '#515D57'});

But in console throws error: Uncaught TypeError: Cannot read property 'textbox' of undefined

So the only way i can do this is with:

Code:

$('#dg').datagrid('getFilterComponent','users').combotree('textbox').css({backgroundColor: '#BAD7C9', color: '#515D57'});

But i don't know if is the best way.

Title: Re: Change backgroundColor of combotree in datagrid filter
Post by: stworthy on June 29, 2017, 03:39:30 PM

The simplest way to get a filter component is to call the 'getFilterComponent' method, just you pointed out.

Code:

$('#dg').datagrid('getFilterComponent','users').combotree('textbox').css({backgroundColor: '#BAD7C9', color: '#515D57'});

You can also try this code.

Code:

onCheck: function(){
    var p = $(this).closest('.combo-panel');
    var combo = p.panel('options').comboTarget;
    $(combo).combotree('textbox').css({backgroundColor: '#BAD7C9', color: '#515D57'});
}

Or this code.

Code:

onInit: function(){
    var t = $(this).combotree('tree');
    t.tree('options').combo = this; // store the combo object
},
onCheck: function(){
    var combo = $(this).tree('options').combo;
    $(combo).combotree('textbox').css({backgroundColor: '#BAD7C9', color: '#515D57'});
}

Title: Re: Change backgroundColor of combotree in datagrid filter
Post by: hatux7 on July 03, 2017, 10:07:10 AM

stworthy thank you for all your help, now my page works very nice :)

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: hatux7 on June 28, 2017, 08:06:22 AM