RadSplitButton

[BB]

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

[Richard Slade]

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

[BB]

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.

[Richard Slade]

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

[Stefan]

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

[BB]

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.

[Stefan]

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

[BB]

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.

[BB]

Please could you help me

Thank you very much.

[Richard Slade]

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

[Stefan]

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

[BB]

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.

[Stefan]

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