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

[Solved] Radmenu, How to set group height on load on demand

1 Answer 255 Views

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

jolynice asked on 28 Sep 2011, 04:50 PM

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" %> 

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><

br>

 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head runat="server"> 

<title></title> 

</head> 

<body> 

<form id="form1" runat="server"> 

<div> 

<telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager> 

<div> 

Hover a menu item to populate its children from the WCF service. 

</div> 

</div> 

 

<br /> 

 

<div> 

<telerik:RadMenu runat="server" ID="RadMenu2"  

DataSourceID="SqlDataSource1" 

DataTextField="name" 

DataValueField="CategoryId" 

EnableRoundedCorners="true" EnableShadows="true"> 

<WebServiceSettings Path="MenuWcfService.svc" Method="LoadDataCategorias" /> 

<LoadingStatusTemplate> 

<asp:Image runat="server" ID="LoadingImage" ImageUrl="ajax-loader.gif" ToolTip="Loading..." Width="16px" Height="16px" style="margin-top:8px" /> 

</LoadingStatusTemplate> 

<DataBindings> 

<telerik:RadMenuItemBinding Depth="0" ExpandMode="WebService" /> 

</DataBindings> 

 

</telerik:RadMenu> 

 

<asp:SqlDataSource ID="SqlDataSource1" runat="server"  

SelectCommand="select categoryid,name,parentCategoryid from dbo.Nop_Category where parentCategoryid = 0" 

ConnectionString="<%$ ConnectionStrings:ConnectionString %>" 

SelectCommandType="Text"> 

</asp:SqlDataSource> 

</div> 

 

<div style="padding-top:80px;"></div> 

</div> 

</form> 

</body> 

</html>

MenuWcfService.svc

using System; 

using System.Collections.Generic; 

using System.Linq; 

using System.ServiceModel; 

using System.ServiceModel.Activation; 

using Telerik.Web.UI; 

using System.Data.SqlClient; 

using System.Data; 

using System.Configuration; 

 

namespace Test 

{ 

[ServiceContract(Namespace = "")] 

[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)] 

public class MenuWcfService 

{ 

 

//1. 

[OperationContract] 

public RadMenuItemData[] LoadDataCategorias(RadMenuItemData item, IDictionary<string, object> context) 

{ 

DataTable data = GetChildNodes(item.Value); 

List<RadMenuItemData> result = new List<RadMenuItemData>(); 

 

foreach (DataRow row in data.Rows) 

{ 

RadMenuItemData itemData = new RadMenuItemData(); 

itemData.Text = row["name"].ToString(); 

itemData.Value = row["CategoryId"].ToString(); 

itemData.NavigateUrl = "http://www.google.pt"; 

if (Convert.ToInt32(row["ChildrenCount"]) > 0) 

{ 

itemData.ExpandMode = MenuItemExpandMode.WebService; 

} 

result.Add(itemData); 

} 

 

return result.ToArray(); 

} 

 

//2 

private static DataTable GetChildNodes(string parentId) 

{ 

SqlCommand selectCommand = new SqlCommand(@"select pc1.categoryid,pc1.name,isnull(pc2.childrencount,0) as childrencount 

from dbo.Nop_Category as pc1 

left outer join 

( 

select parentCategoryid,count(*) as childrencount 

from dbo.Nop_Category group by (parentCategoryid) 

)as pc2 

on 

pc1.categoryid = pc2.parentCategoryid 

where pc1.parentCategoryid = @parentId"); 

 

selectCommand.Parameters.AddWithValue("parentId", parentId); 

return GetData(selectCommand); 

} 

 

//3 

private static DataTable GetData(SqlCommand selectCommand) 

{ 

selectCommand.Connection = new SqlConnection(ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString);<

br>

SqlDataAdapter adapter = new SqlDataAdapter(selectCommand); 

 

DataTable data = new DataTable(); 

adapter.Fill(data); 

 

return data; 

} 

} 

}

1 Answer, 1 is accepted

answered on 30 Sep 2011, 01:53 PM

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