Hiding the filter row from the start

[kieran]

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

[Shinu]

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.

[kieran]

Thanks, that sort of works, but it's a bit laggy, or slow.

There's no way to do it client side?

[Vlad]

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.

[kieran]

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.

[Sebastian]

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.

[kieran]

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.

[Simon]

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