locked
Simulate a radtoolbarbutton RRS feed

  • 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

    Monday, March 4, 2019 4:11 PM

All replies

  • 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.

    Monday, March 4, 2019 4:18 PM
  • 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.

    Tuesday, March 5, 2019 10:05 AM
  • User-2146352328 posted

    Please note the code ends at far right.

    Tuesday, March 5, 2019 1:28 PM
  • Tuesday, March 5, 2019 1:56 PM
  • 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.

    Tuesday, March 5, 2019 2:41 PM
  • 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>   

    Tuesday, March 5, 2019 3:02 PM
  • 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

    Thursday, March 7, 2019 7:06 AM
  • 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.

    Friday, March 8, 2019 1:44 PM