Filter grid with menu or tabstrip

11 posts, 1 answers
  1. Johnny
    Johnny avatar
    16 posts
    Member since:
    Mar 2009

    Posted 28 Jul 2010 Link to this post

    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
  2. Cori
    Cori avatar
    562 posts
    Member since:
    Jul 2010

    Posted 28 Jul 2010 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Johnny
    Johnny avatar
    16 posts
    Member since:
    Mar 2009

    Posted 29 Jul 2010 Link to this post

    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
  5. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 03 Aug 2010 Link to this post

    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
  6. Johnny
    Johnny avatar
    16 posts
    Member since:
    Mar 2009

    Posted 06 Aug 2010 Link to this post

    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
  7. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 11 Aug 2010 Link to this post

    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
  8. Johnny
    Johnny avatar
    16 posts
    Member since:
    Mar 2009

    Posted 18 Aug 2010 Link to this post

    Hi,

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

    Thanks
    Johnny
  9. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 18 Aug 2010 Link to this post

    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
  10. Johnny
    Johnny avatar
    16 posts
    Member since:
    Mar 2009

    Posted 18 Aug 2010 Link to this post

    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;
            }
        }
    }
  11. Answer
    Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 20 Aug 2010 Link to this post

    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
  12. Johnny
    Johnny avatar
    16 posts
    Member since:
    Mar 2009

    Posted 20 Aug 2010 Link to this post

    Hi Pavlina,

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

    Big thanks
    Johnny
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017