Telerik Forums / UI for WinForms Forum / GridView /

Custom Cell Editor nested controls events

Telerik UI for WinForms
Resources Buy Try

9 posts, 1 answers

Alessio Bulleri

34 posts

Member since:
Sep 2008

Posted 24 Jan 2017 Link to this post

I'm writing a custom editor which have to contains 2 drowdown controls: the second dropdown must be filled on values loaded from DB based on value selected in first dropdown. I need to let user add new values for both dropdowns.

I tried two ways but with no success.

First way: I created a custom editor containing 2 DrowDownListEditorElements and I tried to override EndEdit() method of each object to create new items if needed, but it seems that each EndEdit was never invoked and I cannot intercept when user pass from one dropdown to other, or when exit from the editor.

Second way: I created a custom editor containing a user control containing two RadDropDownList controls and I used the Leave event of each dropDown to obtain excepted behaviour, but all I obtained is that EndEdit() of editor was first called before other event of child/nested controls.(for example if user press TAB when focused on second dropdown, editor EndEdit is fired before the drowdown Leave event handler, so new values aren't created yet and Editor value has not been set.

What's the correct way to manage events in complex grid cell custom editors?

Thnaks.
Dimitar
Admin

2949 posts
Posted 25 Jan 2017 Link to this post

Hi Alessio,

In this case, you need to use the PropertyCahnged event of the drop down lists and add a new item when the ContainsFocus property is changed. I have attached a small sample that shows how you can create the desired editor.

I hope this will be useful. Let me know if you have additional questions.

Regards,
Dimitar
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.

TelerikWinFormsApp15.zip
Alessio Bulleri

34 posts

Member since:
Sep 2008

Posted 26 Jan 2017 in reply to Dimitar Link to this post

Hi Dimitar.

Thanks for your precious answer and example. It seems to works fine, but I've a further question.

I'd like this behaviour:

- when the CellEditor enters in EditMode, the first DropDown should be focused, then when the user press TAB key, the second DropDown get focused, and then after a further TAB key press, the Cell exit from EditMode.

Thanks again,

Alessio Bulleri
Dimitar
Admin

2949 posts

Posted 26 Jan 2017 Link to this post

Hello Alessio,

In order to process the Tab key, you need to create a custom row behavior. In this case, you can just focus the second drop down list:

public class CustomGridDataRowBehavior : GridDataRowBehavior

{

    protected override bool ProcessTabKey(KeyEventArgs keys)

    {

        if (this.GridControl.IsInEditMode)

        {

            var editor = this.GridControl.ActiveEditor as CustomDDLEditor;

            if (editor != null)

            {

                var element = editor.EditorElement as DoubleEditor;

                if (element.Ddl1.ContainsFocus)

                {

                    element.Ddl2.Focus();

                    return true;

                }

            }

        }

        return base.ProcessTabKey(keys);

    }

}

Here is how you can replace the default behavior:

BaseGridBehavior gridBehavior = radGridView1.GridBehavior as BaseGridBehavior;

gridBehavior.UnregisterBehavior(typeof(GridViewDataRowInfo));

gridBehavior.RegisterBehavior(typeof(GridViewDataRowInfo), new CustomGridDataRowBehavior());

Please let me know if there is something else I can help you with.

Regards,
Dimitar
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Alessio Bulleri

34 posts

Member since:
Sep 2008

Posted 26 Jan 2017 in reply to Dimitar Link to this post

Hi Dimitar,

Thanks a lot, it works like a charm !

I just have another small question, is it possible to put the two drop down in a split container so the use can resize them as needed ?

I've tried to look at SplitContainer/SplitPanel elements but I've not been able to figure out how to use them. Can you please point me in the right direction ?

Thanks a lot.
Dimitar
Admin

2949 posts
Posted 27 Jan 2017 Link to this post

Hi Alessio,

For this, you will need to create a custom control then you can add it to the element using RadHostItem. I have updated the project so it now shows this.

I hope this will be useful.

Regards,
Dimitar
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.

TelerikWinFormsApp15.zip
Alessio Bulleri

34 posts

Member since:
Sep 2008

Posted 30 Jan 2017 Link to this post

Hi Dimitar,

thanks a lot for your answer and for the example code, unfortunately it's too late for me to change approach (my delivery date is getting near) and if I can't add a split container from within my CreateChildElement method I prefere to drop this feature.

Regards

Alessio
Answer
Dimitar
Admin

2949 posts

Posted 30 Jan 2017 Link to this post

Hello Alessio,

You can create the split container in code as well:

RadDropDownList radDropDownList1;

RadDropDownList radDropDownList2;

protected override void CreateChildElements()

{

    base.CreateChildElements();

    var radSplitContainer1 = new Telerik.WinControls.UI.RadSplitContainer();

    var splitPanel1 = new Telerik.WinControls.UI.SplitPanel();

    var splitPanel2 = new Telerik.WinControls.UI.SplitPanel();

     radDropDownList1 = new Telerik.WinControls.UI.RadDropDownList();

     radDropDownList2 = new Telerik.WinControls.UI.RadDropDownList();

    radSplitContainer1.Controls.Add(splitPanel1);

    radSplitContainer1.Controls.Add(splitPanel2);

    radSplitContainer1.Dock = System.Windows.Forms.DockStyle.Fill;

    radSplitContainer1.Location = new System.Drawing.Point(0, 0);

    radDropDownList1.Dock = DockStyle.Fill;

    radDropDownList2.Dock = DockStyle.Fill;

    splitPanel1.Controls.Add(radDropDownList1);

    splitPanel2.Controls.Add(radDropDownList2);

    var host = new RadHostItem(radSplitContainer1);

    host.MinSize = new Size(100, 20);

    radDropDownList1.PropertyChanged += Ddl1_PropertyChanged;

    radDropDownList1.DataSource = GetData();

    radDropDownList1.DisplayMember = "Text";

    radDropDownList1.ValueMember = "Text";

    radDropDownList2.PropertyChanged += Ddl1_PropertyChanged;

    radDropDownList2.DataSource = GetData();

    radDropDownList2.DisplayMember = "Text";

    radDropDownList2.ValueMember = "Text";

    this.Children.Add(host);

    this.Orientation = Orientation.Horizontal;

    this.StretchHorizontally = true;

    this.Value = new string[2];

}

Please let me know if there is something else I can help you with.

Regards,
Dimitar
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Alessio Bulleri

34 posts

Member since:
Sep 2008

Posted 30 Jan 2017 in reply to Dimitar Link to this post

Thank you !

Custom Cell Editor nested controls events

Alessio Bulleri

Dimitar

Alessio Bulleri

Dimitar

Alessio Bulleri

Dimitar

Alessio Bulleri

Dimitar

Alessio Bulleri