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

Filter grid with menu or tabstrip

10 Answers 88 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Johnny
Top achievements
Rank 1
Johnny asked on 28 Jul 2010, 05:25 PM
Hi,

I´ve seen the filter grid by combobox demo and I´m wondering if this functionality can be applied with some of the other controls such as menu, tabstrip, toolbar etc.? I have kind of a "Northwind - Category/products" relationship and I was hoping to have an easy way of populating a menu with the categories and with a click on the menu filter my grid with products.

If any one have some ideas or links to video´s or forum post´s, just let me know.

Thanks
Johnny

10 Answers, 1 is accepted

Sort by
0
Cori
Top achievements
Rank 2
answered on 28 Jul 2010, 07:35 PM
Hello Johnny,

I assume it should be the same as the demo, all you should need to do is change this line in the demo to something like this:

Menu:
<SelectParameters>
     <asp:ControlParameter Name="CategoryID" PropertyName="SelectedValue" ControlID="mnuCategories" />
</SelectParameters>

You're menu items need to postback, so the selected value gets changed. I'm not sure how a RadTabStrip would work, since it's a two-part property SelectedTab.Value, but maybe it would work if you set that in the PropertyName property.

I hope that helps.
0
Johnny
Top achievements
Rank 1
answered on 29 Jul 2010, 01:37 PM
Hi Cori!

Thanks for the help. I can´t get it to work and I suspect it has something to do with the fact that I´m working with a Sitefinity frontend control for a module. I need perhaps to work with AjaxManagerProxy or something? I´ll try the sitefinity forum.

Thanks again
Johnny
0
Pavlina
Telerik team
answered on 03 Aug 2010, 05:23 PM
Hi Johnny,

You can also examine the code library bellow:
http://www.telerik.com/community/code-library/aspnet-ajax/general/excel-like-auto-filter-with-radgrid-radmenu-and-radajax.aspx

Best wishes,
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
0
Johnny
Top achievements
Rank 1
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
0
Pavlina
Telerik team
answered on 11 Aug 2010, 03:10 PM
Hi Johnny,

Review the online example below, that demonstrates how you can achieve the desired functionality:
http://demos.telerik.com/aspnet-ajax/menu/examples/programming/addremovedisableitemsclientside/defaultcs.aspx

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
0
Johnny
Top achievements
Rank 1
answered on 18 Aug 2010, 12:14 PM
Hi,

I still can´t get this javascript to work. Does anyone have some pointers to give?

Thanks
Johnny
0
Pavlina
Telerik team
answered on 18 Aug 2010, 02:32 PM
Hello Johnny,

Can you provide runnable code illustrating your scenario and the issue? I will check it out and turn back to you with my findings.

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
0
Johnny
Top achievements
Rank 1
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;
        }
    }
}
0
Accepted
Pavlina
Telerik team
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
0
Johnny
Top achievements
Rank 1
answered on 20 Aug 2010, 02:24 PM
Hi Pavlina,

That worked! Just needed to add .click() to get my desired functionality.

Big thanks
Johnny
Tags
Grid
Asked by
Johnny
Top achievements
Rank 1
Answers by
Cori
Top achievements
Rank 2
Johnny
Top achievements
Rank 1
Pavlina
Telerik team
Share this question
or