RadComboBox className not set in grid

[Casper]

Hi,

I'm using this project as base for an application.
Each grid item has a className in this format "row1col3". The project has implemented custom navigation with the arrow keys, that uses these names.
My problem is that when I add a RadComboBox it is not named as such. In fact its className is empty this poses problems with the custom navigation and is a huge problem in my application. My implementation of the RCB in the grid is as follows:

<telerik:GridTemplateColumn runat="server" UniqueName="time_code_id" HeaderText="Time Code" SortExpression="time_code" DataField="time_code_id">
                        <FooterTemplate>Footer Template</FooterTemplate>
                        <FooterStyle VerticalAlign="Middle" HorizontalAlign="Center"></FooterStyle>
                        <ItemTemplate>
                            <%#DataBinder.Eval(Container.DataItem,"time_code_id") %>
                        </ItemTemplate>
                        <EditItemTemplate>
                            <telerik:RadComboBox runat="server" ID="cellCombo" DataValueField="time_code_id"
                                DataTextField="description"
                                HighlightTemplatedItems="True" Height="140" Width="220" DropDownWidth="420"
                                DataSourceID="SqlDataSource5" SelectedValue='<%#Bind("time_code_id") %>' ShowDropDownOnTextboxClick="True" EnableLoadOnDemand="True" Filter="Contains" OnClientDropDownOpening="Opening">
                                <HeaderTemplate>
                                    <label>Time Code</label>
                                </HeaderTemplate>
                                <ItemTemplate>
                                    <%#DataBinder.Eval(Container,"Text") %>
                                </ItemTemplate>
                            </telerik:RadComboBox>
                        </EditItemTemplate>
                    </telerik:GridTemplateColumn>

I hope you are able to point me in the right direction

 

Regards

Casper Andersen

[Angel Petrov]

Hi Casper,

I have to say that the described behavior is expected. The code library logic is not designed to handle this case. In order to implement the desired functionality you can modify the PrepareEditorControl and SetupControl methods as demonstrated below.

C#:

private void PrepareEditorControl(GridColumn column, int i, GridDataItem item)
    {
        switch (column.ColumnType)
        {
            case "GridBoundColumn":
                {
                    TextBox textBox = (item[column.UniqueName].Controls[0]) as TextBox;
                    SetupControl(textBox, item.ItemIndex, i);
                }
                break;
            case "GridCheckBoxColumn":
                {
                    CheckBox checkBox = (item[column.UniqueName].Controls[0]) as CheckBox;
                    SetupControl(checkBox, item.ItemIndex, i);
                }
                break;
            case "GridDropDownColumn":
                {
                    GridDropDownColumn dropDownColumn = column as GridDropDownColumn;
                    switch (dropDownColumn.DropDownControlType)
                    {
                        case GridDropDownColumnControlType.DropDownList:
                            {
                                DropDownList dropDown = (item[column.UniqueName].Controls[0]) as DropDownList;
                                SetupControl(dropDown, item.ItemIndex, i);
                            }
                            break;
                        default:
                            {
                                RadComboBox comboBox = (item[column.UniqueName].Controls[0]) as RadComboBox;
                                SetupControl(comboBox, item.ItemIndex, i);
                            }
                            break;
                    }
                }
                break;
            case "GridDateTimeColumn":
                {
                    RadDatePicker picker = (item[column.UniqueName].Controls[0]) as RadDatePicker;
                    SetupControl(picker.DateInput, item.ItemIndex, i);
                    SetupControl(picker, item.ItemIndex, i);


                    RadDateInput dateInput = item[column.UniqueName].Controls[0] as RadDateInput;
                    if (dateInput != null)
                    {
                        dateInput.Skin = "";
                        dateInput.EnableEmbeddedBaseStylesheet = false;
                        dateInput.EnableEmbeddedSkins = false;
                        SetupControl(dateInput, item.ItemIndex, i);
                    }

                }
                break;
            case "GridNumericColumn":
                {
                    RadNumericTextBox numericTextBox = (item[column.UniqueName].Controls[0]) as RadNumericTextBox;

                    if (numericTextBox != null)
                    {
                        numericTextBox.SelectionOnFocus = SelectionOnFocus.None;
                        numericTextBox.IncrementSettings.InterceptArrowKeys = false;
                        numericTextBox.Width = Unit.Pixel(140);
                        numericTextBox.Skin = "";
                        SetupControl(numericTextBox, item.ItemIndex, i);
                    }
                }
                break;
            case "GridMaskedColumn":
                {
                    RadMaskedTextBox maskedTextBox = (item[column.UniqueName].Controls[0]) as RadMaskedTextBox;

                    if (maskedTextBox != null)
                    {
                        maskedTextBox.SelectionOnFocus = SelectionOnFocus.None;
                        maskedTextBox.Skin = "";
                        maskedTextBox.Width = Unit.Pixel(140);
                        SetupControl(maskedTextBox, item.ItemIndex, i);
                    }
                }
                break;
            case "GridTemplateColumn":
                {
                    RadComboBox comboEditor = item[column.UniqueName].FindControl("cellCombo") as RadComboBox;
                    if (comboEditor != null)
                    {
                        comboEditor.Skin = "";
                        comboEditor.Width = Unit.Pixel(140);
                        SetupControl(comboEditor, item.ItemIndex, i);
                    }
                }
                break;
        }
    }

    private void SetupControl(WebControl control, int itemIndex, int colIndex)
    {
        if (control == null) return;

        CheckBox checkBox = control as CheckBox;
        RadDatePicker picker = control as RadDatePicker;
        RadComboBox combo = control as RadComboBox;
        if (checkBox != null)
        {
            //Adds the click and dblclick event handlers to the HTML element
            control.Attributes.Add("ondblclick", "cellDoubleClickFunction('" + control.ClientID + "');");
            control.Attributes.Add("onclick", "cellClick('" + control.ClientID + "');");
            checkBox.InputAttributes.Add("class", "row" + itemIndex + "col" + colIndex);
            return;
        }
        else if (picker != null)
        {
            picker.DateInput.Skin = "";
            picker.Skin = "";
            picker.DateInput.EnableEmbeddedBaseStylesheet = false;
            picker.DateInput.EnableEmbeddedSkins = false;
            //We enable the PopUpOnFocus so when we focus the cell with the keyboard to be
            //able to choose the directly without clicking the cell again.
            picker.ShowPopupOnFocus = true;
            //Enable the keyboard navigation.
            picker.SharedCalendar.EnableKeyboardNavigation = true;
            //Hide the button for the PopUp, we do not need this, because we are showing the popup on focus.
            picker.DatePopupButton.Visible = false;
            //We hook this event in order to clear the selected cells and continue the navigation with the keyboard.
            picker.ClientEvents.OnPopupClosing = "PopUpClosing";
            //Adds the click and dblclick event handlers to the HTML element
            picker.Attributes.Add("ondblclick", "cellDoubleClickFunction('" + picker.ClientID + "');");
            picker.Attributes.Add("onclick", "cellClick('" + picker.ClientID + "');");
            //Assign a unique CSS class to each editor control so we could access it afterwards through JQuery.
            picker.DateInput.CssClass = "row" + itemIndex.ToString() + "col" + colIndex.ToString();
            return;
        }
        else if(combo!=null)
        {

            combo.InputCssClass = "row" + itemIndex.ToString() + "col" + colIndex.ToString();
        }
        //Adds the click and dblclick event handlers to the HTML element
        control.Attributes.Add("ondblclick", "cellDoubleClickFunction('" + control.ClientID + "');");
        control.Attributes.Add("onclick", "cellClick('" + control.ClientID + "');");
        //Assign a unique CSS class to each editor control so we could access it afterwards through JQuery.
        control.CssClass = "row" + itemIndex.ToString() + "col" + colIndex.ToString();
    }

Regards,
Angel Petrov
Telerik

[Casper]

Thank you very much for your answer :)

I will look into it hopefully today or maybe tomorrow

[Casper]

The navigation works! Thanks.
I have two observations, though. The little arrow pointing down is blank and the background seems to be gone(transparent) as well. Could you point me in the right direction to fix this?

Thanks in advance

Casper

[Angel Petrov]

Hi Casper,

The issue is most probably caused by the lack of skin. Please remove the highlighted line below and test  whether this resolves the matter.

C#:

case "GridTemplateColumn":
    {
        RadComboBox comboEditor = item[column.UniqueName].FindControl("cellCombo") as RadComboBox;
        if (comboEditor != null)
        {
            comboEditor.Skin = "";
            comboEditor.Width = Unit.Pixel(140);
            SetupControl(comboEditor, item.ItemIndex, i);
        }
    }
    break;

Regards,
Angel Petrov
Telerik

[Casper]

Didn't think of that since there are empty skins other places in the code as well, thank you it solved it.

Can I ask you a question, technically not relevant to this thread, bit still to comboboxes?

[Angel Petrov]

Hi Casper,

If the problem is not closely related to the currently discussed one I would suggest opening a separate in order to avoid confusion for other customers when they read the current thread. If however you feel that the query will help others overwhelm problems that complement the information provided so far you can share it here.

Regards,
Angel Petrov
Telerik

[Casper]

I will open another then.

Thank you very much for your answer