DBGrid Built-In PagingBar Added Button - How to change the icon image (outside of grid/pagingbar event) at runtime

[andyhill]

I have the following button added to the Grid's Built-In Paging Bar

             '    {'#13#10 +
             '      xtype: '#39'button'#39','#13#10 +
             '      icon: '#39'images/navigator/unfilter2.png'#39','#13#10 +
             '      width: 24,'#13#10 +
             '      height: 24,'#13#10 +
             '      tooltip: '#39'Filter'#39','#13#10 +
             '      handler: function() '#13#10 +
             '      {'#13#10 +
             '        ajaxRequest(sender, '#39'_Filter_'#39', []); '#13#10 +
             '      }  '#13#10 +
             '    },'#13#10 +
...

Subject to logic, change image

grdTest.JSInterface.JSCode --> icon: 'images/navigator/filter2.png'

grdTest.JSInterface.JSCode --> icon: 'images/navigator/unfilter2.png'

Please advise how I can change the icon image at runtime - Thanks in advance

[Sherzod]

9 hours ago, andyhill said:

Please advise how I can change the icon image at runtime - Thanks in advance

First of all, assign an Id to the button, then try using the js setIcon method.

[andyhill]

Yes, I understand I need to add id: "tstFilter" to Pagingbar button object.

I am trying to work out the syntax to change the Pagingbar icon with id: "tstFilter"

          grdTest.JSInterface.JSCode(#1'.pagingBar.tstFilter.setIcon(''images/navigator/filter-16.png'');');
 

Please advise

[Sherzod]

10 hours ago, andyhill said:

grdTest.JSInterface.JSCode(#1'.pagingBar.tstFilter.setIcon(''images/navigator/filter-16.png'');')

pagingBar.getComponent("btnId").setIcon("iconFilePathName")

[andyhill]

Sherzod, I tried to implement based on your suggestion 

          grdTest.JSInterface.JSCode(#1'.pagingBar.getComponent("supFilter").setIcon("images/navigator/filter-16.png"');

FAILS, Error attached.

I moved it out of grdTest AjaxEvent into MainForm AjaxEvent - same error

  //////////////////////////////////////////////////////////////////////////////
  if SameText('_SuppFilter_', EventName) then begin
          grdTest.JSInterface.JSCode(#1'.pagingBar.getComponent("supFilter").setIcon("images/navigator/filter-16.png"');
  end;

Please advise - thanks

[Sherzod]

Every time you use the JSCode method, end the js code with a semicolon - ;

[Sherzod]

You also made a mistake in the js code, you did not close the parenthesis in setIcon.

[andyhill]

My apologies for making such a rooky mistake - thanks Sherzod

[Sherzod]

On 1/2/2024 at 1:47 AM, andyhill said:

My apologies for making such a rooky mistake

No problem, happy programming!