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

Filter grid with menu or tabstrip

10 Answers 107 Views

Grid

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

10 Answers, 1 is accepted

answered on 06 Aug 2010, 11:06 AM

I´ve almost sorted this out now but I have one more thing to ask you. When the page loads I populate my radmenu with my categories and when I click in the menu the grid gets populated with my companies. That´s great, but how can I get the first menu item to be selected(clicked) when the page loads? I´ve tried something like this but i can´t get it to work.

<script type="text/javascript">

function FindFirstItem(sender, args) {

//args.get_items().getItem(1).open(); // Set the root items as expanded

var menu = $find("<%= MenuBranch.ClientID %>");

menu.get_items().getItem(1).open();

}

</script>

All the best
Johnny

answered on 18 Aug 2010, 02:43 PM

Hi Pavlina,

Thanks for taking time for this. It´s much appreciated! Let me now if I missed something or you need something else.
PS. I need to make the first menu item to be clicked on page load since that triggers and populates the radgrid.
PS2. This is a user control for my custom Sitefinity module.

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="CompanyList.ascx.cs" Inherits="Custom_Modules_NearBy_Frontend_CompanyList" %>

<telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">

</telerik:RadAjaxManagerProxy>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default">

</telerik:RadAjaxLoadingPanel>

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

<script type="text/javascript">

function FindFirstItem(sender) {

var menu = $find("<%= MenuBranch.ClientID %>");

var rootItem1 = menu.get_items().getItem(0);

rootItem1.open();

}

</script>

<style type="text/css">

.viewWrap

{

padding: 5px;

background: #909A0E 0 0 repeat-x;

}

.contactWrap

{

padding: 5px 10px 5px 10px;

background: #fff;

color: #333;

}

.contactWrap td

{

padding: 0 20px 0 0;

}

.contactWrap td td

{

padding: 3px 20px 3px 0;

}

.contactWrap img

{

border: 1px solid #05679d;

}

.contactWrap td a:link, a:visited, a:hover, a:active

{

color: #909A0E !Important;

text-decoration: underline !Important;

}

</style>

</telerik:RadCodeBlock>

<h2>NearBy - Sök i kategorierna</h2><asp:Label ID="lblGuid" runat="server" Text="" Visible="false"></asp:Label>

<div>

<telerik:RadMenu ID="MenuBranch" runat="server" DataSourceID="SqlDataSource2" DataTextField="Name"

DataValueField="BranchId" OnItemClick="OnItemClick" OnClientLoad="FindFirstItem">

</telerik:RadMenu>

</div>

<div style="margin-top:10px">

<telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="SqlDataSource3" Width="98%"

GridLines="Both" AllowPaging="True" AllowSorting="True"

Skin="Hay" AutoGenerateColumns="False">

<HeaderContextMenu>

</HeaderContextMenu>

<MasterTableView DataKeyNames="CompanyId" DataSourceID="SqlDataSource3" GroupLoadMode="Server">

<RowIndicatorColumn>

<HeaderStyle Width="20px"></HeaderStyle>

</RowIndicatorColumn>

<ExpandCollapseColumn>

<HeaderStyle Width="20px"></HeaderStyle>

</ExpandCollapseColumn>

<Columns>

<telerik:GridBoundColumn DataField="Name" HeaderText="Name"

UniqueName="Name" SortExpression="Name">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Address" HeaderText="Address"

SortExpression="Address" UniqueName="Address">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Telephone" HeaderText="Telephone"

SortExpression="Telephone" UniqueName="Telephone">

</telerik:GridBoundColumn>

<telerik:GridImageColumn DataAlternateTextField="Name"

DataImageUrlFields="LogotypePath" ImageHeight="" ImageWidth=""

UniqueName="column">

</telerik:GridImageColumn>

</Columns>

<NestedViewSettings DataSourceID="SqlDataSource4">

<ParentTableRelation>

<telerik:GridRelationFields MasterKeyField="CompanyId" DetailKeyField="CompanyId" />

</ParentTableRelation>

</NestedViewSettings>

<NestedViewTemplate>

<asp:Panel ID="NestedViewPanel" runat="server" CssClass="viewWrap">

<div class="contactWrap">

<fieldset style="padding: 10px;">

<table>

<tbody>

<tr>

<td>

<table>

<tbody>

<tr>

<td>

Företag:

</td>

<td>

<b><asp:Label ID="Label4" Text='<%#Eval("Name") %>' runat="server"></asp:Label></b>

</td>

</tr>

<tr>

<td>

Address:

</td>

<td>

<asp:Label ID="Label2" Text='<%#Eval("Address") %>' runat="server"></asp:Label>

</td>

</tr>

<td>

Postnummer:

</td>

<td>

<asp:Label ID="Label1" Text='<%#Eval("Zip") %>' runat="server"></asp:Label>

</td>

<tr>

<td>

City:

</td>

<td>

<asp:Label ID="Label3" Text='<%#Eval("City") %>' runat="server"></asp:Label>

</td>

</tr>

<tr>

<td>

Telefon:

</td>

<td>

<asp:Label ID="Label6" Text='<%#Eval("Telephone") %>' runat="server"></asp:Label>

</td>

</tr>

<tr>

<td>

E-post:

</td>

<td>

<asp:HyperLink id="hplEmail" runat="server" text='<%#

DataBinder.Eval(Container, "DataItem.Email") %>' NavigateUrl='<%#

DataBinder.Eval(Container, "DataItem.Email","MAILTO:{0}")

%>'>

</asp:HyperLink>

</td>

</tr>

<tr>

<td>

Hemsida:

</td>

<td>

<asp:HyperLink ID="hplWebsite" runat="server" Text='<%#Eval("Name") %>'

Target="_blank" NavigateUrl='<%#Eval("Website") %>'>

</asp:HyperLink>

</td>

</tr>

</tbody>

</table>

</td>

<td>

<asp:Image ID="CompanyImage" runat="server" ImageUrl='<%#Eval("LogotypePath") %>' />

</td>

</tr>

</tbody>

</table>

</fieldset>

</div>

</asp:Panel>

</NestedViewTemplate>

</MasterTableView>

<ClientSettings>

<Selecting AllowRowSelect="True" />

</ClientSettings>

</telerik:RadGrid>

</div>

<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:Unigolfnet3.7sp3ConnectionString %>"

SelectCommand="SELECT * FROM [NearBy_GolfClub] WHERE ([GolfClubId] = @GolfClubId)">

<SelectParameters>

<asp:ControlParameter ControlID="lblGuid" Name="GolfClubId" PropertyName="Text"

Type="Object" />

</SelectParameters>

</asp:SqlDataSource>

<asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:Unigolfnet3.7sp3ConnectionString %>"

SelectCommand="SELECT * FROM [NearBy_Branch] WHERE ([GolfClubId] = @GolfClubId)">

<SelectParameters>

<asp:ControlParameter ControlID="lblGuid" Name="GolfClubId" PropertyName="Text" DbType="Guid" />

</SelectParameters>

</asp:SqlDataSource>

<asp:SqlDataSource ID="SqlDataSource3" runat="server" ConnectionString="<%$ ConnectionStrings:Unigolfnet3.7sp3ConnectionString %>"

SelectCommand="SELECT [CompanyId], [BranchId], [Name], [Address], [Telephone], [LogotypePath], [Active], [LogotypeAlternateText] FROM [NearBy_Company] WHERE ([BranchId] = @BranchId)">

<SelectParameters>

<asp:ControlParameter ControlID="MenuBranch" Name="BranchId"

PropertyName="SelectedValue" DbType="Guid" />

</SelectParameters>

</asp:SqlDataSource>

<asp:SqlDataSource ID="SqlDataSource4" runat="server" ConnectionString="<%$ ConnectionStrings:Unigolfnet3.7sp3ConnectionString %>"

SelectCommand="SELECT [CompanyId], [Name], [Address], [Zip], [City], [Email], [Website], [Telephone], [Fax], [Description], [LogotypePath], [LogotypeAlternateText], [Active] FROM [NearBy_Company] WHERE ([CompanyId] = @CompanyId)">

<SelectParameters>

<asp:ControlParameter ControlID="RadGrid1" Name="CompanyId"

PropertyName="SelectedValue" DbType="Guid" />

</SelectParameters>

</asp:SqlDataSource>

using System;

using System.Collections.Generic;

using System.ComponentModel;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using Telerik.Cms.Web.UI;

using Telerik.Web.UI;

public partial class Custom_Modules_NearBy_Frontend_CompanyList : System.Web.UI.UserControl

{

protected void Page_Load(object sender, EventArgs e)

{

}

protected override void OnInit(EventArgs e)

{

base.OnInit(e);

RadAjaxManager ajaxManager = RadAjaxManager.GetCurrent(this.Page);

if (ajaxManager != null)

{

ajaxManager.AjaxSettings.AddAjaxSetting(MenuBranch, RadGrid1, RadAjaxLoadingPanel1);

ajaxManager.AjaxSettings.AddAjaxSetting(RadGrid1, RadGrid1, RadAjaxLoadingPanel1);

}

lblGuid.Text = GolfClubId.ToString();

}

protected void OnItemClick(object sender, EventArgs e)

{

//RadGrid1.Rebind();

}

[Category("Menu settings")]

public RadMenu Menu

{

get

{

return MenuBranch;

}

[Category("Grid settings")]

public RadGrid CompanyGrid

{

get

{

return RadGrid1;

}

[WebEditor("GolfClubIdWebEditor, App_Code")]

public Guid GolfClubId

{

get

{

object obj = this.ViewState["GolfClubId"];

if (obj == null)

return Guid.Empty;

return (Guid)obj;

}

set

{

this.ViewState["GolfClubId"] = value;

}

Accepted

answered on 20 Aug 2010, 02:10 PM

Hi Johnny,

Please try to change your javascript code as shown below and let me know if it works for you:

<script type="text/javascript">

function FindFirstItem(sender) {

var menu = $find("<%= MenuBranch.ClientID %>");

var rootItem1 = menu.get_items().getItem(0);

rootItem1.set_selected(true);

}

</script>

Additionally, I suggest that you review the following help article:
http://www.telerik.com/help/aspnet-ajax/menu_clientsideradmenuitem.html

Sincerely yours,
Pavlina
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting

Testing & Mocking

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Filter grid with menu or tabstrip

10 Answers, 1 is accepted