EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: aswzen on February 01, 2016, 05:31:37 AM



Title: Linkbutton custom style via javascript [UNSOLVED]
Post by: aswzen on February 01, 2016, 05:31:37 AM
Can we add link button custom style via javascript?

because for now there are no properties or options in linkbutton to do that,
and there are no method to attach ID either custom css class..

i have linkbutton generated by datagrid toolbars system and i want to change a linkbutton border size dynamically via javascript.
how to do that?

code:
Code:
 $('#DATAGRID_LIST').datagrid({
            data             : DATA_DETAILS,
            singleSelect     : true,
            fit              : true,
            toolbar          : [{
                plain     : true,
                text      : 'Add Package',
                iconCls  : 'icon-vendor',
                style     : 'float:right;border:2px solid black',  // <<<< not working
                handler  : function(){alert('Add Package')}
            }],
            columns:[[
                {field:'PACKAGE_GROUP_ALIAS',title:'Package',width:160,align:'left'},
                {field:'ATTACHMENT',title:'Attachment',width:460,align:'left'},
                {field:'SPEC_DESC',title:'Type / Location',width:350,align:'left'},
                {field:'ON_PENDING',title:'Status',width:100,align:'center'}
            ]]
        });
Thank you in advance


Title: Re: Linkbutton custom style via javascript
Post by: stworthy on February 01, 2016, 07:06:19 PM
You should attach the 'id' property to the button and select it by id selector.
Code:
toolbar          : [{
    id     : 'btnAdd',
    plain     : true,
    text      : 'Add Package',
    iconCls  : 'icon-vendor',
    handler  : function(){alert('Add Package')}
}],


Title: Re: Linkbutton custom style via javascript
Post by: aswzen on February 01, 2016, 08:58:36 PM
ok ID is fine but how to add custom class name?

because this one does not work
Code:
toolbar          : [{
    class : 'btnAdd', // <<<<<<< not working
    plain     : true,  // <<<<<<< i realized this one does not work too
    text      : 'Add Package',
    iconCls  : 'icon-vendor',
    handler  : function(){alert('Add Package')}
}],

i see your documentation have wrong example code
open documentation > datagrid > toolbar
you will see this code

<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"/a>

it should be

<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"></a>