Grid ShowFilterIcon dynamically

6 posts, 0 answers
  1. James
    James avatar
    22 posts
    Member since:
    Jun 2014

    Posted 10 Jul 2014 Link to this post

    The grid I am using has several columns with ShowFilterIcon = true but the columns are to close to show filter icon on every column.
    I would like to be able to show the filter icon only when a user clicks into the column header filter box.

  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 11 Jul 2014 in reply to James Link to this post

    Hi James,

    Please have a look into the sample code snippet to show filter icon dynamically.

    ASPX:
    <telerik:RadGrid AutoGenerateColumns="False" ID="RadGrid1" DataSourceID="SqlDataSource1"
        AllowFilteringByColumn="True" AllowSorting="True" ShowFooter="True" AllowPaging="True"
        runat="server" ResolvedRenderMode="Classic" OnItemCommand="RadGrid1_ItemCommand">
        <GroupingSettings CaseSensitive="false"></GroupingSettings>
        <MasterTableView AutoGenerateColumns="false" AllowFilteringByColumn="True" ShowFooter="True">
            <Columns>
                <telerik:GridBoundColumn FilterControlWidth="120px" DataField="ShipName" HeaderText="ShipName" AutoPostBackOnFilter="true" CurrentFilterFunction="Contains" ShowFilterIcon="false">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn FilterControlWidth="50px" DataField="ShipPostalCode" ShowFilterIcon="false" HeaderText="ShipPostalCode">
                    <FooterStyle Font-Bold="true"></FooterStyle>
                </telerik:GridBoundColumn>
            </Columns>
        </MasterTableView>
        <ClientSettings>
            <ClientEvents OnColumnClick="OnColumnClick" />
        </ClientSettings>
    </telerik:RadGrid>

    C#:
    public static string item = string.Empty;
    protected void RadGrid1_ItemCommand(object sender, GridCommandEventArgs e)
    {
        if (e.CommandName == RadGrid.FilterCommandName)
        {
            foreach (GridColumn column in RadGrid1.MasterTableView.RenderColumns)
            {
                if (column.UniqueName.ToString() == item)
                {
                    column.ShowFilterIcon = false;
                    break;
                }
            }
        }
        if (e.CommandName == "customCommand")
        {
            foreach (GridColumn column in RadGrid1.MasterTableView.RenderColumns)
            {
                item = e.CommandArgument.ToString();
                if (column.UniqueName.ToString() == e.CommandArgument.ToString())
                {
                    column.ShowFilterIcon = true;
                    break;
                }
            }
        }
    }

    JavaScript:
    function OnColumnClick(sender, eventArgs) {
        var columnUniqueName = eventArgs.get_gridColumn().get_uniqueName();
        $find("<%= RadGrid1.ClientID %>").get_masterTableView().fireCommand("customCommand", columnUniqueName);
    }

    Thanks,
    Princy.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. James
    James avatar
    22 posts
    Member since:
    Jun 2014

    Posted 11 Jul 2014 in reply to Princy Link to this post

    Princy,

    When I click the header column it takes 2 clicks to get the filter icon to appear.
    Page reloading issue.
    Anyway this is close to what I need but not exactly.
    Let me explain it a little better.

    So I have a column called Customer that has a filter box above the column. "See FilterColumn1.jpg"
    When the user clicks inside the filter box, I need the filter button to appear. "See FilterColumn2.jpg"
    You current code is for when I click on the header column but I need it for when I click inside the filter box.

    Thanks for the help.

  5. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 15 Jul 2014 in reply to James Link to this post

    Hi James,

    Please try the following code snippet to show the Sort Icon on click of filter textbox.

    C#:
    public static string item = string.Empty;
    bool isSelect = false;
    void RadGrid1_PreRender(object sender, EventArgs e)
    {
        if (!isSelect)
        {
            foreach (GridColumn column in RadGrid1.MasterTableView.RenderColumns)
            {
             RadGrid1.MasterTableView.GetColumn(column.UniqueName).ShowFilterIcon = false;
             RadGrid1.Rebind();
            }
        }
    }
    void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
    {
        if (e.Item is GridFilteringItem)
        {
            GridFilteringItem filteringItem = e.Item as GridFilteringItem;
            foreach (GridColumn col in RadGrid1.MasterTableView.Columns)
            {
             TextBox box = filteringItem[col.UniqueName].Controls[0] as TextBox;
             box.Attributes.Add("onfocus", "return MyClick('" + col.UniqueName + "');");
            }
        }
    }
    void RadGrid1_ItemCommand(object sender, GridCommandEventArgs e)
    {
        if (e.CommandName == "customCommand")
        {
            isSelect = true;
            foreach (GridColumn column in RadGrid1.MasterTableView.RenderColumns)
            {
                item = e.CommandArgument.ToString();
                if (column.UniqueName.ToString() == e.CommandArgument.ToString())
                {
                    column.ShowFilterIcon = true;
                    RadGrid1.Rebind();
                    foreach (GridFilteringItem filteritem in RadGrid1.MasterTableView.GetItems(GridItemType.FilteringItem))
                    {
                     TextBox box = filteritem[column.UniqueName].Controls[0] as TextBox;
                     box.Focus();
                    }
                }
            }
        }
    }

    JS:
    <script type="text/javascript">
     function MyClick(column) {
      $find("<%= RadGrid1.ClientID %>").get_masterTableView().fireCommand("customCommand", column);
     }
    </script>

    Thanks,
    Princy
  6. James
    James avatar
    22 posts
    Member since:
    Jun 2014

    Posted 21 Jul 2014 in reply to Princy Link to this post

    For some reason the RadGrid1_ItemCommand is not firing.
    The "MyClick" function is firing when I click in a textbox on the filter and if I do an alert(column) it is showing the correct column but it does not call the "ItemCommand" event.
    I have tried to add / remove the OnItemCommand="RadGrid1_ItemCommand on the <telerik:RadGrid...> but it had no effect.
  7. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 23 Jul 2014 in reply to James Link to this post

    Hi James,

    Please make sure you are binding the grid using Advanced Data-binding (Using NeedDataSource Event) also make sure you have not disabled the ViewState anywhere. If this doesn't help, provide your full code snippet.

    Thanks,
    Princy
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017