Welcome Guest Search | Active Topics | Sign In | Register

Custom pushed buttons. can't put it to work Options
ztp
Posted: Tuesday, March 1, 2011 12:44:29 PM
Rank: Newbie
Groups: Member

Joined: 3/1/2011
Posts: 7
Hi, I need to switch from my current HTML Editor for our CMS and I'm evaluating EO, namelly the HTML Editor.

I can't seem to put a custom toggle button to work.

Here is the aspx code of the editor:

Code: HTML/ASPX
<eo:Editor ID="Editor1" runat="server" ToolBarSet="Full" EmoticonSet="">
        <CustomHeaderTemplate>
          <eo:ToolBar ID="HeaderToolBar1" runat="server" Width="300px" ClientSideOnItemClick="EOEditorHTMLToolbarClickHandler">
            <Items>
              <eo:ToolBarItem CommandName="ParagraphMode" ImageUrl="~/images/toggleparagraphmode.gif" ToolTip="Toggle paragraph mode" AutoCheck="true" />
              <eo:ToolBarItem CommandName="Bold" ImageUrl="00101011" ToolTip="Bold" />
            </Items>
            <NormalStyle CssText="padding:3px 4px; border-style:none; cursor:hand; " />
            <HoverStyle CssText="padding:2px 3px; border: #335ea8 1px solid; background-color: #c2cfe5; cursor:hand;" />
            <DownStyle CssText="border: #335ea8 1px solid; padding:3px 2px 1px 4px; background-color: #99afd4; cursor:hand;"  />
          </eo:ToolBar>
        </CustomHeaderTemplate>
      </eo:Editor>


I also have the javascript block:

Code: JavaScript
function EOEditorHTMLToolbarClickHandler(Toolbar, ToolbarItem, Submenu)
{
	var pushed = ToolbarItem.getPushed();
	alert("click. present state:" + pushed);
	if (ToolbarItem.getCommandName() == "ParagraphMode")
	{
		ToolbarItem.setPushed(!pushed);
		return false;
	}
		
	return true;
}


For the "ParagraphMode" button, it's state is always "true"... I cannot seem to change it! And graphically it only appear highlighted when the mouse is over the button.

I'm I doing something wrong?

Thank you in advance
José Proença
searchmarketing.pt
eo_support
Posted: Tuesday, March 1, 2011 2:00:31 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

Please try the following steps:

1. Change CommandName="ParagraphMode" to CommandArgument="ParagraphMode". This means the toolbar button no longer has a CommandName value. This is important because as long as the button has a CommandName, the editor will "take it over" and ignore your setPushed call;

2. Add an onload handler to your document's body element:

Code: HTML/ASPX
<body onload="init_toolbar()" ...>
...
</body>


Code: JavaScript
function init_toolbar()
{
    //Delay the call
    setTimeout(function()
    {
        //Get the toolbar
        var toolBar = eo_GetObject("HeaderToolBar1");

        //Enable the toolbar item
        toolBar.getItem(0).setDisabled(false);
    }, 10);
}


This enables the first toolbar button (change the index "0" to another number if it is not the first button). This is necessary because the Editor will automatically disable all commands that does not have a command name;

3. Change your EOEditorHTMLToolbarClickHandler to call ToolbarItem.getCommandArgument instead of ToolbarItem.getCommandName since CommandName is empty now.

This should work for you. Please let us know how it goes.

Thanks!
ztp
Posted: Tuesday, March 1, 2011 2:28:12 PM
Rank: Newbie
Groups: Member

Joined: 3/1/2011
Posts: 7
Thank you for your fast response. It sure is a big plus of your package!!

Now for the change you suggested.
I've applied all your directives, debugged step-by-step to see if everyting is as expected, but it does not work. The result is the same: its getPushed() always return true.
The only thing that worked as you expected is that the button appears disabled at first, and then it becomes enabled.
The code for your verification:

Code: JavaScript
function EOEditorHTMLToolbarClickHandler(Toolbar, ToolbarItem, Submenu)
{
  var pushed = ToolbarItem.getPushed();
  alert("click. present state:" + pushed);
  if (ToolbarItem.getCommandArgument() == "ParagraphMode")
  {
    ToolbarItem.setPushed(!pushed);
    return false;
  }
    
  return true;
}


Code: HTML/ASPX
<eo:ToolBarItem CommandArgument="ParagraphMode" ImageUrl="~/images/toggleparagraphmode.gif" ToolTip="Toggle paragraph mode" AutoCheck="true" Disabled="false" />


Maybe I should use a completely custom toolbaritem ?
eo_support
Posted: Tuesday, March 1, 2011 2:30:58 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

You are very welcome. Try to remove AutoCheck="true" and Disabled="false" from your toolbar item. Those two are unnecessary.

Thanks!
ztp
Posted: Tuesday, March 1, 2011 2:33:18 PM
Rank: Newbie
Groups: Member

Joined: 3/1/2011
Posts: 7
I've managed to put it to work, although I have much more so say about this. In a few hours I will return to this topic in the forum to develop further.
thank you.
eo_support
Posted: Tuesday, March 1, 2011 3:16:26 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
No problem. Please feel free to let us know.

Thanks!
ztp
Posted: Wednesday, March 2, 2011 7:52:33 AM
Rank: Newbie
Groups: Member

Joined: 3/1/2011
Posts: 7
My last answer was posted before I saw your advice on AutoCheck and Disabled, and you were right.
"Disabled" was a remnant of my experiments. But removing AutoCheck did the trick.

I've also concluded one more thing.
Adding Pushed=True to the ToolbarItem makes the button start in the selected state.
But, setting Pushed=False, makes the button start in "undefined" state.
I think this is odd and unexpected.

Adding disabled=false to the ToolbarItem should prevent adding that code to enable the button initially. In fact this code is not practical. You see, the code I've shown was made for debugging purpose. The Html Editor will be inserted in a CMS system with very complex control loading. Your html editor will be loaded by one or more Page.LoadControl() inside two or more nested update panels. Even if it were possible, less-than elegant solutions would contribute the CMS system being more error prone.

I think your solution, namely, the non-pre-defined commandNames being also processed internally is very awkward. Using commandArgument to pass the command name is also an indicator of a poor solution, in my perspective.
In fact, I've discovered that returning True or False from the ClientSideOnItemClick function controls further processing of the command, which is the expected behavior on an command processing hook function.

So all this seems like a work in progress solution, to me. I would like to know what is your perspective on this matter.

Meanwhile I have to go for the custom toolbaritem solution. In this solution I guess that I have to provide all from scratch to put a two-state button to work, afterall redoing what you have done with the ToolBarItem object! Or is there any other solution?

Many thanks!
José Proença
searchmarketing.pt
eo_support
Posted: Wednesday, March 2, 2011 8:24:05 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
ztp wrote:
I think your solution, namely, the non-pre-defined commandNames being also processed internally is very awkward. Using commandArgument to pass the command name is also an indicator of a poor solution, in my perspective.

I agree with you on this one. Custom commands was implemented but most people only needs it to trigger their custom action. The issue only become apparent when you also need to check/uncheck the button. I believe the cleanest way for us to address this is issue to change our code so that custom commands are ignored (or provide some kind of "UpdateButtonState" callback) by our Editor.

ztp wrote:
In fact, I've discovered that returning True or False from the ClientSideOnItemClick function controls further processing of the command, which is the expected behavior on an command processing hook function.

Yes. This is the designed behavior.

ztp wrote:
Meanwhile I have to go for the custom toolbaritem solution. In this solution I guess that I have to provide all from scratch to put a two-state button to work, afterall redoing what you have done with the ToolBarItem object! Or is there any other solution?

Custom toolbar item is great for "normal" solutions, but you may run into issues with pushed state again. The reason is unless the toolbar knows what style should be applied in "pushed" state, it will try to apply "hover style" on top of the "pushed style".

If you can wait for a few days, we should be able to give you a newer build with a "cleaner" solution through setPushed. That might be a better solution for you.

Thanks!
ztp
Posted: Wednesday, March 2, 2011 9:26:57 AM
Rank: Newbie
Groups: Member

Joined: 3/1/2011
Posts: 7
eo_support wrote:

If you can wait for a few days, we should be able to give you a newer build with a "cleaner" solution through setPushed. That might be a better solution for you.
Thanks!


Athough I have much more customizing to do, if you do that, I'll buy it before ending my tests!!!!! I'll can't go wrong with you!

many thanks
eo_support
Posted: Wednesday, March 2, 2011 9:32:23 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Good to hear that. We will try to provide you an update build as soon as possible.
eo_support
Posted: Friday, March 4, 2011 3:48:44 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

We have posted a new build that would ignore custom toolbar items. Please see your private message for the download location.

Your original code will work fine with the new build except that you need to remove AutoCheck="true", which is no longer necessary.

Thanks!
ztp
Posted: Monday, March 7, 2011 7:29:03 AM
Rank: Newbie
Groups: Member

Joined: 3/1/2011
Posts: 7
Works perfectly!!
I'll start the purchase procedure asap.
Many, many thanks!
eo_support
Posted: Monday, March 7, 2011 9:17:07 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Glad to hear that! Please feel free to let us know if you need any help.


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.