This is a migrated thread and some comments may be shown as answers.

RadSplitButton

12 Answers 139 Views
This is a migrated thread and some comments may be shown as answers.
BB
Top achievements
Rank 1
BB asked on 24 Dec 2010, 12:19 PM

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

12 Answers, 1 is accepted

Sort by
0
Richard Slade
Top achievements
Rank 2
answered on 24 Dec 2010, 08:42 PM
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
0
BB
Top achievements
Rank 1
answered on 24 Dec 2010, 10:56 PM

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.

0
Richard Slade
Top achievements
Rank 2
answered on 28 Dec 2010, 12:42 PM
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
0
Stefan
Telerik team
answered on 29 Dec 2010, 10:18 AM
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.
0
BB
Top achievements
Rank 1
answered on 29 Dec 2010, 08:31 PM
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.
0
Stefan
Telerik team
answered on 03 Jan 2011, 04:51 PM
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.
0
BB
Top achievements
Rank 1
answered on 05 Jan 2011, 06:20 PM
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.
0
BB
Top achievements
Rank 1
answered on 08 Jan 2011, 10:29 AM

Please could you help me

Thank you very much.

0
Richard Slade
Top achievements
Rank 2
answered on 08 Jan 2011, 12:18 PM
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
0
Stefan
Telerik team
answered on 10 Jan 2011, 10:07 AM
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.
0
BB
Top achievements
Rank 1
answered on 11 Jan 2011, 10:08 AM

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.

0
Stefan
Telerik team
answered on 13 Jan 2011, 02:17 PM
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.
Asked by
BB
Top achievements
Rank 1
Answers by
Richard Slade
Top achievements
Rank 2
BB
Top achievements
Rank 1
Stefan
Telerik team
Share this question
or