Adding an edit button within a dropdown cell

[Svein Thomas]

Hi, 

Is it possible to add an "browse/edit (...)" button within a dropdown cell. 
I want to be able to edit the selected dropdown value in another form.

If you know how, please provide me with an example :)

thanks in advance.

//ST

[Richard Slade]

Hello,

To do this you would need to write a custom cell that contains more than one control. There is a good KB Article here that gives a demo of writing a custom cell with more than one control.

Hope that this helps
Richard

[Stefan]

Hi Svein Thomas,

Please let us know if the provided suggestion works for you or whether you need further information.
 
Greetings,
Stefan
the Telerik team

[Svein Thomas]

Hi,

The example given is ok, but i need to be able to set the datasource, display and value member of an combobox inside the cell.
And I should be able to open up another form when clicked the button in the cell.

This is the classes that i have created:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using Telerik.WinControls.UI;
using System.Drawing;
using System.Windows.Forms;

namespace Jobmatch.EntityFramework.Presentation.Controls
{
    public class ComboBoxEditButtonCellElement : GridDataCellElement
    {
        RadComboBoxElement comboboxElement = null;
        RadButtonElement buttonElement = null;

        public ComboBoxEditButtonCellElement(GridViewColumn column, GridRowElement row)
            : base(column, row)
        {
        }

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

            comboboxElement = new RadComboBoxElement();
            comboboxElement.Margin = new Padding(0, 2, 0, 0);
            comboboxElement.MinSize = new Size(50, 20);

            buttonElement = new RadButtonElement();
            buttonElement.Margin = new Padding(0, 2, 0, 0);
            buttonElement.MinSize = new Size(50, 20);
            buttonElement.Text = "...";

            this.Children.Add(comboboxElement);
            this.Children.Add(buttonElement);

            comboboxElement.MouseDown += new MouseEventHandler(comboboxElement_MouseDown);
            buttonElement.MouseDown += new MouseEventHandler(buttonElement_MouseDown);

        }

        void buttonElement_MouseDown(object sender, System.Windows.Forms.MouseEventArgs e)
        {
            throw new NotImplementedException();
        }

        void comboboxElement_MouseDown(object sender, System.Windows.Forms.MouseEventArgs e)
        {
            throw new NotImplementedException();
        }
        public override void Initialize(GridViewColumn column, GridRowElement row)
        {
            base.Initialize(column, row);

        }
        protected override SizeF ArrangeOverride(SizeF finalSize)
        {
            if (this.Children.Count == 2)
            {
                this.Children[0].Arrange(new RectangleF(0, 0, 100, 20));
                this.Children[1].Arrange(new RectangleF(105, 0, 30, 20));
            }

            return finalSize;
        }
        protected override void DisposeManagedResources()
        {
            comboboxElement.MouseDown -= new MouseEventHandler(comboboxElement_MouseDown);
            buttonElement.MouseDown -= new MouseEventHandler(buttonElement_MouseDown);
            base.DisposeManagedResources();
        }
    }
}

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using Telerik.WinControls.UI;

namespace Jobmatch.EntityFramework.Presentation.Controls
{
    public class ComboBoxEditButtonColumn : GridViewDataColumn
    {
        public ComboBoxEditButtonColumn()
            : base()
        {
        }

        public ComboBoxEditButtonColumn(string fieldName)
            : base(fieldName)
        {
        }

        public override Type GetCellType(GridViewRowInfo row)
        {
            if (row is GridViewDataRowInfo)
            {
                return typeof(ComboBoxEditButtonCellElement);
            }
            return base.GetCellType(row);
        }
    }
}

[Martin Vasilev]

Hi Svein Thomas,

Thank you for writing.

Please take a look at the following KB article, which describes a scenario very similar to yours: Adding custom elements inside a cell when it is in edit mode.

It also contains working sample projects which you can use. Let me know if you have any additional questions. 

Best wishes,
Martin Vasilev
the Telerik team

[Lasse]

Hi,

I'm testing this with this version of the RadGridView : 2010.3.10.1109
But i cannot get the event to fire when pressing the button.

Could you please guide me in the right direction?

Regards
Svein Thomas

[Martin Vasilev]

Hi Svein Thomas,

Thank you for writing.

I can confirm that there is an issue with the click event of the added button element, while using old versions of RadControls for Winforms. The good news is we have already addressed this issue and it does not occur in latest Q2 2011 SP1 (2011.2.11.831) version. I would highly recommend downloading it and giving it a try. It contains a lot of fixes and improvements. Let me know if you have questions during the process of updating to the latest release. We will be glad to assist you.

Best wishes,
Martin Vasilev
the Telerik team

[Lasse]

Hi again,

Got an delicate problem with this one that i'm sure you are able to solve, but my knowledge about this isn't good enough.
The reason i have this "edit" button within the same column that the dropdown is that i need from time to time to edit the selected value in the dropdown box. 
The value in the dropdown box is just a "text"-foreign key to some other settings. So when i choose one item in the dropdown box, i really choose to link the row to a set of rows in another table. 
The selection in the dropdown box ( the item shown in the dropdownbox ) should be unique for each row. There are 4 items that we will always show, but there may be items that should only be available for the specified row. 

The first problem is how to actually fill the custom dropdownbox based on the selected row and have the correct values in it, without making any trouble for the other rows that shows values not represented in the current dropdownbox.
The other problem is to actually set the value back to the cell when it selected..  (this two problems is connected :) 

Well, i hope you understand what i'm trying to describe here.. 

Regards
Svein Thomas

[Jack]

Hello Svein Thomas,

If I understand correctly, you want to change combobox values depending on the row which contains the custom cell. If this is the case you can handle the SetContentCore method and check the RowInfo property. It contains the row which owns the cell. Here is a sample:

protected override void SetContentCore(object value)
{
    suspendValueChanging = true;
    if (comboboxElement.BindingContext == null)
    {
        comboboxElement.BindingContext = new BindingContext();
    }
    if ((bool)RowInfo.Cells["Check"].Value)
    {
        if (ds1 == null)
        {
            ds1 = new DataTable();
            ds1.Columns.Add("ID", typeof(int));
            ds1.Columns.Add("Name", typeof(string));
            ds1.Rows.Add(0, "zero");
            ds1.Rows.Add(1, "one");
            ds1.Rows.Add(2, "two");
            ds1.Rows.Add(3, "three");
        }
        comboboxElement.DataSource = ds1;
    }
    else
    {
        if (ds2 == null)
        {
            ds2 = new DataTable();
            ds2.Columns.Add("ID", typeof(int));
            ds2.Columns.Add("Name", typeof(string));
            ds2.Rows.Add(0, "first");
            ds2.Rows.Add(1, "second");
            ds2.Rows.Add(2, "third");
            ds2.Rows.Add(3, "last");
        }
        comboboxElement.DataSource = ds2;
    }
    comboboxElement.SelectedValue = value;
    suspendValueChanging = false;
}

You can handle the SelectedIndexChanged event to save the value, consider the code below:

void comboboxElement_SelectedIndexChanged(object sender, Telerik.WinControls.UI.Data.PositionChangedEventArgs e)
{
    if (suspendValueChanging)
    {
        return;
    }
    this.Value = comboboxElement.SelectedValue;
}

And here is the full code of ComboBoxEditButtonCellElement:

public class ComboBoxEditButtonCellElement : GridDataCellElement
{
    RadDropDownListElement comboboxElement = null;
    RadButtonElement buttonElement = null;
    DataTable ds1;
    DataTable ds2;

    public ComboBoxEditButtonCellElement(GridViewColumn column, GridRowElement row)
        : base(column, row)
    {
    }

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

        StackLayoutElement stack = new StackLayoutElement();
        stack.Orientation = Orientation.Horizontal;
        stack.StretchHorizontally = true;
        stack.StretchVertically = true;
        stack.FitInAvailableSize = true;
        this.Children.Add(stack);

        comboboxElement = new RadDropDownListElement();
        comboboxElement.Margin = new Padding(0, 2, 0, 0);
        comboboxElement.StretchHorizontally = true;
        comboboxElement.DisplayMember = "Name";
        comboboxElement.ValueMember = "ID";
        stack.Children.Add(comboboxElement);

        buttonElement = new RadButtonElement();
        buttonElement.Margin = new Padding(0, 2, 0, 0);
        buttonElement.Text = "...";
        buttonElement.StretchHorizontally = false;
        stack.Children.Add(buttonElement);

        comboboxElement.MouseDown += new MouseEventHandler(comboboxElement_MouseDown);
        comboboxElement.SelectedIndexChanged += new Telerik.WinControls.UI.Data.PositionChangedEventHandler(comboboxElement_SelectedIndexChanged);
        buttonElement.MouseDown += new MouseEventHandler(buttonElement_MouseDown);
    }

    bool suspendValueChanging = false;

    void comboboxElement_SelectedIndexChanged(object sender, Telerik.WinControls.UI.Data.PositionChangedEventArgs e)
    {
        if (suspendValueChanging)
        {
            return;
        }
        this.Value = comboboxElement.SelectedValue;
    }

    protected override void SetContentCore(object value)
    {
        suspendValueChanging = true;
        if (comboboxElement.BindingContext == null)
        {
            comboboxElement.BindingContext = new BindingContext();
        }
        if ((bool)RowInfo.Cells["Check"].Value)
        {
            if (ds1 == null)
            {
                ds1 = new DataTable();
                ds1.Columns.Add("ID", typeof(int));
                ds1.Columns.Add("Name", typeof(string));
                ds1.Rows.Add(0, "zero");
                ds1.Rows.Add(1, "one");
                ds1.Rows.Add(2, "two");
                ds1.Rows.Add(3, "three");
            }
            comboboxElement.DataSource = ds1;
        }
        else
        {
            if (ds2 == null)
            {
                ds2 = new DataTable();
                ds2.Columns.Add("ID", typeof(int));
                ds2.Columns.Add("Name", typeof(string));
                ds2.Rows.Add(0, "first");
                ds2.Rows.Add(1, "second");
                ds2.Rows.Add(2, "third");
                ds2.Rows.Add(3, "last");
            }
            comboboxElement.DataSource = ds2;
        }
        comboboxElement.SelectedValue = value;
        suspendValueChanging = false;
    }




    void buttonElement_MouseDown(object sender, System.Windows.Forms.MouseEventArgs e)
    {
    }

    void comboboxElement_MouseDown(object sender, System.Windows.Forms.MouseEventArgs e)
    {
    }

    protected override void DisposeManagedResources()
    {
        comboboxElement.MouseDown -= new MouseEventHandler(comboboxElement_MouseDown);
        buttonElement.MouseDown -= new MouseEventHandler(buttonElement_MouseDown);
        base.DisposeManagedResources();
    }
}

Please note that I replaced RadComboBoxElement with RadDropDownList. RadComboBox is an obsolete control and we plan to remove it from our suite in our upcoming release.

I hope this helps. If you need further assistance, do not hesitate to ask.
 
All the best,
Jack
the Telerik team