Print Page - disable linkbutton inside datagrid

Title: disable linkbutton inside datagrid
Post by: crosemffet on December 09, 2015, 01:11:13 PM

hello everybody, and thanks in advance for your support,
maybe it's a simple question, but after 14 hs of programming today I'm a little confused:
$('#myButton').linkbutton('disable'); --> works ok, disable the button myButton

my problem is myButton is inside datagrid the disable method is not working:
<table class=easyui-datagrid>
<td><a href=# class=easyui-linkbutton id=myButton>Hello World!</a></td>
</table>

in this code, $('#myButton').linkbutton('disable'); doesn't seems to work.
what am I doing wrong...? thanks again for your invaluable support.

Title: Re: disable linkbutton inside datagrid
Post by: stworthy on December 10, 2015, 06:14:22 AM

The datagrid only parses the plain data from <table> element, the components on the cell will be parsed as html data. Please prevent from defining auto parsed components directly on the cell. The alternative solution to solve this issue is to define the components with non 'easyui-' class and then create these components after loading data successfully.

Code:

<table id="dg">
<td><a href=# class=e-linkbutton id=myButton>Hello World!</a></td>
</table>
<script>
$(function(){
    $('#dg').datagrid({
        onLoadSuccess: function(){
            $(this).datagrid('getPanel').find('.e-linkbutton').linkbutton();
        }
    })
})
</script>

Title: Re: disable linkbutton inside datagrid
Post by: crosemffet on December 10, 2015, 02:43:23 PM

hey sworthy, you save my day as usual.
everything you propose works perfect, except for one point:
when I use your solution, and assign icon-cls to the button, for one unknown reason the icon shows two times.
the code:
$(this).datagrid('getPanel').find('.e-linkbutton').linkbutton({plain:true,iconCls:'icon-add'};
shows the button, but with two plus signs together (" + + ")
is not the end of the world, but maybe you can check it... thanks in advance,

Title: Re: disable linkbutton inside datagrid
Post by: stworthy on December 10, 2015, 06:13:15 PM

Please refer to this example http://jsfiddle.net/xnpLzo3v/

Title: Re: disable linkbutton inside datagrid
Post by: bduguay on May 25, 2017, 05:33:00 AM

I know this is an old thread, but how do you enable/disable the button within the datagrid/treegrid?

I have my formatter create the button

Code:

function buttonFormatter(buttonText, row, ca) {
    return '<a href="#" id="btn' + row.id + '" class="e-linkbutton" data-options="width:57">' + buttonText + '</a>';
}

but when I go to disable the button with the following code, nothing happens

Code:

$('#btn' + row.id).linkbutton('disable');

Any help would be appriciated.
Thank you.

Title: Re: disable linkbutton inside datagrid
Post by: stworthy on May 27, 2017, 01:26:54 AM

Please make sure that the button exists before calling the 'disable' method.

Code:

var btn = $('#btn' + row.id);
console.log(btn);

Title: Re: disable linkbutton inside datagrid
Post by: bduguay on May 29, 2017, 07:29:07 AM

Hi stworthy,

This is the results of the console.

Title: Re: disable linkbutton inside datagrid
Post by: bduguay on June 05, 2017, 07:05:03 AM

I've figure out the answer

Code:

$('#btn' + row.id).linkbutton('disable');
$('#btn' + row.id.prop('isConnected', false);

and then refresh the grid buttons

Code:

$('#dg).datagrid('getPanel').find('.e-linkbutton').linkbutton();

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: crosemffet on December 09, 2015, 01:11:13 PM