This is a migrated thread and some comments may be shown as answers.

Show/Hide Filter in RadGrid

13 Answers 2290 Views

Grid

This is a migrated thread and some comments may be shown as answers.

13 Answers, 1 is accepted

answered on 09 Mar 2009, 06:28 PM

So basically I see the menu as text links at top left of the browser without the styled menu.

In firebug the wrapping Div with the Ul with their css look like the following:

answered on 10 Mar 2009, 02:33 PM

yes I am using the rad ajax manager.
I tried setting : EnableAjaxSkinRendering="true" . It was already set that way by default anyway.But the CSS doesn't get rendered properly.

To Isolate:
I created a new project that only has the radgrid and ajax manager using Q# as a reference and it works fine. Which makes me think that there is a something in my overall project that stops the proper rendering of that specific element's css.

For now I set the AllowFilteringByColumn="true", which makes the filterMenu work the way it is supposed to but I really wanted to hide the filter columns when it is not a postback.

Sorry but I can't post a live URL.

But here is the same exact simplified Code i have, this works fine by itself only breaks when integrated with my project.

ASPX page.......

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="RadGridFiltering._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Rad grid With Filter</title>
    <style>
        .CommandItem
        {
            width: 100%;
        }
        .CommandItemLeft
        {
            float: left;
            text-align: left;
            padding: 0px 0.5em 0px 0px;
        }
        .CommandItemRight
        {
            float: right;
            text-align: right;
            padding: 0px 0px 0px 0.5em;
        }
        .Header_
        {
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    </telerik:RadScriptManager>
    <div id="headerTitle" runat="server" align="center">
        <asp:Label ID="lblHeader" class="Header_" runat="server" Text="Rad grid With Filter"
            align="center" Style="color: #2f7eb5" Font-Bold="True" Font-Size="X-Large"></asp:Label>
    </div>
    <telerik:RadGrid ID="RadGrid_" runat="server" AllowSorting="True" AllowPaging="True"
        OnNeedDataSource="Table_OnNeedDataSource" Skin="Web20" EnableLinqExpressions="False"
        Width="100%" AutoGenerateColumns="False">
        <HeaderContextMenu Skin="Web20" EnableTheming="True">
            <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
        </HeaderContextMenu>
        <PagerStyle Mode="NextPrevNumericAndAdvanced" Font-Bold="False" Font-Italic="False"
            Font-Overline="False" Font-Strikeout="False" Font-Underline="False" Wrap="True"
            AlwaysVisible="true" />
        <MasterTableView CommandItemDisplay="Top" AllowMultiColumnSorting="true" Width="100%">
            <NoRecordsTemplate>
                <asp:Label ID="NoRecords" runat="server" Text="There are no records to display at this time." />
            </NoRecordsTemplate>
            <CommandItemTemplate>
                <div class="CommandItem">
                    <div class="CommandItemRight">
                        <asp:LinkButton CssClass="CommandItemRefreshButton" ID="ToggleFiltering" runat="server"
                            CommandName="Toggle" OnClick="Toggle_Clicked">Toggle Filtering</asp:LinkButton>
                    </div>
                </div>
            </CommandItemTemplate>
            <RowIndicatorColumn>
                <HeaderStyle Width="20px"></HeaderStyle>
            </RowIndicatorColumn>
            <ExpandCollapseColumn>
                <HeaderStyle Width="20px"></HeaderStyle>
            </ExpandCollapseColumn>
            <%--<Columns>
                <telerik:GridBoundColumn CurrentFilterFunction="Contains" AutoPostBackOnFilter="true"
                    SortExpression="ClientNetworkName" HeaderText="ClientNetworkName" DataField="ClientNetworkName"
                    UniqueName="ClientNetworkName" />
                <telerik:GridBoundColumn CurrentFilterFunction="Contains" AutoPostBackOnFilter="true"
                    SortExpression="ClientEntryShare" HeaderText="ClientEntryShare" DataField="ClientEntryShare"
                    UniqueName="ClientEntryShare" />
                <telerik:GridBoundColumn CurrentFilterFunction="Contains" AutoPostBackOnFilter="true"
                    SortExpression="BrowsingRelativePath" HeaderText="BrowsingRelativePath" DataField="BrowsingRelativePath"
                    UniqueName="BrowsingRelativePath" />
                <telerik:GridBoundColumn CurrentFilterFunction="Contains" AutoPostBackOnFilter="true"
                    SortExpression="TargetNetworkName" HeaderText="TargetNetworkName" DataField="TargetNetworkName"
                    UniqueName="TargetNetworkName" />
                <telerik:GridBoundColumn CurrentFilterFunction="Contains" AutoPostBackOnFilter="true"
                    SortExpression="TargetEntryShare" HeaderText="TargetEntryShare" DataField="TargetEntryShare"
                    UniqueName="TargetEntryShare" />
                <telerik:GridBoundColumn CurrentFilterFunction="Contains" AutoPostBackOnFilter="true"
                    SortExpression="RedirectionRelativePath" HeaderText="RedirectionRelativePath"
                    DataField="RedirectionRelativePath" UniqueName="RedirectionRelativePath" />
            </Columns>--%>
            <Columns>
                <telerik:GridBoundColumn CurrentFilterFunction="Contains" AutoPostBackOnFilter="true"
                    SortExpression="Column1_" HeaderText="Column1_" DataField="Column1" UniqueName="Column1_" />
                <telerik:GridBoundColumn CurrentFilterFunction="Contains" AutoPostBackOnFilter="true"
                    SortExpression="Column2_" HeaderText="Column2_" DataField="Column2" UniqueName="Column2_" />
                <telerik:GridBoundColumn CurrentFilterFunction="Contains" AutoPostBackOnFilter="true"
                    SortExpression="Column3_" HeaderText="Column3_" DataField="Column3" UniqueName="Column3_" />
                <telerik:GridBoundColumn CurrentFilterFunction="Contains" AutoPostBackOnFilter="true"
                    SortExpression="Column4_" HeaderText="Column4_" DataField="Column4" UniqueName="Column4_" />
            </Columns>
            <EditFormSettings>
                <PopUpSettings ScrollBars="None"></PopUpSettings>
            </EditFormSettings>
        </MasterTableView>
        <FilterMenu Skin="Web20" EnableTheming="True">
            <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
        </FilterMenu>
    </telerik:RadGrid>
    <telerik:RadAjaxManager ID="RadAjaxManager_" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadGrid_">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid_" LoadingPanelID="AjaxLoadingPanel" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="AjaxLoadingPanel" runat="server" Transparency="10"
        Height="80px" Width="80px" class="RadAjaxLoadingPanel">
        <div class="LoadingPanel">
            <div class="AlignCenter">
                <asp:Label ID="LoadingPanelLoadingLabel" runat="server" Text="Loading..." />
            </div>
        </div>
    </telerik:RadAjaxLoadingPanel>
    </form>
</body>
</html>

Code behind in C#

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.Web.UI;
using System.Data;

namespace RadGridFiltering
{
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }
        protected void Table_OnNeedDataSource(object source, GridNeedDataSourceEventArgs e)
        {
            DataTable dataTable = new DataTable("Table");

            dataTable.Columns.Add("Column1");
            dataTable.Columns.Add("Column2");
            dataTable.Columns.Add("Column3");
            dataTable.Columns.Add("Column4");

            dataTable.Rows.Add(1, 2, 3, 4);
            dataTable.Rows.Add(1, 2, 3, 4);
            dataTable.Rows.Add(1, 2, 3, 4);
            dataTable.Rows.Add(1, 2, 3, 4);

            (source as RadGrid).DataSource = dataTable;
        }
        protected void Toggle_Clicked(object sender, EventArgs e)
        {

                int i = 0;
                foreach (var columns in RadGrid_.MasterTableView.Columns)
                {
                    if (RadGrid_.MasterTableView.Columns.Count < i)
                    {
                        i = 0;
                    }
                    if ((RadGrid_.MasterTableView.Columns[i] != null))
                    {
                        if (!RadGrid_.MasterTableView.Columns[i].Equals(""))
                        {
                            RadGrid_.MasterTableView.Columns[i].CurrentFilterValue = "";
                        }
                    }

                    i++;
                }
                RadGrid_.AllowFilteringByColumn = !(RadGrid_.AllowFilteringByColumn);
                RadGrid_.Rebind();
        }
    }
}

answered on 13 Mar 2009, 11:35 AM

Hi luay,

Thank you for the code snippets.

Can you check whether showing/hiding the filter item in the grid on the client (using the showFilterItem()/hideFilterItem() methods from its client-side API as in this demo) alleviates the discrepancy with the styles/filter menu positioning? Note that you can invoke these methods intercepting the OnGridCreated client event (for example).

I also noticed that you set custom styles for your command item with float/padding - does removing them temporary produces different result?

Kind regards,

Sebastian
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

answered on 30 Nov 2009, 12:59 PM

Hi you all,

I have a similar problem. This is my Grid:

    
            <telerik:RadGrid ID="dgDocuments" runat="server" Skin="Office2007" 
        
                                                     OnNeedDataSource="dgDocuments_NeedDataSource"  
        
                                                     OnItemCreated="dgDocuments_ItemCreated"  
        
                                                     ShowGroupPanel="true" ShowStatusBar="true"  >  
        
                                        <MasterTableView DataKeyNames="ID" AllowFilteringByColumn="true" AllowSorting="true" 
        
                                                         PageSize="20" AutoGenerateColumns="false" GridLines="none" AllowPaging="true" 
        
                                                         Font-Size="X-Small" > 
        
                                        </MasterTableView> 
        
                                        <ClientSettings ReorderColumnsOnClient="True" AllowDragToGroup="True" AllowColumnsReorder="True"> 
        
                                        </ClientSettings> 
        
                                        <GroupingSettings ShowUnGroupButton="True" /> 
        
                                        <ItemStyle Font-Size="X-Small"  BackColor="AliceBlue" /> 
        
                                        <HeaderStyle Font-Size="Smaller" /> 
        
                                        <AlternatingItemStyle Font-Size="X-Small" BackColor="Lavender" BorderColor="Transparent" /> 
        
                </telerik:RadGrid>

I fill the grid after the click on a Radtreeview. When i click on the Filter icon in all the columns instead of the dropdown menu the menu shows as lists of text on the top of the page.

this only appears when i use Ajax Manager:

    
             <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" > 
        
                        <AjaxSettings> 
        
                            <telerik:AjaxSetting AjaxControlID="trvArchivi"> 
        
                                <UpdatedControls> 
        
                                    <telerik:AjaxUpdatedControl ControlID="dgDocuments" LoadingPanelID="RadAjaxLoadingPanel1" /> 
        
                                </UpdatedControls> 
        
                            </telerik:AjaxSetting> 
        
                        </AjaxSettings> 
        
                    </telerik:RadAjaxManager>

If i don't use Ajax Manager eveything goes well..

Can anybody tell me where is the problem.

Thanks