Cannot find items in RadToolBar when a RadToolBarDropDown is in the collection

[Praveen]

The following code does not work when the toolbar contains any RadToolBarDropDown objects:

RadToolBar1.Items.FindItemByValue("buttonValue").Visible = true;

It results in the following exception:

Value property is not supported by RadToolBarDropDown
Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

Exception Details: System.Exception: Value property is not supported by RadToolBarDropDown

This makes using it very difficult (indeed impossible).

I note that this has come up before but it seems like the problem is being ignored

 

[Praveen]

I have submitted this as a bug to the support system, #438803

[Kate]

Hello Praveen,

Unfortunately, I am not able to open the forum (I assume it to be) that you gave a link to. However, to be able to find a Child Button located in RadToolBarDropDown you will only need to use the following code (no need to search in the Items):
markup:

<telerik:RadToolBar ID="RadToolBar1" runat="server">
           <Items>
               <telerik:RadToolBarButton runat="server" Text="Button 0" Value="button1">
               </telerik:RadToolBarButton>
               <telerik:RadToolBarButton runat="server" Text="Button 1">
               </telerik:RadToolBarButton>
               <telerik:RadToolBarButton runat="server" Text="Button 2">
               </telerik:RadToolBarButton>
               <telerik:RadToolBarButton runat="server" Text="Button 3">
               </telerik:RadToolBarButton>

               <telerik:RadToolBarDropDown runat="server" Text="DropDown 0">
                   <Buttons>
                       <telerik:RadToolBarButton runat="server" Text="Child Button 1" Value="value1">
                       </telerik:RadToolBarButton>
                       <telerik:RadToolBarButton runat="server" Text="Child Button 2">
                       </telerik:RadToolBarButton>
                   </Buttons>
               </telerik:RadToolBarDropDown>
           </Items>
       </telerik:RadToolBar>

code behind:

protected void Page_Load(object sender, EventArgs e)
   {        RadToolBar1.FindItemByValue("value1").Visible = false;

   }

Kind regards,
Kate
the Telerik team

[Praveen]

Thank you Kate, that's ace, thanks!

[Garry]

Kate

I am encountering the same problem.

I cannot use your workaround because I need access to the .Checked property which is not in the Item base class:

RadToolBar1.Items.FindItemByValue("groupingEditor").checked
'checked' is not a member of 'Telerik.Web.UI.RadToolBarItem'.

Here is my code:

Dim btn As Telerik.Web.UI.RadToolBarButton = RadToolBar1.Items.FindItemByValue("groupingEditor")

and here is the response at run-time:
System.Exception was unhandled by user code
Message: Value property is not supported by RadToolBarDropDown

This is raised because there is a drop down on the toolbar and the FindItemByValue function still contains a bug in 2012.1.

[Kate]

Hello Garry,

You need to cast the item to the correct type so you can access the Check property of the control. You can refer to the below example:

<telerik:RadToolBar ID="RadToolBar1" runat="server" >
        <Items>
            <telerik:RadToolBarDropDown EnableDefaultButton="false" Text="Suspend" runat="server" >
                <Buttons>
                    <telerik:RadToolBarButton Text="Suspend Projects" runat="server" Value="1" >
                    </telerik:RadToolBarButton>
                    <telerik:RadToolBarButton Text="Suspend Workflows" runat="server">
                    </telerik:RadToolBarButton>
                    <telerik:RadToolBarButton Text="Resume Projects" runat="server">
                    </telerik:RadToolBarButton>
                    <telerik:RadToolBarButton Text="Resume Workflows" runat="server">
                    </telerik:RadToolBarButton>
                </Buttons>
            </telerik:RadToolBarDropDown>
            <telerik:RadToolBarButton runat="server" Text="button0" Value="2"  >
            </telerik:RadToolBarButton>
            <telerik:RadToolBarButton runat="server" Text="button1">
            </telerik:RadToolBarButton>
            <telerik:RadToolBarButton runat="server" Text="button2">
            </telerik:RadToolBarButton>
        </Items>
    </telerik:RadToolBar>

code behind:

protected void Page_Load(object sender, EventArgs e)
    {
        var button1 = (RadToolBarButton)RadToolBar1.FindItemByValue("1");
        button1.Checked = true;


    }

Greetings,
Kate
the Telerik team

[Charles]

Is there a way to do this from client-side code? I have a RadToolBarDropDown with several RadToolBarButtons. Most of them I can access from the server side with an OnButtonClick for the toolbar hosting them. But, there is one RadToolBarButton that carries a template with a RadDatePicker within it. Once a date is chosen, the dropdown collapses and I have no choice but to write code in the OnClientDropDownClosing event handler on the client. I can't use the option of not collapsing the dropdown after choosing a date because that would render the other buttons in the dropdown ineffective. Basically, my markup for the toolbar looks something like this:

<telerik:RadToolBar runat="server" ID="RadToolBar1" OnClientDropDownClosing="DropDownClosing" OnClientButtonClicked="ToolbarButtonClick" OnButtonClick="RadToolbar_ButtonClicked" EnableViewState="false">
    <Items>
        <telerik:RadToolBarDropDown EnableDefaultButton="true" ImageUrl="Images/search.gif" DropDownWidth="200px" DefaultButtonIndex="0" Text="View" runat="server">
            <Buttons>
                <telerik:RadToolBarButton Text="Last 24 Hours" ImageUrl="Images/twentyfourhours.png" runat="server" CheckOnClick="True" Group="Views"></telerik:RadToolBarButton>
                <telerik:RadToolBarButton Text="Last 3 Days" ImageUrl="Images/notes.gif" runat="server" CheckOnClick="True" Group="Views"></telerik:RadToolBarButton>
                <telerik:RadToolBarButton Text="Last Week" ImageUrl="Images/calendar.gif" runat="server" CheckOnClick="True" Group="Views"></telerik:RadToolBarButton>
                <telerik:RadToolBarButton Text="Unread" ImageUrl="Images/unread.png" runat="server" CheckOnClick="True" Group="Views"></telerik:RadToolBarButton>
                <telerik:RadToolBarButton Text="Flagged" ImageUrl="Images/followUp.gif" runat="server" CheckOnClick="True" Group="Views"></telerik:RadToolBarButton>
                <telerik:RadToolBarButton Value="since" Group="Views" CheckOnClick="True" ImageUrl="Images/windows.png" Text="Since...">
                    <ItemTemplate>
                        <table>
                        <tr>
                            <td style="width:40px;">
                                <img src="Images/windows.png"/>
                            </td>
                            <td>
                                <telerik:RadDatePicker ID="dtSince"
                                                           Runat="server"
                                                           PopupDirection="BottomRight"
                                                           ZIndex="2000000">

                                </telerik:RadDatePicker>
                            </td>
                        </tr>
                        </table>
                    </ItemTemplate>
                </telerik:RadToolBarButton>
                <telerik:RadToolBarButton Text="Reset View" ImageUrl="Images/search.gif" runat="server" CheckOnClick="True" Group="Views"></telerik:RadToolBarButton>
            </Buttons>
        </telerik:RadToolBarDropDown>
    </Items>
</telerik:RadToolBar>

Ultimately, I want all of the RadToolBarButtons within the RadToolBarDropDown to rrespond to a button click. Since there is no button click for the RadDatePicker within the template, I was hoping to attempt to handle that on the client. Any way out of this problem?

[Kate]

Hello Charles,

One way I can think of is that you use the client-side OnDateSelected event and show the dropdown of the RadToolBar control whenever you select a date. For instance you can use the following code:

<script type="text/javascript">
        function OnDateSelected() {
            var tb1 = $find("RadToolBar1");
            var dd = tb1.findItemByText("View");
            tb1.set_collapseAnimation('0');
            tb1.set_expandAnimation('0');
            dd.showDropDown();

        }

    </script>

markup:

<telerik:RadDatePicker ID="dtSince" runat="server" PopupDirection="BottomRight" ZIndex="2000000"
        ClientEvents-OnDateSelected="OnDateSelected">                                       </telerik:RadDatePicker>

All the best,
Kate
the Telerik team

[Stacy]

Is there a way to do a "find" when it is the ToolBarDropDown you want to enable/disable, not just the child buttons?

[Kit Cat]

Stacy, 

Try using the get_dropDownElement() as described here or you can also try the approach described in this demo. 

[Stacy]

Sorry, what I was looking for was for the "RadToolBarDropDown" with buttons.  I ended up using the pre_render event to find it.

Also, the "get_dropDownElement()" is not listed in the link you sent so you may need to update your notes.

[Stacy]

So I have a toolbar with buttons on it, one of them is a radtoolbardropdown.  How do you go about "finding" this to enable/disable in javascript?  I can find all the other "radtoolbarbuttons" on the toolbar but I cant seem to get it to "find" the dropdown so I can enable/disable it.

[Shinu]

Hi Stacy,

You can use the findItemByText() method to get the instance of a particular item as follows.

JavaScript:

var Toolbar = $find("<%=RadToolBar1.ClientID %>");
var toolbarDropdown = Toolbar.findItemByText("DropDownItem1"); // accessing the toolbar dropdown
var toolbarButton = Toolbar.findItemByText("ButtonItem1"); //accessing the toolbar button

Please have a look into the following help help documentation to get more information about RadToolBar and RadToolBarItem client object.

RadToolBar Client Object
RadToolBarItem Client Object

Thanks,
Shinu.

[Stacy]

That code returns null for me.  I can find buttons but not the toolbar dropdown

[Stacy]

Actually, I can find the dropdown but my issue is due to language, this dropdown wont always have the same text as the users can customize it.  Why is there no way to reference this by ID or something static like most controls?

[Shinu]

Hi Stacy,

In order to get the Items of RadToolBar try to use the methods findItemByText() or findItemByValue(), will returns the item in the toolbar with the specified text or value respectively. For accessing the controls inside the RadToolBarItem use the method findControl. This is the best approach to accessing controls in the RadToolBar and RadToolBarItem.

Thanks,
Shinu.

[Stacy]

findItemByText wont work as the text will not be the same as users can customize the name of the RadToolbarDropDown.  I cannot use findItemByValue as the RadToolbarDropDown does not contain that attribute.

[Shinu]

Hi Stacy,

With reference to this forum thread RadToolBarDropDown doesn't have Value attribute. So the way of accessing RadToolbarDropDown from client side is by  using findItemText. Can you please elaborate the statement "user can customize the text", how it is performed?

Thanks,
Shinu.

[Stacy]

We offer a dynamic product with users having the ability to change button text to suit their language so we cannot always trust that the "text" will be the same.  Not sure why this control would not have an ID tag a part of it's design.

[Boyan Dimitrov]

Hello Stacy,

Indeed the RadToolBar RadToolBarDropDown does not have Value property and this request is already logged in our system. Here you can track its progress and vote for it. At this point the only solution is to find the item by text.


Regards,
Boyan Dimitrov
Telerik

 

 

[Albert Shenker]

Its only been 7 year since this issue was brought up and still no server-side solution. You created the client-side findByAttribute function which is quite useful. Why did you completely ignore the same server-side? Or better yet, implement a Value property like what should have been done from the beginning? The inability to reference a ToolbarDropDown item server-side by anything other than index or text is a glaring omission!

[Peter Milchev]

Hello Albert,

Here is the Feature request for the Value server-side property of the ToolBarDropDown:

• https://feedback.telerik.com/aspnet-ajax/1373453-implement-value-and-finddropdownbyvalue-property-for-the-radtoolbardropdown 

Actually, the attributes are available for the server-side items as well. You can add them either in the markup or from the code-behind. The runat=server for the item markup is not necessary, it will still work but Visual Studio might underline it as a warning.

Here is an easy way how to add an attribute and find the item by attribute from the code behind.

<telerik:RadToolBar runat="server" ID="RadToolbar1"> 
    <Items>
        <telerik:RadToolBarDropDown data-id="my-dropdown-item">
            <Buttons>
                <telerik:RadToolBarButton Text="Button markup"></telerik:RadToolBarButton>
            </Buttons>
        </telerik:RadToolBarDropDown>
    </Items>
</telerik:RadToolBar>

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        var ddl = RadToolbar1.FindItem(x => x.Attributes["data-id"] == "my-dropdown-item") as RadToolBarDropDown;
        ddl.Buttons.Add(new RadToolBarButton("Button code behind"));
    }
}

Also, the Value property for the dropdown would be unreliable as an identifier, especially if it assumes the value of the selected button. In such a case, I strongly recommend using the attributes method for identifying RadToolBarDropDown items.

Regards,
Peter Milchev
Progress Telerik

[Albert Shenker]

Thanks. That's what I was looking for. Perhaps you guys can create a FindByAttribute wrapper on this to make it consistent with your client-side code.

[Peter Milchev]

Hello Albert,

FindItemByAttribute is a good suggestion and fortunately you can easily make it as an extension method until it is built-in:

• https://docs.microsoft.com/en-us/dotnet/csharp/programming-guide/classes-and-structs/extension-methods

public static class TelerikToolBarExtensions{
    public static RadToolBarItem FindItemByAttribute(this RadToolBar toolbar, string attribute, string value)
    {
        return toolbar.FindItem(x => x.Attributes["data-id"] == "my-dropdown-item");
    }
}

public partial class Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
           
            //var ddl = RadToolbar1.FindItem(x => x.Attributes["data-id"] == "my-dropdown-item") as RadToolBarDropDown;
            var ddl = RadToolbar1.FindItemByAttribute("data-id","my-dropdown-item") as RadToolBarDropDown;
            ddl.Buttons.Add(new RadToolBarButton("Button code behind"));
        }
    }
}

Regards,
Peter Milchev
Progress Telerik