Extend MultiColumn ComboBox (new section with buttons)

[James]

Hi,

Can I create or extend radMultiColumnComboBox to add a new section below the bottom of the grid, which includes one or more buttons (e.g. New)? After clicking the button(s), a new modal dialog/window will popup, while the MultiColumn Combobox will be kept open (dropped-down list).

Any suggestions or instructions will be very helpful. Thanks!

Regards,
James

[Jack]

Hi James,

You can do this by using custom grid views. Please consider the sample below:

public class BottomView : LightVisualElement, IGridView
{
    RadGridViewElement element;
    GridViewInfo viewInfo;

    #region IGridView Members

    public RadGridViewElement GridViewElement { get { return element; } }

    public GridViewInfo ViewInfo { get { return viewInfo; } }

    public void Initialize(RadGridViewElement gridViewElement, GridViewInfo viewInfo)
    {
        this.element = gridViewElement;
        this.viewInfo = viewInfo;
    }

    public void UpdateView() {}

    public void Detach() {}

    #endregion

    protected override void InitializeFields()
    {
        base.InitializeFields();
        this.StretchHorizontally = true;
        this.StretchVertically = false;
        this.MaxSize = new Size(0, 25);
        this.MinSize = new Size(0, 25);
    }

    protected override void CreateChildElements()
    {
        base.CreateChildElements();

        RadButtonElement button1 = new RadButtonElement("Add");
        button1.StretchHorizontally = true;
        button1.StretchVertically = true;

        RadButtonElement button2 = new RadButtonElement("Remove");
        button2.StretchHorizontally = true;
        button2.StretchVertically = true;

        StackLayoutElement stack = new StackLayoutElement();
        stack.StretchHorizontally = true;
        stack.StretchVertically = true;
        stack.Children.Add(button1);
        stack.Children.Add(button2);
        this.Children.Add(stack);
    }
}

Use the following code to insert the view;

box.EditorControl.TableElement.SetValue(DockLayoutPanel.DockProperty, Telerik.WinControls.Layouts.Dock.Top);
box.EditorControl.TableElement.MinSize = new Size(0, 173);

BottomView view = new BottomView();
box.EditorControl.GridViewElement.Panel.Children.Insert(2, view);
view.SetValue(DockLayoutPanel.DockProperty, Telerik.WinControls.Layouts.Dock.Bottom);

The only limitation is that you should set explicitly the drop down height:

box.MultiColumnComboBoxElement.DropDownHeight = 200;

If you have further questions, I will be glad to help.

Sincerely yours,
Jack
the Telerik team

[James]

Hi Jack,

Thank you very much for your prompt and detailed code example!

Regards,
James

[John]

Hi, i'm trying to get this to work in the latest version of the controls in 2012 but i can't ever see the new button.  should this still work?

i added the class given in this answer as is.  then i put the 

box.EditorControl.TableElement.SetValue(DockLayoutPanel.DockProperty, Telerik.WinControls.Layouts.Dock.Top);

box.EditorControl.TableElement.MinSize = new Size(0, 173);

 

BottomView view = new BottomView();

box.EditorControl.GridViewElement.Panel.Children.Insert(2, view);

view.SetValue(DockLayoutPanel.DockProperty, Telerik.WinControls.Layouts.Dock.Bottom);

code after the initialize call in the constructor.  I load the drop down like normal, giving it a list of things via the datasource property and then turn off a few columns.  i never get a new button to show though.  

I'd like to add one either next to the drop down arrow, or somewhere in the grid that drops down.

thanks.

[Jack]

Hello John,

It is not possible to add a button next to the drop down arrow in RadMultiColumnComboBox. However, the described in this thread scenario is still valid. You should only remove the following two lines of code, which is no longer needed:

box.EditorControl.TableElement.SetValue(DockLayoutPanel.DockProperty, Telerik.WinControls.Layouts.Dock.Top);
box.EditorControl.TableElement.MinSize = new Size(0, 173);

I prepared a sample application that is attached here. I hope it helps.

If you need further assistance, we will be glad to help.
 
All the best,
Jack
the Telerik team

[John]

Thanks Jack, that worked.

[Amit]

How to raise add button click handler in my form

[Dess | Tech Support Engineer, Principal]

Hello Amit,

Thank you for writing. 

You can expose a public property for the "Add" button in the BottomView and subscribe to the RadButtonElement.Click event. Thus, when you can the RadButtonElement.PerformClick method, the Click event will be fired:

public partial class Form1 : Form
{
    public Form1()
    {
        InitializeComponent();
    }

    protected override void OnLoad(EventArgs e)
    {
        base.OnLoad(e);

        DataTable table = new DataTable();
        table.Columns.Add("ID", typeof(int));
        table.Columns.Add("Name", typeof(string));
        for (int i = 0; i < 10; i++)
        {
            table.Rows.Add(i, "Row " + i);
        }

        RadMultiColumnComboBox box = new RadMultiColumnComboBox();
        box.Size = new System.Drawing.Size(200, 20);
        box.Location = new Point(50, 50);
        box.DataSource = table;
        this.Controls.Add(box);

        BottomView view = new BottomView();
        box.EditorControl.GridViewElement.Panel.Children.Insert(0, view);
        view.SetValue(DockLayoutPanel.DockProperty, Telerik.WinControls.Layouts.Dock.Bottom);
        view.Button1.PerformClick();
    }
}

public class BottomView : LightVisualElement, IGridView
{
    RadGridViewElement element;
    GridViewInfo viewInfo;
    RadButtonElement button1 = new RadButtonElement("Add");
    RadButtonElement button2 = new RadButtonElement("Remove");

    #region IGridView Members

    public RadButtonElement Button1
    {
        get
        {
            return this.button1;
        }
    }

    public RadGridViewElement GridViewElement
    {
        get
        {
            return element;
        }
    }

    public GridViewInfo ViewInfo
    {
        get
        {
            return viewInfo;
        }
    }

    public void Initialize(RadGridViewElement gridViewElement, GridViewInfo viewInfo)
    {
        this.element = gridViewElement;
        this.viewInfo = viewInfo;
    }

    public void UpdateView()
    {
    }

    public void Detach()
    {
    }

    #endregion

    protected override void InitializeFields()
    {
        base.InitializeFields();
        this.StretchHorizontally = true;
        this.StretchVertically = false;
        this.MaxSize = new Size(0, 26);
        this.MinSize = new Size(0, 26);
        this.Padding = new Padding(3);
    }

    protected override void CreateChildElements()
    {
        base.CreateChildElements();

        button1.StretchHorizontally = true;
        button1.StretchVertically = true;
        button1.Click += button1_Click;

        button2.StretchHorizontally = true;
        button2.StretchVertically = true;

        StackLayoutElement stack = new StackLayoutElement();
        stack.StretchHorizontally = true;
        stack.StretchVertically = true;
        stack.Children.Add(button1);
        stack.Children.Add(button2);
        this.Children.Add(stack);
    }

    private void button1_Click(object sender, EventArgs e)
    {
        RadMessageBox.Show("Add button is clicked");
    }
}

I hope this information helps. Should you have further questions I would be glad to help.

Regards,
Dess
Telerik by Progress