GridDropDownColumn renders transparent rectangle

[Homam]

Hi, I have a RadGrid with a GridDropDownColumn field. I overrided the them of the grid and everything is working well except the ComboBox of the GridDropDownColumn field, it's rendering transparent rectangle.

Any help!

[Princy]

Hello Homam,

In browser mode, GridDropDownColumn looks and behaves like a standard GridBoundColumn. When in edit mode, however, it displays a drop-down control for each edited cell in the column. For more information on this please go through the GridDropDownColumn part of following documentation.
Column types
If you want ComboBox in normal mode, you can use GridTemplateColumn with RadComboBox inside ItemTemplate of template column.

Hope this information helps,
Princy.

[Brian Norris]

I know this is years later, but the same thing happened to me here in January 2021. The solution is to use this:

DropDownControlType="DropDownList"

The Rad control does it's own wacky formatting, but the standard DropDownList uses the browsers formatting, which is usually solid, if not necessarily perfectly matching your UI.

[Doncho]

Hi Brian,

Thank you for sharing this solution with the community!

Still, we are not aware of such a problem with GridDropDownColumn and DropDownControlType="RadComboBox" for a while. It would be nice if you share which is the version of Telerik Controls you are using and also some more details about the issue you are facing.

Kind regards,
Doncho
Progress Telerik

[Brian Norris]

Doncho,

I will do my best, but this is a VERY old application that was upgraded a year ago in an attempt to bring it up to the more recent versions of .NET and the Telerik suite. The Telerik version is currently 2020.1.219.45, running a .NET 4.78.2 application. (I would love to upgrade it further, but have to wait for other factors before doing so.)

Here is my grid:

<telerik:RadGrid ID="theGrid" CssClass="gridAdmin hasCommandRow" runat="server" DataSourceID="edsCounterPad"
GridLines="None" AllowPaging="True" AllowSorting="true" ShowHeader="true" Width="100%"
AllowFilteringByColumn="true"
AllowAutomaticDeletes="true" AllowAutomaticInserts="true" AllowAutomaticUpdates="true">
<PagerStyle Mode="NextPrevAndNumeric" />
<MasterTableView DataSourceID="edsCounterPad" AutoGenerateColumns="False" DataKeyNames="CounterPadMoneyInCourtID" CommandItemDisplay="TopAndBottom" InsertItemPageIndexAction="ShowItemOnCurrentPage"
NoDetailRecordsText="There are no entries for this counter pad." NoMasterRecordsText="There are no entries for this counter pad.">
<CommandItemSettings ShowRefreshButton="false" ShowAddNewRecordButton="true" AddNewRecordText="Add Entry" />
<EditFormSettings>
<EditColumn ButtonType="PushButton" />
</EditFormSettings>
<Columns>
<telerik:GridBoundColumn DataField="CounterPadMoneyInCourtID" HeaderText="CounterPadMoneyInCourtID" SortExpression="CounterPadMoneyInCourtID" UniqueName="CounterPadMoneyInCourtID" Visible="false" ReadOnly="true" />
<telerik:GridBoundColumn DataField="Date" HeaderText="Date" SortExpression="Date" UniqueName="Date" DataFormatString="{0:d}" AllowFiltering="false" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" />
<telerik:GridBoundColumn DataField="Year" HeaderText="Year" SortExpression="Year" UniqueName="Year" AllowFiltering="false" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" />
<telerik:GridBoundColumn DataField="Number" HeaderText="Number" SortExpression="Number" UniqueName="Number" AllowFiltering="false" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" />
<telerik:GridBoundColumn DataField="Defendant" HeaderText="Defendant" SortExpression="Defendant" UniqueName="Defendant" />
<telerik:GridBoundColumn DataField="Plaintiff" HeaderText="Plaintiff" SortExpression="Plaintiff" UniqueName="Plaintiff" />
<telerik:GridBoundColumn DataField="ReasonForPayment" HeaderText="Reason For Payment" SortExpression="ReasonForPayment" UniqueName="ReasonForPayment" />
<telerik:GridBoundColumn DataField="AmountOfPayment" HeaderText="Amount" SortExpression="AmountOfPayment" UniqueName="AmountOfPayment" AllowFiltering="false" DataFormatString="{0:C}" />
<telerik:GridDropDownColumn DataSourceID="TenderTypes" ListTextField="Text" ListValueField="Value" DataField="TenderType" HeaderText="Tender Type" SortExpression="TenderType" UniqueName="TenderType" AllowFiltering="false" DropDownControlType="DropDownList" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" />
<telerik:GridBoundColumn DataField="ReferenceInfo" HeaderText="Reference Info" SortExpression="ReferenceInfo" UniqueName="ReferenceInfo" />
<telerik:GridBoundColumn DataField="Remarks" HeaderText="Remarks" SortExpression="Remarks" UniqueName="Remarks" />
<telerik:GridCheckBoxColumn DataField="FundsDispersed" HeaderText="Funds<br />Disp?" SortExpression="FundsDispersed" UniqueName="FundsDispersed" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" />
<telerik:GridEditCommandColumn ButtonType="PushButton" UniqueName="EditCommandColumn" />
<telerik:GridButtonColumn ButtonType="PushButton" Text="Delete" CommandName="Delete" UniqueName="DeleteCommandColumn"
ConfirmDialogType="Classic" ConfirmDialogWidth="300" ConfirmDialogHeight="200" ConfirmText="Are you sure you want to delete this counter pad entry?" ConfirmTitle="Delete?" />
</Columns>
</MasterTableView>
</telerik:RadGrid>

There is nothing related to the DropDownList column in the codebehind. I am using a custom skin, but I have confirmed that the default DropDownList CSS is in place and unaltered (except for the skin name). But I'm assuming it still may have something to do with that CSS / skin handling. However, all other formatting is working as expected across many other Telerik elements, including button, calendar, grid, listbox, menu, rotator, and tabstrip.

I have attached screen shots with (good) and without (bad) the DropDownControlType property included, as well as a small chunk of the computed CSS for the dropdownlist control background color. 

I'm sorry that I can't produce a full working version of the issue easily enough, but as of today that's not possible due to pressing commitments. I'm hoping this can give you some clues, possibly show what I may be doing wrong, etc. And if not I'd be happy to work further to help you debug the issue.

Thanks...

[Doncho]

Hi Brian,

Thank you for cooperating and sharing the details!

It seems that the RadComboBox (ddl-bad.png) is rendered without the needed skin styles. Normally, the embedded controls in RadGrid inherit its Skin and RenderMode. So in case you are using a custom skin for the RadGrid, the same will be automatically set to the RadComboBox in the DropDownColumn, and if there are no styles defined specifically for the Combo in the custom skin, the result in the screenshot is the expected one.

Setting the DropDownControlType="DropDownList", on the other hand, will result in using asp:DropDownList as an editor which is independent of the Telerik Skins.

In case you want to use a RadComboBox as an editor, but set its own skin different from the one used for RadGrid, you can use a GridTemplateColumn instead of the GridDropDownColumn.

I hope that will prove helpful!

Kind regards,
Doncho
Progress Telerik