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

Grid ShowFilterIcon dynamically

5 Answers 137 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
James
Top achievements
Rank 1
James asked on 11 Jul 2014, 01:48 AM
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.

5 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 11 Jul 2014, 11:15 AM
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.
0
James
Top achievements
Rank 1
answered on 11 Jul 2014, 12:46 PM
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.

0
Princy
Top achievements
Rank 2
answered on 15 Jul 2014, 12:13 PM
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
0
James
Top achievements
Rank 1
answered on 22 Jul 2014, 03:13 AM
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.
0
Princy
Top achievements
Rank 2
answered on 24 Jul 2014, 04:56 AM
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
Tags
General Discussions
Asked by
James
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
James
Top achievements
Rank 1
Share this question
or