[Solved] Client-Side Filtering

[Scott Salyer]

We have a user control that allows us to enable/disable the filtering display on a grid via Javascript. The control looks like this:

<table cellpadding="2" cellspacing="2" border="0">

<tr>

<td width="1"><asp:Image runat="server" ImageUrl="~/_assets/images/Filter.gif" /></td>

<td>Show Filtering Options: </td>

<td>

<input type="radio" name="<%=this.Grid.ClientID%>ButtonGroup" onclick="showFilterItem('<%=this.Grid.ClientID%>')" />

<label for="<%=this.Grid.ClientID%>ButtonGroup">Yes</label>

<input type="radio" name="<%=this.Grid.ClientID%>ButtonGroup" checked="true" onclick="hideFilterItem('<%=this.Grid.ClientID%>')"/>

<label for="<%=this.Grid.ClientID%>ButtonGroup">No</label>

</td>

</tr>

</table>

The code-behind looks like this:

	protected void Page_Load(object sender, EventArgs e)
	{
	InitControl();
	}
	protected void InitControl()
	{
	if (!Page.ClientScript.IsClientScriptBlockRegistered("CodeScript"))
	{
	string java = @"function showFilterItem(GridName) {
	var c = document.getElementsByName(GridName + 'ButtonGroup');
	c.item(0).checked = true;
	$find(GridName).get_masterTableView().showFilterItem();}
	function hideFilterItem(GridName) {
	var c = document.getElementsByName(GridName + 'ButtonGroup');
	c.item(1).checked = true;
	$find(GridName).get_masterTableView().hideFilterItem();}
	function GridCreated(sender, eventArgs) {
	hideFilterItem(sender.get_id());}";
	Page.ClientScript.RegisterClientScriptBlock(GetType(), "CodeScript", java, true);
	Grid.ClientSettings.ClientEvents.OnGridCreated = "GridCreated";
	}
	//Grid.ClientSettings.ClientEvents.OnDataBound = "hideFilterItem('" + RadGridClientId + "')";
	}
	public string RadGridId { get; set; }
	RadGrid _Grid;
	protected RadGrid Grid
	{
	get
	{
	if (_Grid == null)
	{
	//_Grid = (RadGrid)((Novelis.MetalProcurement.Web.site)Page.Master).FindControl(this.Parent, RadGridId);
	_Grid = this.Parent.FindControlRecursive(this.RadGridId) as RadGrid;
	_Grid.ItemCreated += new GridItemEventHandler(_Grid_ItemCreated);
	}
	return _Grid;
	}
	}
	void _Grid_ItemCreated(object sender, GridItemEventArgs e)
	{
	if (!IsPostBack && e.Item is GridFilteringItem)
	{
	//Grid.ClientSettings.ClientEvents.OnGridCreated = "hideFilterItem('" + RadGridClientId + "')";
	//e.Item.Style["display"] = "none";
	}
	}
	public string RadGridClientId
	{
	get { return Grid.ClientID; }
	}
	public string RadioGroupName
	{
	get { return RadGridClientId + "ButtonGroup"; }
	}

Everything works great on a "normal" grid on a page and it even works great when you have X grids inside X tabs that are all using this control. The issue I'm running into is when I have a grid inside a RadPanelBarItem like so:

	<telerik:RadPanelBar runat="server" ID="RadPanelBar1" Width="575px" ExpandMode="SingleExpandedItem">
	<Items>
	<telerik:RadPanelItem runat="server" Text="Step 1: Select Product" Value="ProductSelector" Expanded="true" Selected="true">
	<Items>
	<telerik:RadPanelItem runat="server">
	<ItemTemplate>
	<uc:rgfilman ID="ucFilMan" runat="server" RadGridId="rgProducts" />
	<telerik:RadGrid ID="rgProducts" SkinID="Selector" Width="575px" runat="server" OnNeedDataSource="rgProducts_NeedDataSource" OnSortCommand="rgProducts_SortCommand" AllowSorting="true" SortingSettings-SortedBackColor="Transparent" AllowFilteringByColumn="true" OnDataBound="rgProducts_DataBound">
	<MasterTableView AutoGenerateColumns="false" DataKeyNames="Id" AllowMultiColumnSorting="true" AllowNaturalSort="true" ItemStyle-Wrap="false">
	<Columns>
	<telerik:GridBoundColumn DataField="Id" UniqueName="Id" Visible="false"/>
	<telerik:GridBoundColumn HeaderText="Description" DataField="Name" UniqueName="Product" />
	</Columns>
	</MasterTableView>
	<ClientSettings EnableRowHoverStyle="true" Selecting-AllowRowSelect="true">
	<ClientEvents OnRowDblClick="__rowSelected" />
	</ClientSettings>
	</telerik:RadGrid>
	</ItemTemplate>
	</telerik:RadPanelItem>
	</Items>
	</telerik:RadPanelItem>
	</Items>
	</telerik:RadPanelBar>

The control is in there (it's the one called "uc:rgfilman") but it won't enable/disable the filtering on the client when the individual radio buttons are selected. The really frustrating part is there are zero javascript errors when I select the yes/no options. Since there aren't any errors I'm not really certain where I can start to look as to why this isn't functioning.

[Scott Salyer]

Anyone?

[Sebastian]

Hello Scott,

You will need to modify your code to get reference to the nested grid on the client as explained in this code library entry:

http://www.telerik.com/community/code-library/aspnet-ajax/general/find-radgrid-client-side-if-it-is-nested-in-a-template-of-another-control.aspx

To port the code for the ASP.NET AJAX version of the controls, follow the steps from these documentation articles:

http://www.telerik.com/help/aspnet-ajax/grdmigrationtoprometheus.html
http://www.telerik.com/help/aspnet-ajax/panel_overviewmigrating.html

Best regards,
Sebastian
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Scott Salyer]

Well that's an intriguing way to handle it...I'll investigate a bit further.

Thanks!