Radmenu, How to set group height on load on demand

2 posts, 0 answers
  1. jolynice
    jolynice avatar
    17 posts
    Member since:
    Jul 2009

    Posted 28 Sep 2011 Link to this post

    Hi everyone,

    I have a load on demand radmenu, but i don´t know how to set the height for the group dinamicaly, i would like to set the same height example 200px if the height is great than 200px.

    I put the code i use,

    Thanks in advance,

    Jolynice



    default2.aspx

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default2.aspx.cs" Inherits="default2" %><br>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %><br>
    <br>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br>
    <br>
    <html xmlns="http://www.w3.org/1999/xhtml"><br>
    <head runat="server"><br>
        <title></title><br>
    </head><br>
    <body><br>
        <form id="form1" runat="server"><br>
        <div><br>
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager><br>
            <div><br>
                <div><br>
                    Hover a menu item to populate its children from the WCF service.<br>
                </div><br>
            </div>   <br>
            <br>
    <br>
            <br /><br>
    <br>
            <div>            <br>
            <telerik:RadMenu runat="server" ID="RadMenu2"             <br>
                DataSourceID="SqlDataSource1"<br>
                DataTextField="name"<br>
                DataValueField="CategoryId"<br>
                EnableRoundedCorners="true" EnableShadows="true"> <br>
                <WebServiceSettings Path="MenuWcfService.svc" Method="LoadDataCategorias" />                       <br>
                <LoadingStatusTemplate><br>
                    <asp:Image runat="server" ID="LoadingImage" ImageUrl="ajax-loader.gif" ToolTip="Loading..." Width="16px" Height="16px" style="margin-top:8px" /><br>
                </LoadingStatusTemplate><br>
                <DataBindings>                <br>
                    <telerik:RadMenuItemBinding  Depth="0" ExpandMode="WebService" /><br>
                </DataBindings><br>
        <br>
    <br>
            </telerik:RadMenu><br>
    <br>
    <br>
         <asp:SqlDataSource ID="SqlDataSource1" runat="server" <br>
                    SelectCommand="select categoryid,name,parentCategoryid from  dbo.Nop_Category where parentCategoryid = 0" <br>
                    ConnectionString="<%$ ConnectionStrings:ConnectionString %>" <br>
                    SelectCommandType="Text">  <br>
         </asp:SqlDataSource><br>
            </div><br>
    <br>
            <div style="padding-top:80px;"></div><br>
        </div><br>
        </form><br>
    </body><br>
    </html>


    MenuWcfService.svc

    using System;<br>
    using System.Collections.Generic;<br>
    using System.Linq;<br>
    using System.ServiceModel;<br>
    using System.ServiceModel.Activation;<br>
    using Telerik.Web.UI;<br>
    using System.Data.SqlClient;<br>
    using System.Data;<br>
    using System.Configuration;<br>
    <br>
    <br>
    namespace Test<br>
    {<br>
        [ServiceContract(Namespace = "")]<br>
        [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]<br>
        public class MenuWcfService<br>
        {<br>
    <br>
            //1.<br>
            [OperationContract]<br>
            public RadMenuItemData[] LoadDataCategorias(RadMenuItemData item, IDictionary<string, object> context)<br>
            {<br>
                DataTable data = GetChildNodes(item.Value);<br>
                List<RadMenuItemData> result = new List<RadMenuItemData>();<br>
    <br>
                foreach (DataRow row in data.Rows)<br>
                {<br>
                    RadMenuItemData itemData = new RadMenuItemData();<br>
                    itemData.Text = row["name"].ToString();<br>
                    itemData.Value = row["CategoryId"].ToString();<br>
                    itemData.NavigateUrl = "http://www.google.pt";<br>
                    if (Convert.ToInt32(row["ChildrenCount"]) > 0)<br>
                    {<br>
                        itemData.ExpandMode = MenuItemExpandMode.WebService;<br>
                    }<br>
                    result.Add(itemData);<br>
                }<br>
    <br>
                return result.ToArray();<br>
            }<br>
    <br>
            //2<br>
            private static DataTable GetChildNodes(string parentId)<br>
            {<br>
                SqlCommand selectCommand = new SqlCommand(@"select pc1.categoryid,pc1.name,isnull(pc2.childrencount,0) as childrencount<br>
                                                          from dbo.Nop_Category as pc1<br>
                                                          left outer join <br>
                                                            (<br>
                                                                select parentCategoryid,count(*) as childrencount<br>
                                                                from dbo.Nop_Category group by (parentCategoryid)<br>
                                                                )as pc2<br>
                                                          on <br>
                                                          pc1.categoryid = pc2.parentCategoryid<br>
                                                          where pc1.parentCategoryid = @parentId");<br>
    <br>
                selectCommand.Parameters.AddWithValue("parentId", parentId);<br>
                return GetData(selectCommand);<br>
            }<br>
    <br>
            //3<br>
            private static DataTable GetData(SqlCommand selectCommand)<br>
            {<br>
                selectCommand.Connection = new SqlConnection(ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString);<br>
                SqlDataAdapter adapter = new SqlDataAdapter(selectCommand);<br>
    <br>
                DataTable data = new DataTable();<br>
                adapter.Fill(data);<br>
    <br>
                return data;<br>
            }      <br>
        }<br>
    }





  2. Helen
    Admin
    Helen avatar
    1052 posts

    Posted 30 Sep 2011 Link to this post

    Hi,

    The bellow code sets the height of the group dynamically, depending on the items height:

    <telerik:RadMenu ID="Menu1" runat="server" OnClientItemOpened="itemOpened">
    <Items>
        <telerik:RadMenuItem runat="server" Text="Root RadMenuItem1">
            <Items>
                <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 1">
                </telerik:RadMenuItem>
                <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 2">
                </telerik:RadMenuItem>
                <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 3">
                </telerik:RadMenuItem>
                <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 1">
                </telerik:RadMenuItem>
                <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 2">
                </telerik:RadMenuItem>
             </Items>
            <GroupSettings Height="200px" />
        </telerik:RadMenuItem>
        <telerik:RadMenuItem runat="server" Text="Root RadMenuItem2">
        </telerik:RadMenuItem>
        <telerik:RadMenuItem runat="server" Text="Root RadMenuItem3">
        </telerik:RadMenuItem>
     
    </Items>
    </telerik:RadMenu>
     
    <script type="text/javascript">
     
       function itemOpened(sender, args) {
     
           var item = args.get_item();
            
           var childCount = item.get_items().get_count();
           var scrollWrapElement = args.get_item()._getScrollWrapElement();
     
           var groupHeight = item.get_groupSettings().get_height();
     
           var itemHeight = item.get_element().offsetHeight;
     
           itemHeight = childCount * itemHeight;
            
           if (itemHeight < parseInt(groupHeight)) {
     
               scrollWrapElement.style.height = itemHeight + "px";
           }
       }
    </script>

    In your case(load on demand), you should use the OnClientItemPopulated instead of the OnClientItemOpened client-side event.


    Kind regards,
    Helen
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top