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

Using FilterTemplate in ExpandCollapseColumn to 'clear filters'

4 Answers 56 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Nithya
Top achievements
Rank 1
Nithya asked on 23 Jul 2012, 06:53 PM
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 -

4 Answers, 1 is accepted

Sort by
0
Radoslav
Telerik team
answered on 26 Jul 2012, 09:03 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Nithya
Top achievements
Rank 1
answered on 26 Jul 2012, 03:18 PM
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.
0
Radoslav
Telerik team
answered on 27 Jul 2012, 01:49 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Nithya
Top achievements
Rank 1
answered on 27 Jul 2012, 04:04 PM
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>
Tags
Grid
Asked by
Nithya
Top achievements
Rank 1
Answers by
Radoslav
Telerik team
Nithya
Top achievements
Rank 1
Share this question
or