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

Hiding the filter row from the start

7 Answers 132 Views
Grid
This is a migrated thread and some comments may be shown as answers.
kieran
Top achievements
Rank 1
kieran asked on 25 Nov 2008, 05:59 PM
Hi. I am using the technique described in the demo to have a toggle (in my case a check box) that allows the user to hide the filter row.

This works just fine, but it always starts off visible. Is there a way to have it initially hidden?

Looking at this thread tempts me to set tableView.get_tableFilterRow().style.display = none, but I'd rather use a published API. I did put an OnGridCreated handler to turn off the row, but the user sees this happening and it fires every time a call back occurs.

Any ideas?

Thanks

7 Answers, 1 is accepted

Sort by
0
Accepted
Shinu
Top achievements
Rank 2
answered on 26 Nov 2008, 04:30 AM
Hi,

To hide the filter row initially set the AllowFilteringByColumn property to false in the aspx and set its visibility in the CheckBox CheckChanged event .

CS:
 protected void CheckBox1_CheckedChanged1(object sender, EventArgs e) 
    { 
        RadGrid1.AllowFilteringByColumn = !RadGrid1.AllowFilteringByColumn; 
        RadGrid1.Rebind(); 
    } 


Thanks
Shinu.
0
kieran
Top achievements
Rank 1
answered on 27 Nov 2008, 11:32 PM
Thanks, that sort of works, but it's a bit laggy, or slow.

There's no way to do it client side?
0
Vlad
Telerik team
answered on 28 Nov 2008, 06:55 AM
Hello kieran,

Please check this demo for more info:
http://demos.telerik.com/aspnet/Prometheus/Grid/Examples/GeneralFeatures/Filtering/DefaultCS.aspx

Regards,
Vlad
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
kieran
Top achievements
Rank 1
answered on 01 Dec 2008, 05:20 PM
Yeah, that's the demo I'm basing my code on.

It doesn't show me how to start off with the filter row hidden though.
0
Sebastian
Telerik team
answered on 02 Dec 2008, 09:02 AM
Hi kieran,

You may consider invoking the hideFilterItem() client method intercepting the OnGridCreated client-side event and stopping the method invocation (if you want to show the filter item at some point) on subsequent submits based on your custom logic.

Best regards,
Sebastian
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
kieran
Top achievements
Rank 1
answered on 02 Dec 2008, 10:18 PM
Yeah, I tried that early on, but it looks horrible. I'm going to settle for Shinu's initial solution, although I'd really prefer no postback.
0
Simon
Top achievements
Rank 2
answered on 18 Dec 2008, 02:01 PM

Keiron

 

I have just come across the same requirement, and have used the following work around to get it functioning as I required:

 

1)      Ensure that the Checkbox you want to use to toggle the display of the Filter Row is server side, you need this to manage the Filter Row visibility between PostBacks

 

<asp:CheckBox runat="server" id="chkShowFilter" onclick="ToggleFilter();" />

 

2)      Handle the Grid’s ItemDataBound event, use this to add a custom attribute to the FilterRow

 

protected void grdProducts_ItemDataBound(object sender, GridItemEventArgs e)

{

if (e.Item.ItemType == GridItemType.FilteringItem)

{

e.Item.Attributes.Add("isFilterRow", "1");

 

if ( e.Item.Style["display"] != null)

    e.Item.Style.Remove("display");

 

if (!chkShowFilter.Checked)

    e.Item.Style.Add("display", "none");

}

}

 

3)      Create a Javascript method to get the <TABLE> element of the Grid’s MasterTableView (you can’t use get_masterTableView() as this doesn’t allow to extract a collection of all TRs)

 

    function ToggleFilter() {

 

   var chkShowFilter = document.getElementById('<%=chkShowFilter.ClientID %>');
   var grid = $find('<%=grdProducts.ClientID %>');

 

 

var tblMasterTable = document.getElementById(grid.get_masterTableView().get_id());

var tableRows = tblMasterTable.getElementsByTagName('tr');

var filterRowId = -1;

 

if ( tableRows != null ) {

 

for(i = 0; i < tableRows.length; i++) {

var isFilterRow = tableRows[i].getAttribute('isFilterRow');

 

if ( isFilterRow != null && isFilterRow == '1' ) {

filterRowId = i;

} 

}

 

if ( filterRowId > -1 ) {

if ( chkShowFilter.checked ) {

    tableRows[filterRowId].style.display = '';

}

else {

    tableRows[filterRowId].style.display = 'none';

}

}

}

    }

Hope this helps

Regards

Simon 

 

 

 

 

 

 

 

 

Tags
Grid
Asked by
kieran
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
kieran
Top achievements
Rank 1
Vlad
Telerik team
Sebastian
Telerik team
Simon
Top achievements
Rank 2
Share this question
or