CODEWITHSUNDEEP
c#asp.nettelerikradgrid
Pratik
Pratik

Reputation: 267

Telerik RadGrid Filtertemplate as RadCombobox UI is not proper

I am using Telerik RadGrid control in which I added FilterTemplate as RadComboBox for providing filter to particular column but that RadComboBox is not looking proper.

PFA for screenshot of RadComboBox. enter image description here

Code:

<telerik:RadGrid ID="RadGridApplications" Skin="Metro" SkinID="Metro" AutoGenerateColumns="false"
OnNeedDataSource="RadGridApplications_NeedDataSource" AllowPaging="true" PageSize="10" 
ShowStatusBar="true" AllowFilteringByColumn="true" runat="server">
    <MasterTableView DataKeyNames="ProductID">
        <Columns>
            <telerik:GridBoundColumn DataField="ProductID" HeaderText="Application ID" HeaderStyle-Width="10%" AllowFiltering="false">
            </telerik:GridBoundColumn>

            <telerik:GridBoundColumn DataField="Name" HeaderText="Application Name" HeaderStyle-Width="65%" AllowFiltering="false">
            </telerik:GridBoundColumn>

            <telerik:GridBoundColumn DataField="Status" HeaderText="Status" HeaderStyle-Width="15%" FilterControlAltText="Status" ReadOnly="true">
                <FilterTemplate>
                    <telerik:RadComboBox ID="Status_filter" runat="server" Height="200px" Width="100%" 
                    AppendDataBoundItems="true" OnClientSelectedIndexChanged="selectedindexchanged" 
                    SelectedValue='<%# ((GridItem)Container).OwnerTableView.GetColumn("Status").CurrentFilterValue %>'>
                        <Items>
                            <telerik:RadComboBoxItem Text="Active" Value="Active"/>
                            <telerik:RadComboBoxItem Text="In-Active" Value="In-Active" ViewStateMode="enabled" />
                        </Items>
                    </telerik:RadComboBox>

                    <telerik:RadScriptBlock ID="radscriptblock1" runat="server">
                        <script type="text/javascript">
                            function selectedindexchanged(sender, args) {
                                var tableview = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
                            tableview.filter("status", args.get_item().get_value(), "equalto");
                            }  
                        </script>
                    </telerik:RadScriptBlock>

                </FilterTemplate>
            </telerik:GridBoundColumn>

            <telerik:GridHyperLinkColumn Text="Edit" ItemStyle-CssClass="editlink" DataNavigateUrlFields="ProductID" HeaderStyle-Width="10%"
            DataNavigateUrlFormatString="AddEditApplication.aspx?Mode=Edit&ID={0}" AllowFiltering="false">
            </telerik:GridHyperLinkColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

Upvotes: 0

Views: 1180

Answers (1)

rdmptn
rdmptn

Reputation: 5603

It looks like some CSS overrides the RadComboBox default settings. Examine the rendered HTML in the browser dev toolbar and find the rules that break it so you can override them if needed.

OR, remove all your custom CSS from the page and if the problem is gone - start adding it piece by piece.

This works fine for me with your code (I only added a dummy datasource, removed the additional columns and rand the page):enter image description here

and

enter image description here

Upvotes: 1

Related Questions