RadSplitButton

13 posts, 0 answers
  1. BB
    BB avatar
    13 posts
    Member since:
    Mar 2007

    Posted 24 Dec 2010 Link to this post

    I need a control that does the following thing:

    A Normal button on Top, and if i click on the button, it opens e.g. exact the same buttons (visually the same full button)  with other text in it

    directly under the button above.

    -----------
    |   13:00 |       Button 1     ( Normal state)
    -----------

    ------------
    |   13:00  |         Button 1      (Expanded state)
    ------------
    |   15:00  |         Button 2
    ------------
    |   17:00  |         Button  3
    -----------

    Please could you tell me how can i realize this ?

    Thank you very much

  2. Richard Slade
    Richard Slade avatar
    3000 posts
    Member since:
    May 2009

    Posted 24 Dec 2010 Link to this post

    Hello BB,

    As per the title of your thread, you need a RadSplitButton. Please take a look at the RadSplitButton documentatin which can be found here

    Hope that helps
    Richard
  3. UI for WinForms is Visual Studio 2017 Ready
  4. BB
    BB avatar
    13 posts
    Member since:
    Mar 2007

    Posted 24 Dec 2010 Link to this post

    Thank you very much.
    I tried a 2 hours for that radsplitbutton and have problems with 
    the radItems. The problem is, to adjust it to the left side and the right side, exactly so,
    that it fits the left outside complete and not a small portion away from the upper left.

    Also if there is text inside the item, it cuts to the right although there is enough place to show the whole text.
    It seems theres is padding or margin from the right side, but it is 0.
    How can i ajdust the width  of the Item for the whole width of the control ?.
    Do you have a sample for the settings ?.  All Items (Buttons) and Item Number 0 (the top)  should have the same size !!!.
    At the moment items differ in size. I want to display text over the whole itemsize (Width) and not a portion of it.

    Thank you very much.

  5. Richard Slade
    Richard Slade avatar
    3000 posts
    Member since:
    May 2009

    Posted 28 Dec 2010 Link to this post

    Hello BB,

    thanks for writing and apologies for the delay in getting back to you. I'm not sure if I full understand what your requirement is. Are you able to post a screenshot or similar somewhere for further explain and I'll be happy to help
    thanks
    Richard
  6. Stefan
    Admin
    Stefan avatar
    2890 posts

    Posted 29 Dec 2010 Link to this post

    Hi BB,

    Thank you for writing.

    Please consider the following code snippet. It demonstrates how to achieve the desired behavior:

    public Form1()
           {
               InitializeComponent();
     
               RadMenuButtonItem buttonItem1 = new RadMenuButtonItem("Button 1");
               buttonItem1.Padding = new System.Windows.Forms.Padding(0);
               buttonItem1.ButtonElement.Padding = new System.Windows.Forms.Padding(4);
     
               RadMenuButtonItem buttonItem2 = new RadMenuButtonItem("Button 2");
               buttonItem2.Padding = new System.Windows.Forms.Padding(0);
               buttonItem2.ButtonElement.Padding = new System.Windows.Forms.Padding(4);
     
               RadMenuButtonItem buttonItem3 = new RadMenuButtonItem("Button 3");
               buttonItem3.Padding = new System.Windows.Forms.Padding(0);
               buttonItem3.ButtonElement.Padding = new System.Windows.Forms.Padding(4);
     
               RadMenuButtonItem buttonItem4 = new RadMenuButtonItem("Button with very very long text");
               buttonItem4.Padding = new System.Windows.Forms.Padding(0);
               buttonItem4.ButtonElement.Padding = new System.Windows.Forms.Padding(4);
               //buttonItem4.Size = radSplitButton1.Size;
               //buttonItem4.AutoSize = false;
               //buttonItem4.ButtonElement.TextElement.TextWrap = true;
     
               radSplitButton1.Items.Add(buttonItem1);
               radSplitButton1.Items.Add(buttonItem2);
               radSplitButton1.Items.Add(buttonItem3);
               radSplitButton1.Items.Add(buttonItem4);
     
               RadDropDownMenuElement menuElement = (RadDropDownMenuElement)radSplitButton1.DropDownButtonElement.DropDownMenu.PopupElement;
               menuElement.Layout.LeftColumnMinWidth = 0;
               menuElement.MinSize = new Size(radSplitButton1.Size.Width, 0);
     
           }
     
    I hope this helps. If there is anything else I can assist you with, do not hesitate to contact me.

    Regards,
    Stefan
    the Telerik team
    Q3’10 SP1 of RadControls for WinForms is available for download; also available is the Q1'11 Roadmap for Telerik Windows Forms controls.
  7. BB
    BB avatar
    13 posts
    Member since:
    Mar 2007

    Posted 29 Dec 2010 Link to this post

    Thank you very much for the answer. It now looks like it should, except different colours for each item.
    The behaviour should for the

    first Item  :Background: Black    Foreground: White
    second Item  :Background: Blue    Foreground: White
    third Item  :Background: Brown   Foreground: White
    fourth Item  :Background: Green    Foreground: White

    Please could you extend the code for this.
    Thank you very much.
  8. Stefan
    Admin
    Stefan avatar
    2890 posts

    Posted 03 Jan 2011 Link to this post

    Hi BB, 

    Thank you for your reply.

    The following code snippet demonstrates how you can achieve the desired settings for RadMenuButtonItem:

    buttonItem1.ButtonElement.ForeColor = Color.White;
    buttonItem1.ButtonElement.ButtonFillElement.BackColor = Color.Black;
    buttonItem1.ButtonElement.ButtonFillElement.NumberOfColors = 1;

    Alternative approach is to create a custom theme using our Visual Style Builder tool.

    Let me know if you need anything else.

    Best wishes,
    Stefan
    the Telerik team
    Q3’10 SP1 of RadControls for WinForms is available for download; also available is the Q1'11 Roadmap for Telerik Windows Forms controls.
  9. BB
    BB avatar
    13 posts
    Member since:
    Mar 2007

    Posted 05 Jan 2011 Link to this post

    Thank you very much for the help,

    the control looks now good, except the header (top button).

    If I choose an item e.g. button item 3 (backcolor green, forecolor white) , the header should have the same look (color, size, width, font) green like the item 3, and if i choose the item 2, the header should look like it (backcolor blue, forecolor white) and so on.

    If i load the form (initialization of the control) the header should have the look of button / item 1 (backcolor black, forecolor white).

    Thank you very much.
  10. BB
    BB avatar
    13 posts
    Member since:
    Mar 2007

    Posted 08 Jan 2011 Link to this post

    Please could you help me

    Thank you very much.

  11. Richard Slade
    Richard Slade avatar
    3000 posts
    Member since:
    May 2009

    Posted 08 Jan 2011 Link to this post

    Hi BB,

    I've extended the sample for you to colour the buttons as per your requirements,
    If you need anyhting else please let me know

    private void Form1_Load(object sender, EventArgs e)
    {
        RadMenuButtonItem buttonItem1 = new RadMenuButtonItem("Button 1");
        buttonItem1.Padding = new System.Windows.Forms.Padding(0);
        buttonItem1.Name = "buttonItem1";
        buttonItem1.ButtonElement.Padding = new System.Windows.Forms.Padding(4);
        buttonItem1.ButtonElement.ForeColor = Color.White;
        buttonItem1.ButtonElement.ButtonFillElement.BackColor = Color.Black;
        buttonItem1.ButtonElement.ButtonFillElement.NumberOfColors = 1;
        RadMenuButtonItem buttonItem2 = new RadMenuButtonItem("Button 2");
        buttonItem2.Padding = new System.Windows.Forms.Padding(0);
        buttonItem2.Name = "buttonItem2";
        buttonItem2.ButtonElement.Padding = new System.Windows.Forms.Padding(4);
        buttonItem2.ButtonElement.ForeColor = Color.White;
        buttonItem2.ButtonElement.ButtonFillElement.BackColor = Color.Blue;
        buttonItem2.ButtonElement.ButtonFillElement.NumberOfColors = 1;
        RadMenuButtonItem buttonItem3 = new RadMenuButtonItem("Button 3");
        buttonItem3.Padding = new System.Windows.Forms.Padding(0);
        buttonItem3.Name = "buttonItem3";
        buttonItem3.ButtonElement.Padding = new System.Windows.Forms.Padding(4);
        buttonItem3.ButtonElement.ForeColor = Color.White;
        buttonItem3.ButtonElement.ButtonFillElement.BackColor = Color.Brown;
        buttonItem3.ButtonElement.ButtonFillElement.NumberOfColors = 1;
        RadMenuButtonItem buttonItem4 = new RadMenuButtonItem("Button with very very long text");
        buttonItem4.Padding = new System.Windows.Forms.Padding(0);
        buttonItem4.Name = "buttonItem4";
        buttonItem4.ButtonElement.Padding = new System.Windows.Forms.Padding(4);
        buttonItem4.ButtonElement.ForeColor = Color.White;
        buttonItem4.ButtonElement.ButtonFillElement.BackColor = Color.Green;
        buttonItem4.ButtonElement.ButtonFillElement.NumberOfColors = 1;
        //buttonItem4.Size = radSplitButton1.Size;
        //buttonItem4.AutoSize = false;
        //buttonItem4.ButtonElement.TextElement.TextWrap = true;
        radSplitButton1.Items.Add(buttonItem1);
        radSplitButton1.Items.Add(buttonItem2);
        radSplitButton1.Items.Add(buttonItem3);
        radSplitButton1.Items.Add(buttonItem4);
        buttonItem1.Click += new EventHandler(button_Click);
        buttonItem2.Click += new EventHandler(button_Click);
        buttonItem3.Click += new EventHandler(button_Click);
        buttonItem4.Click += new EventHandler(button_Click);
        ((FillPrimitive)radSplitButton1.RootElement.Children[0].Children[1].Children[0].Children[0]).BackColor = Color.Black; // arrow fill section
        ((FillPrimitive)radSplitButton1.RootElement.Children[0].Children[1].Children[0].Children[0]).NumberOfColors = 1;
        ((FillPrimitive)radSplitButton1.RootElement.Children[0].Children[1].Children[1].Children[0]).BackColor = Color.Black; // button fill section
        ((FillPrimitive)radSplitButton1.RootElement.Children[0].Children[1].Children[1].Children[0]).NumberOfColors = 1;
        ((ActionButtonElement)radSplitButton1.RootElement.Children[0].Children[1].Children[1]).ForeColor = Color.White;
        RadDropDownMenuElement menuElement = (RadDropDownMenuElement)radSplitButton1.DropDownButtonElement.DropDownMenu.PopupElement;
        menuElement.Layout.LeftColumnMinWidth = 0;
        menuElement.MinSize = new Size(radSplitButton1.Size.Width, 0);
    }

    private void button_Click(Object sender, EventArgs e)
    {
        RadMenuButtonItem button = (RadMenuButtonItem)sender;
        switch (button.Name)
        {
            case "buttonItem2":
                ((FillPrimitive)radSplitButton1.RootElement.Children[0].Children[1].Children[0].Children[0]).BackColor = Color.Blue; // arrow fill section
                ((FillPrimitive)radSplitButton1.RootElement.Children[0].Children[1].Children[0].Children[0]).NumberOfColors = 1;
                ((FillPrimitive)radSplitButton1.RootElement.Children[0].Children[1].Children[1].Children[0]).BackColor = Color.Blue; // button fill section
                ((FillPrimitive)radSplitButton1.RootElement.Children[0].Children[1].Children[1].Children[0]).NumberOfColors = 1;
                ((ActionButtonElement)radSplitButton1.RootElement.Children[0].Children[1].Children[1]).ForeColor = Color.White;
                break;
            case "buttonItem3":
                ((FillPrimitive)radSplitButton1.RootElement.Children[0].Children[1].Children[0].Children[0]).BackColor = Color.Brown; // arrow fill section
                ((FillPrimitive)radSplitButton1.RootElement.Children[0].Children[1].Children[0].Children[0]).NumberOfColors = 1;
                ((FillPrimitive)radSplitButton1.RootElement.Children[0].Children[1].Children[1].Children[0]).BackColor = Color.Brown; // button fill section
                ((FillPrimitive)radSplitButton1.RootElement.Children[0].Children[1].Children[1].Children[0]).NumberOfColors = 1;
                ((ActionButtonElement)radSplitButton1.RootElement.Children[0].Children[1].Children[1]).ForeColor = Color.White;
                break;
            case "buttonItem4":
                ((FillPrimitive)radSplitButton1.RootElement.Children[0].Children[1].Children[0].Children[0]).BackColor = Color.Green; // arrow fill section
                ((FillPrimitive)radSplitButton1.RootElement.Children[0].Children[1].Children[0].Children[0]).NumberOfColors = 1;
                ((FillPrimitive)radSplitButton1.RootElement.Children[0].Children[1].Children[1].Children[0]).BackColor = Color.Green; // button fill section
                ((FillPrimitive)radSplitButton1.RootElement.Children[0].Children[1].Children[1].Children[0]).NumberOfColors = 1;
                ((ActionButtonElement)radSplitButton1.RootElement.Children[0].Children[1].Children[1]).ForeColor = Color.White;
                break;
            default:
                ((FillPrimitive)radSplitButton1.RootElement.Children[0].Children[1].Children[0].Children[0]).BackColor = Color.Black; // arrow fill section
                ((FillPrimitive)radSplitButton1.RootElement.Children[0].Children[1].Children[0].Children[0]).NumberOfColors = 1;
                ((FillPrimitive)radSplitButton1.RootElement.Children[0].Children[1].Children[1].Children[0]).BackColor = Color.Black; // button fill section
                ((FillPrimitive)radSplitButton1.RootElement.Children[0].Children[1].Children[1].Children[0]).NumberOfColors = 1;
                ((ActionButtonElement)radSplitButton1.RootElement.Children[0].Children[1].Children[1]).ForeColor = Color.White;
                break;
        }
    }

    Regards,
    Richard
  12. Stefan
    Admin
    Stefan avatar
    2890 posts

    Posted 10 Jan 2011 Link to this post

    Hello BB,

    Thank you for writing back.

    By default the first item in the drop down is set to be the DefaultItem for RadSplitButton. So currently you have to subscribe to each item's Click event. In these click events you should set the DefaultItem of the split button to the currently clicked RadMenuItemButton. This gives you the functionality of setting the ActionButton accordingly.

    As to the customization, subscribe to the DefaultItemChanged event and there set the ActionButton (and the ArrowButton if you want) the same visual settings as the current default item.

    Refer to the code snippet below, which demonstrates the described approach:
    public Form1()
    {
        InitializeComponent();
        
        RadMenuButtonItem buttonItem1 = new RadMenuButtonItem("Button 1");
        buttonItem1.Padding = new System.Windows.Forms.Padding(0);
        buttonItem1.ButtonElement.ForeColor = Color.White;
        buttonItem1.ButtonElement.ButtonFillElement.BackColor = Color.Black;
        buttonItem1.ButtonElement.ButtonFillElement.NumberOfColors = 1;
        buttonItem1.ButtonElement.Padding = new System.Windows.Forms.Padding(4);
        buttonItem1.Click += new EventHandler(buttonItem_Click);
     
        RadMenuButtonItem buttonItem2 = new RadMenuButtonItem("Button 2");
        buttonItem2.Padding = new System.Windows.Forms.Padding(0);
        buttonItem2.ButtonElement.Padding = new System.Windows.Forms.Padding(4);
        buttonItem2.ButtonElement.ButtonFillElement.BackColor = Color.Red;
        buttonItem2.ButtonElement.ButtonFillElement.NumberOfColors = 1;
        buttonItem2.Click += new EventHandler(buttonItem_Click);
     
        RadMenuButtonItem buttonItem3 = new RadMenuButtonItem("Button 3");
        buttonItem3.Padding = new System.Windows.Forms.Padding(0);
        buttonItem3.ButtonElement.Padding = new System.Windows.Forms.Padding(4);
        buttonItem3.ButtonElement.ButtonFillElement.BackColor = Color.Yellow;
        buttonItem3.ButtonElement.ButtonFillElement.NumberOfColors = 1;
        buttonItem3.Click+=new EventHandler(buttonItem_Click);
     
        radSplitButton1.Items.Add(buttonItem1);
        radSplitButton1.Items.Add(buttonItem2);
        radSplitButton1.Items.Add(buttonItem3);
     
        RadDropDownMenuElement menuElement = (RadDropDownMenuElement)radSplitButton1.DropDownButtonElement.DropDownMenu.PopupElement;
        menuElement.Layout.LeftColumnMinWidth = 0;
        menuElement.MinSize = new Size(radSplitButton1.Size.Width, 0);
     
        radSplitButton1.DefaultItemChanged += new EventHandler(radSplitButton1_DefaultItemChanged);
        radSplitButton1.DefaultItem = buttonItem1;
    }
     
    void buttonItem_Click(object sender, EventArgs e)
    {
        radSplitButton1.DefaultItem = (RadMenuButtonItem)sender;
    }
     
    void radSplitButton1_DefaultItemChanged(object sender, EventArgs e)
    {
        RadMenuButtonItem currentItem = radSplitButton1.DefaultItem as RadMenuButtonItem;
        radSplitButton1.DropDownButtonElement.ActionButton.ForeColor = currentItem.ButtonElement.ForeColor;
        radSplitButton1.DropDownButtonElement.ActionButton.ButtonFillElement.BackColor = currentItem.ButtonElement.ButtonFillElement.BackColor;
        radSplitButton1.DropDownButtonElement.ActionButton.ButtonFillElement.NumberOfColors = currentItem.ButtonElement.ButtonFillElement.NumberOfColors;
     
        radSplitButton1.DropDownButtonElement.ArrowButton.Fill.BackColor = currentItem.ButtonElement.ButtonFillElement.BackColor;
        radSplitButton1.DropDownButtonElement.ArrowButton.Fill.NumberOfColors = currentItem.ButtonElement.ButtonFillElement.NumberOfColors;
        radSplitButton1.DropDownButtonElement.ArrowButton.ForeColor = currentItem.ButtonElement.ForeColor;
    }

    I hope this helps. Let me know if you need further assistance.
     
    Best wishes,
    Stefan
    the Telerik team
    Q3’10 SP1 of RadControls for WinForms is available for download; also available is the Q1'11 Roadmap for Telerik Windows Forms controls.
  13. BB
    BB avatar
    13 posts
    Member since:
    Mar 2007

    Posted 11 Jan 2011 Link to this post

    Thank you very much for the help.

    There is one behaviour that i am missing. If I click on the header button, there is no opening
    from the buttons under there (no reaction). If i click the Arrow button all is fine, the buttons under there opened.

    Please could you help me. Thank you very much.

  14. Stefan
    Admin
    Stefan avatar
    2890 posts

    Posted 13 Jan 2011 Link to this post

    Hi BB,

    You can achieve this by simply subscribing to the Click event of RadSplitButton and use the methods ShowDropDown and HideDropDown. Refer to the following example:
    bool opened = false;
    void radSplitButton1_Click(object sender, EventArgs e)
    {
        if (!opened)
        {
            radSplitButton1.ShowDropDown();
            opened = true;
        }
        else
        {
            radSplitButton1.HideDropDown();
            opened = false;
        }
    }
     
    I hope this helps.

    Kind regards,
    Stefan
    the Telerik team
    Q3’10 SP1 of RadControls for WinForms is available for download; also available is the Q1'11 Roadmap for Telerik Windows Forms controls.
Back to Top
UI for WinForms is Visual Studio 2017 Ready