Simulate a radtoolbarbutton

Question

User-2146352328 posted

Hi.

  <telerik:RadToolBarButton  runat="server" Value="EXPORT" ImageUrl="~/Images/Filexls24.png" ToolTip="Export Revenue" Text="Export Revenue:" ImagePosition="Right"  >
            </telerik:RadToolBarButton>

            <telerik:RadToolBarButton >
                <ItemTemplate>
                    <table>
                        <tr  style="vertical-align: middle;">
                            <td>
<span id="spanexcel" onclick="OnClientButtonClickingTemplate(); return false;"  onmouseover="" style="cursor: pointer;"> Import Revenue </span>
                            </td>
                            <td>
                                 <img alt="" src="~/Images/Filexls24.png" />

                            </td>
                                   
                            <td>
                                <asp:ImageButton ID="CmdUpload" runat="server" ImageUrl="~/Images/Filexls24.png"  ImageAlign="Middle"
                                     AlternateText="Import Revenue:" ToolTip="Import Revenue:"  OnClientClick="OnClientButtonClickingTemplate(); return false;"/>
                           </td>                   
                        </tr>
                    </table>
                </ItemTemplate>
            </telerik:RadToolBarButton>   

I'm tying to simulate a RadToolBarButton . The reason for this is that there is no client click event.

As you can see on the picture there is an orange color over the whole button. Is there a way to do so with the simple html  elements?

https://imgur.com/a/RS6ZIlJ

Answer 1

User475983607 posted

Right click on the item and select "Inspect".  This opens the browser's dev tools and shows the HTML associated with the element.  Simply copy the HTML bit you want.

Answer 2

User-2146352328 posted

Hi.

OK I did that and it's almost done but I have another issue here:

 <telerik:RadToolBarButton PostBack="false" >
                <ItemTemplate>
                       <table>
                        <tr  style="vertical-align: middle;">
                              <td>
                               <li class="rtbItem rtbBtn"  onclick="OnClientButtonClickingTemplate(); return false;"  id="exceli"  ><a title="Import Revenue" class="rtbWrap" href="#"><span class="rtbOut"><span class="rtbMid"><span class="rtbIn"><span class="rtbText">Import Revenue:</span><img alt="Import Revenue" src="../Images/Filexls24.png" class="rtbIcon"></span></span></span></a></li>
                            </td>             
                        </tr>
                         </ItemTemplate>
            </telerik:RadToolBarButton> 


  function OnClientButtonClickingTemplate() {
            var oWnd = radopen("GMSRead.aspx", "Import Revenue File");
            oWnd.center();
            oWnd.show();
            //width and height of RadWindow
            oWnd.setSize(620, 260);
            oWnd.minimize();
            oWnd.maximize();
            oWnd.restore();

            var e = document.getElementById("exceli");

            if (e.className.match(/rtbItemHovered/)) {
                alert(e)
                e.className = e.className.replace("rtbItemHovered", "")
            }


        }

There problem is that a class named "rtbItemHovered" is added on the li(exceli) when hovered that will show the orange color of the element, however when clicking and opening a bubble window, after I close the window the "rtbItemHovered" class remains. alert(e) will never hit and I can only remove the orange border by clicking somewhere else.

Is there a way I can remove the class from the li ?

Thanks.

Answer 3

User-2146352328 posted

Please note the code ends at far right.

Answer 4

User475983607 posted

Is there a way I can remove the class from the li ?

https://api.jquery.com/removeclass/

https://stackoverflow.com/questions/2155737/remove-css-class-from-element-with-javascript-no-jquery

Answer 5

User-2146352328 posted

I wish it was that simple.

It seems that the telerik RadWindowManager1 bubble it will ignore the script. There is an OnClientClose  event in it that I use but it's not removing the class.

Answer 6

User-2146352328 posted

Ok. There probably something wrong with the classes, so back at point zero, I removed this and added a table with with span and image.

Is there a way to make this like the picture?

  <telerik:RadToolBarButton >
                <ItemTemplate>
                    <table>
                        <tr style="vertical-align:middle;">
                            <td>
                                <span onclick="OnClientButtonClickingTemplate(); return false;"onmouseover="" style="cursor: pointer;">Import Revenue</span>
                           
                            </td>
                            <td>                                 
                                <asp:ImageButton ID="CmdUpload" runat="server" ImageUrl="~/Images/FileUp24.png"
                                     AlternateText="File Upload" ToolTip="Import Revenue"  OnClientClick="OnClientButtonClickingTemplate(); return false;"/>
                            </td>
                        </tr>
                    </table>
                </ItemTemplate>
            </telerik:RadToolBarButton>   

Answer 7

User839733648 posted

Hi sapator,

Since telerik:RadToolBarButton is a third party charging plugin, I'm sorry that I could not reproduce your issue and help you.

I suggest that you could go to https://community.progress.com/ to ask for helpful information.

Best Regards,

Jenifer

Answer 8

User-2146352328 posted

Hi. I will Jenifer.

I will start a new topic in html and css thread with extra info.

I will need to simulate the button alright, but with default hmtl controls.

Thanks.