How to use stretch RadComboBox in RadGridView's cell

[Andrey]

Hi Telerik's support.
I'm trying to use radComboBox inside radGridView. I made my custom Column and Cell types. As was stated in the article from your site I'm using following code:

txtInput.AutoCompleteMode = AutoCompleteMode.SuggestAppend;

            txtInput.RootElement.StretchVertically = true;

            txtInput.RootElement.StretchHorizontally = true;

            txtInput.TextChanged += TxtInputTextChanged;

            Children.Add(txtInput.RootElement);

This code works well in case if instead of ComboBox there will be RadTextBox and TextElement. The problem is RadComboBox has fixed size and doesn't stretch when the size of cell is changed.

[Emanuel Varga]

Hello Andrey,

If you want to add a RadComboBoxElement inside a custom cell you should do the following:

protected override void CreateChildElements()
{
     var txtInput = new RadComboBoxElement();
    txtInput.AutoCompleteMode = AutoCompleteMode.SuggestAppend;
    txtInput.StretchVertically = true;
    txtInput.StretchHorizontally = true;
    txtInput.ValueChanged += new EventHandler(txtInput_ValueChanged);
    Children.Add(txtInput);

    base.CreateChildElements();
}

void txtInput_ValueChanged(object sender, EventArgs e)
{
    // handle value changed here
    MessageBox.Show("Value changed");
}

More specifically the problem was that you were just using the RootElement to add it to the grid cell, Controls cannot be added directly to the cell element's controls, but if you want to add an actual control to the cell you should use the RadHostItem like it is explained in this KB Article

Hope this helps, if you have any other questions please do not hesitate to contact us again,

Best Regards,
Emanuel Varga

[Andrey]

Hi! Many thanks for reply. I did as you told but problem is not resolved. I confused: not RadComboBox, instead - RadDropDownList. 
I need to implement followign scenario. User opens form with GridView, and enters in the column ProductCode some value. While he is typing there are suggestions appeared for autocomplete (this is RadDropDownList without arrow button). Next he moves to the column ProductName and enters some value. If for this productName exist several productCodes - they all must be displayed in productColumn in the form of RadDropDownList with the arrow button (if there is one product code - no arrow button should be displayed).

I forget to say: when I'm typing into the RadComboBoxElement event ValueChanged (TextChanged) is not working.

[Emanuel Varga]

Hello Andrey,

Currently, there is no DropDownListElement for the Grid cell, so you can / should use ComboBoxElement inside a cell.

Other than that if you want to access the Arrow button you can just use

txtInput.ArrowButton.Visibility = Telerik.WinControls.ElementVisibility.Collapsed

Hope this helps, if you have any other questions please do not hesitate to contact us again,

Best Regards,
Emanuel Varga

[Andrey]

There is another issue. Now I'm using radTextBox inside GridViewCell. So I can put focus into any TextBox in the Grid, but it is not reflected on the selected row. It is the same, no matter wich textbox in which row I choose. Also events like EndCellEdit are not fired when i'm moving away from the RadTextBox in the GridViewCell.
Here is my code for initialization:

 txtInput = new RadTextBox();

            txtInput.AutoCompleteMode = AutoCompleteMode.SuggestAppend;

            txtInput.AutoCompleteSource = AutoCompleteSource.CustomSource;

            txtInput.TextBoxElement.StretchVertically = true;

            txtInput.TextBoxElement.StretchHorizontally = true;

            txtInput.TextChanged += TxtInputTextChanged;

            Children.Add(txtInput.TextBoxElement);

            base.CreateChildElements();

[Emanuel Varga]

Hello again,

Please stop using elements like that inside cells,

Please create a RadTextBoxElement and add that to the cell collection, don't create a RadTextBox control and just add part of that to your cell.

How should i put this, you are creating a control, and just using part of that control for something else, while you could just create that small part and use it, i hope you understand what I'm trying to say here.

Hope this helps, if you have any other questions please do not hesitate to contact us again,

Best Regards,
Emanuel Varga

[Andrey]

Thanks for reply.
I understand that this is bad. But I need autocomplete functionality inside GridCell. I can't find way to accompish autocomplete without whole RadTextBox. Maybe there exist other way to acoomplish autocomplete in cell?

[Emanuel Varga]

Hello again,

Ok, then if you have to add controls into the cell children collection, assuming that you have followed this article or this article on adding custom elements inside cells, you have a custom cell object, change the following lines inside that:

protected override void CreateChildElements()
{
    var textBox = new RadTextBox();
    this.Children.Add(new RadHostItem(textBox));

    base.CreateChildElements();
}

Here, you might notice that I've used RadHostItem class in order to host the control inside the cell elements children collection, this is the way you should always add a control to an element Collection,

After this, because you are adding a control, you will need a custom ArrangeOverride method which will get the size of the control inside the HostedItem, like this:

protected override SizeF ArrangeOverride(SizeF finalSize)
 {
     if (this.Children.Count == 1)
     {
         this.Children[0].Arrange(
             new RectangleF(
                 0,
                 (finalSize.Height / 2) - (((Telerik.WinControls.UI.RadTextBox)((Telerik.WinControls.RadHostItem)(this.Children[0])).HostedControl).Size.Height / 2),
                 finalSize.Width,
                 ((Telerik.WinControls.UI.RadTextBox)((Telerik.WinControls.RadHostItem)(this.Children[0])).HostedControl).Size.Height));
     }

     this.UpdateInfo();

     return finalSize;
 }

I hope this helps, please let me know if you have any other questions or problems,

Best Regards,
Emanuel Varga

[deepak]

Hi,

I am using the RadComboBox in the Form as well as in the RadGrid EditMode. These RadComboBox behaving like a textbox ,Even the values are loaded in to the RadComboBox from the Database. It accepts both the selectedValue and the keyboardInput.I want to disable the KeyboardInput for the RadComboBox.Please provide the solution for this.

Thanks
Deepak

[Jack]

Hello Deepak,

RadComboBox is an obsolete control and we do not recommend using it. Instead, you can use RadDropDownList. In both controls you can disable the editing by setting the DropDownStyle property to DropDownList. 

Should you have any further questions, do not hesitate to ask.

Best wishes, Jack
the Telerik team

[Jill-Connie Lorentsen]

I am also looking for a way to get autocomplete functionality of a TextBox column in a GridView. Is the method described by Emanuel Varga really the only way? 

I have a CustomDropDownListEditor and would like a similar CustomTextBoxEditor.

class CustomDropDownListEditor : RadDropDownListEditor
    {
        public override RadElement EditorElement
        {
            get
            {
                RadDropDownListEditorElement element = base.EditorElement as RadDropDownListEditorElement;
                element.AutoCompleteMode = AutoCompleteMode.Suggest;
                return element;
            }
        }
   }



   class CustomTextBoxEditor : RadTextBoxEditor
    {
        public override RadElement EditorElement
        {
            get
            {
                RadTextBoxEditorElement element = base.EditorElement as RadTextBoxEditorElement;
                element.AutoCompleteMode = AutoCompleteMode.Suggest;
                return element;
            }
        }
    }

The latter  element.AutoCompleteMode = AutoCompleteMode.Suggest;   fails.

Regards, Jill-Connie Lorentsen

[Jack]

Hi Jill-Connie Lorentsen,

Thank you for your question.

We do not support auto-complete functionality in RadTextBox by showing our own auto-complete drop-down.

However, you can follow two approaches that will give you the desired results:
- The first approach uses the auto-complete functionality of the standard TextBox control that we internally use in our RadTextBoxEditor. The auto-complete drop-down that you will see is not our implementation, hence it cannot be customized.
- The second approach uses our RadDropDownListEditor. We just hide the button and disable the up/down keys and the mouse wheel. As a result, you have a RadTextBoxEditor-like editor which displays an auto-complete drop-down which is built with our elements.

I am attaching a sample project which demonstrates both approaches. I hope this helps.

Should you have any further questions, do not hesitate to ask.
 
Kind regards,
Jack
the Telerik team

[Jill-Connie Lorentsen]

I went for the first approach, and it works. Thanks!