Using FilterTemplate in ExpandCollapseColumn to 'clear filters'

[Nithya]

Hi,

I was wondering if there is way to add some sort of 'ClearFilter' text/image button at the intersection of the 'Filter Row' and 'ExpandCollapse Column'.

I tried this and there is no change in the UI -

<ExpandCollapseColumn Visible="true">
                <FilterTemplate>
                    <asp:ImageButton Width="20px" ImageUrl='~/images/ClearFilter.gif' AlternateText="C" runat="server"                                       OnClick="OnClearFilterBtnClick" Style="vertical-align: middle" />
                </FilterTemplate>
            </ExpandCollapseColumn>

Attached the snapshot of the UI -

[Radoslav]

Hi Nithya,

To achieve the desired functionality you could try using the following code snippet:

void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
{
        GridFilteringItem item = e.Item as GridFilteringItem;

        if (item != null)
        {
            ImageButton image = new ImageButton();
            image.Width= new Unit(20);
            image.AlternateText ="C";
            image.Attributes.Add("style", "vertical-align: middle");
            image.ImageUrl = "~/images/ClearFilter.gif";
            image.Click += new ImageClickEventHandler(image_Click);
            item["ExpandColumn"].Controls.Add(image);
        }
}

void image_Click(object sender, ImageClickEventArgs e)
{
        foreach (GridColumn column in RadGrid1.MasterTableView.Columns)
        {
            column.CurrentFilterFunction = GridKnownFunction.NoFilter;
            column.CurrentFilterValue = string.Empty;
        }
        RadGrid1.MasterTableView.FilterExpression = string.Empty;
        RadGrid1.MasterTableView.Rebind();
}

Please give it try and let me know if it helps you. Looking forward for your reply.

All the best,
Radoslav
the Telerik team

[Nithya]

It worked perfectly. I appreciate it.

One more question, not sure if it has to be on a different thread, but here it goes -

Is it possible to auto focus on the expanded Nested view template? The Nested view template has a tabular view, and sometimes, it's displayed below the user's visibility.

I have tried, autofocus() and other similar stuffs, which didn't seem to do the right thing. perhaps am not accessing the right control to focus on. let me know if you have any thoughts.

[Radoslav]

Hi Nithya,

What do you mean by focusing grid’s Nested view template? Do you mean scrolling to the expanded nested view? Because the nested views are div elements and they do not have tabindex property, so they could not be focused by using focus() function. More information you could find here:
http://stackoverflow.com/questions/1599660/which-html-elements-can-receive-focus
http://stackoverflow.com/questions/3656467/is-it-possible-to-focus-on-a-div-using-javascript-focus-function
If you want to scroll to the expanded nested view you could try using the following approach:
Find the view div on the page and then use some of the approaches described in the following linsk in order to scroll to the nested view div:
http://clifgriffin.com/2008/10/14/using-javascript-to-scroll-to-a-specific-elementobject/
http://stackoverflow.com/questions/68165/javascript-to-scroll-long-page-to-div
http://stackoverflow.com/questions/4801655/how-to-go-to-specific-to-element-on-page

I hope this helps.

Greetings,
Radoslav
the Telerik team

[Nithya]

You're right. The idea is to scroll to the recently opened details view/nested view.

Tried couple of ways using JQuery and it seems bit hard to identify the event that handles the expand/collapse, also the problem is either the radgrid or the mastertableview loads upon expand/collapse, which loses the JQuery context.

With the below sample, it scrolls to specified location, but then in a second it reloads the grid and loses the scroll location.

<script type="text/javascript">
$(document).ready(function ()
{
$('.rgExpandCol').click(function ()
{
window.scrollTo(0, 200);
});
});
</script>