VirtualGridDropDownListEditor size, sizing, width

[bla]

Hi guys,

 

I would like to use a VirtualGridDropDownListEditor in a table. That it cannot be set anyhow before the use starts editing a ceel is sad, but discussed in a different forum already.

What bothers me still is the size of the DropDown. I read everything - and that's almost nothing - online about the control. Weirdly it is not the default behaviour and not mentioned anywhere how to make it wide enough for all its content. Can I use another editor? Does that function honestly not exist?

By the way the MinSize setting even destroys the VirtualGridDropDownListEditor, so that you always select what is lying under them when clicking the list items.

Thank you in advance!

[bla]

Accidentially I found a way for this small part problem. Even thoug there is no connection imaginable or described, it helps to set the VirtualGridDropDownListEditor.DropDownStyle = RadDropDownStyle.DropDownList.

But still it doesn't work well in any way:

1. I need 3 clicks to open the editor (1x to mark the cell, 1x to go to edit mode, 1x to open)

2. The editor overlapping other cell after editing. And after editing it is still editing (in edit mode)

3. The arrow, that is actually meant to open the DropDown, cannot be clicked. Only the cell under it is clicked instead.

 

So is there a way to use your grid with editor comfortably or do I need to program workaround for all these and many other problems/obstacles so far?

[Nadya | Tech Support Engineer]

Hello,

RadVirtualGrid allows users to edit the cells values. Usually, this process starts by typing in the cell or by pressing F2. By default, the editor type is determined according to the data value type. However, you can change the default editor in the EditorReqired event. When in edit mode, the user can change the cell value and press Enter to commit the change or Esc to revert to the original value. 

Following the provided information it seems that you would like to use the VirtualGridDropDownListEditor and you would like to make it wide enough to fit all its content. You can achieve this by setting the DropDownWidth of the editor's element. This property sets the drop-down width. You can measure the width you will need according to the data you have and then assign it to the property. Here is how to do this inside the CellEditorInitialized event:

 private void RadVirtualGrid1_CellEditorInitialized(object sender, VirtualGridCellEditorInitializedEventArgs e)
 {
     var dropDownListEditor = e.ActiveEditor as VirtualGridDropDownListEditor;
     if (dropDownListEditor != null)
     {
         RadDropDownListEditorElement element = dropDownListEditor.EditorElement as RadDropDownListEditorElement;
         

         foreach (RadListDataItem item in element.Items)
         {
             string text = item.Text;
             Size size = TextRenderer.MeasureText(text, element.Font);

             if (element.DropDownWidth < size.Width)
             {
                 element.DropDownWidth = size.Width;
             }
         }
     }
 }

You can see that the drop-down in as wide as needed in order to show its full content:

Note that there is DropDownHeight property as well in case you would like to adjust the height as well. 

According to the MinSize property, I am not able to observe problems with the VirtualGridDropDownListEditor and clicking the list items. Could you please provide more information about how to reproduce this?

When you make the VirtualGridDropDownListEditor.DropDownStyle to DropDownList it means that the text area can not be edited. By default, when the cell is clicked the arrow button is shown in order to show the dropdown. When the drop-down appears it is expected to overlap other cells in order to show its content. The arrow button is correctly shown on my end. I attached a sample project for your reference and a gif file. Am I missing something?

It would be greatly appreciated if you can provide more information about what is your exact requirement that you are trying to achieve when using the VirtualGridDropDownListEditor. Thus, we would be able to suggest a suitable solution for your case.

Looking forward to your reply.

Regards,
Nadya
Progress Telerik

[bla]

Hello Nadya,

thank you for all the answers.

For the clicking problem I attached a picture. There you can see that the RadDropDwnList with a set .Text overlaps other cells. That is fine so far. But when I click the arrow or any part of the box that lies over another cell it is closed and the cell selected. But the click should refer to the RadDropDownList as it is in foreground.

Thank you in advance!

[Nadya | Tech Support Engineer]

Hello,

According to the provided picture, it seems that the RadDropDownListEditorElement.Text length exceeds the width of the columns because the EditableElement is auto-sized by default. In this case, if you want to keep the width of the columns I can suggest to show auto ellipsis. Thus, the ellipsis character (...) will appear at the right edge of the cell, denoting that the text extends beyond the specified width of the column. You can enable it as follows:

private void RadVirtualGrid1_CellEditorInitialized(object sender, VirtualGridCellEditorInitializedEventArgs e)
{
    var dropDownListEditor = e.ActiveEditor as VirtualGridDropDownListEditor;
    if (dropDownListEditor != null)
    {
        RadDropDownListEditorElement element = dropDownListEditor.EditorElement as RadDropDownListEditorElement;
        element.DropDownStyle = RadDropDownStyle.DropDownList;
        element.Text = "Loooooooooooong text";
        element.AutoSize = false;
        element.EditableElement.AutoEllipsis = true;
    }
}

Another approach is to adjust the column's width according to the length of the text:

private void RadVirtualGrid1_CellEditorInitialized(object sender, VirtualGridCellEditorInitializedEventArgs e)
{
    var dropDownListEditor = e.ActiveEditor as VirtualGridDropDownListEditor;
    if (dropDownListEditor != null)
    {
        RadDropDownListEditorElement element = dropDownListEditor.EditorElement as RadDropDownListEditorElement;
        element.DropDownStyle = RadDropDownStyle.DropDownList;
        element.Text = "Loooooooooooong text";

        Size elementSize = TextRenderer.MeasureText(element.Text, element.Font);
        this.radVirtualGrid1.MasterViewInfo.SetColumnWidth(1, elementSize.Width+15);
     }
}

I hope this helps. Let me know if I can assist you further.

Regards,
Nadya
Progress Telerik

[bla]

Hello,

and thank you for your answers. I only want to make sure that the perfect the solution is really not doable, as you didn't mention it explicitely:

- The cell width shall stay the same.

- The whole text shall be displayed (so that the RadDropDownList exceeds the cell)

- And still the RadDropDownList shall be clicked when I click onto it, instead of the cell behind it.

Is it possible or will always the cell behind the visible RadDropDownList be clicked?

[bla]

Hello,

and there are 2 more errors!

1. With those values the "selected" text is removed at the first click and the editor doesn't open at all anymore.

    element.DropDownStyle = RadDropDownStyle.DropDownList
    element.AutoSize = False
    element.EditableElement.AutoEllipsis = True
2. Without "element.AutoSize = False" I cannot read the items in the list anymore. So what you described is not just not the optimum, but no solution at all anymore.

[bla]

tests show that "element.AutoSize = False" destroys the whole editor!

[Nadya | Tech Support Engineer]

Hello,

The cell's width in RadVirtualGrid depends on the column's width. The cell should be as wide as its column is. On the other hand, the editor that is displayed within the cell should be as wide as the cell. In this case, the VirtualGridDropDownListEditor is overlapping another cell which is wrong. After discussing it with the team, I confirm this is a bug with VirtualGridDropDownListEditor when there is a long text. The VirtualGridDropDownListEditor should not exceed the cell's bounds. This is why I have logged it in our feedback portal by making a public thread on your behalf. You can track its progress, subscribe for status changes, and add your comments on the following link - feedback item. I have also updated your Telerik points. 

Currently, I can suggest the approach to make the column wider so that the editor can display its whole text without overlapping other cells. You can store the default column's width in a separate variable, enlarge the width when you click on the cell in order to show its whole content, then revert the column back to its default width. I prepared a sample project so I can demonstrate this approach. In this case, you will have the whole text displayed and be able to click on the arrow if you want to open the dropdown.

In addition, I would like to add that you can enter the cell in edit mode immediately when you first click on it. This can be done by using the BeginEditMode property to BeginEditProgrammatically. Thus, on the CellClick event, you can force the cell to enter edit mode by calling the BeginEdit method. In the CellEditorInitialized event, where the editor is already created you can adjust the width of the pop-up as well and call the ShowPopup method.

I attached my sample to this thread for your reference. Could you give it a try and see how it works for you.

I hope this helps. In case you have further questions do not hesitate to contact me.

Regards,
Nadya
Progress Telerik