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

Performance is down when using Rad Panel Bar as Menu

3 Answers 126 Views

PanelBar

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

sathish venkat asked on 21 Jan 2011, 01:22 PM

RadSpliter.JPG

Hi,

i am using rad splitter in my application.i have master page and in side that i put splitter control
splitter has two region, menu region and content region. in menu region i am using rad panel bar control for vertical
menu. i am populating the menu items dynamically.after these functionalities done screen is getting too much time to
load.please tell me the solution to improve the performance.

i have attached my sample menu screen shot please refer that

3 Answers, 1 is accepted

answered on 25 Jan 2011, 05:20 PM

Hi Yana ,

i have attached sample application with Rad panel Bar and Splitter
here the issue is when loading the page ,Page width is shrinking .the attached project has no data so it is loading fast
but when the data is more its taking more time to load.please verify My code.

MasterPage:

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

<%@ Register src="WebUserControl.ascx" tagname="WebUserControl" tagprefix="uc1" %>

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

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

<head runat="server">

<title></title>

</head>

<body>

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

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

<div align="center">

<table width="100%" cellpadding="0" cellspacing="0" border="0" style="height: 100%">

<tr>

<td>

</td>

</tr>

<tr valign="top">

<td style="height:100%">

<telerik:radsplitter ID="RadSplitter1" runat="server" Skin="Forest" Width="100%"

OnClientLoad="SplitterLoaded"> <%--"515px"--%>

<telerik:radpane ID="LeftPane" runat="server" Width="22px" Scrolling="none">

<telerik:radslidingzone ID="RadSlidingZone1" runat="server" Width="22px" >

<telerik:radslidingpane ID="RadSlidingPane1" Title="Menu" SkinID="RadSlidingPane"

runat="server" Width="245px" >

<uc1:WebUserControl ID="WebUserControl1" runat="server" />

</telerik:radslidingpane>

</telerik:radslidingzone>

</telerik:radpane>

<telerik:radpane ID="MiddlePane" runat="server">

<asp:ContentPlaceHolder ID="cpChildPage" runat="server">

</asp:ContentPlaceHolder>

</telerik:radpane>

</telerik:radsplitter>

</td>

</tr>

<tr>

<td class="footer" valign="top" align="center">

</td>

</tr>

</table>

<script type="text/javascript">

//Rad Splitter dynamic height

function SplitterLoaded(splitter, arg) {

// debugger;

var pane = splitter.getPaneById('<%= MiddlePane.ClientID %>');

var height = pane.getContentElement().scrollHeight;

if (height < 400)

height = 400;

splitter.set_height(height+100);

pane.set_height(height+25);

}    

</script> 
  
    </div> 
    </form> 
</body> 
</html>

Default.ASPX

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<asp:Content ID="Content1" ContentPlaceHolderID="cpChildPage" Runat="Server">

<telerik:RadScheduler ID="radScheduler1" runat="server" Skin="Forest" DataKeyField="ID" DataSubjectField="Sub" DataStartField="Start"

DataEndField="End" ></telerik:RadScheduler>

</asp:Content>

Default.aspx.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Data;

public partial class Default2 : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

DataTable dt = new DataTable();

dt.Columns.Add("ID");

dt.Columns.Add("Sub");

dt.Columns.Add("Start");

dt.Columns.Add("End");

dt.AcceptChanges();

radScheduler1.DataSource = dt;

radScheduler1.DataBind();

}



UserControl  


<%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl.ascx.cs" 
    Inherits="WebUserControl" %> 
<telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server"> 
</telerik:RadStyleSheetManager> 
<telerik:RadFormDecorator ID="rfdDecorator" runat="server" DecoratedControls="All"
    SkinID="RadFormDecorator" /> 
<table border="0" cellpadding="0" cellspacing="0" width="100%"> 
    <tr> 
        <td valign="top" align="left"> 
            <telerik:RadPanelBar runat="server" ID="RPBMenu" Skin="Forest" ExpandAnimation-Type="None" EnableEmbeddedSkins="False"
                CollapseAnimation-Type="None" Width="220"> 
                <%--OnItemClick="RPBMenu_ItemClick"--%> 
                <CollapseAnimation Type="None"></CollapseAnimation> 
                <ExpandAnimation Type="None"></ExpandAnimation> 
                <Items> 
                    <telerik:RadPanelItem Text="Admin"> 
                        <Items> 
                            <telerik:RadPanelItem Text="Home" /> 
                        </Items> 
                        <Items> 
                            <telerik:RadPanelItem Text="Add Employee" /> 
                        </Items> 
                        <Items> 
                            <telerik:RadPanelItem Text="Account" /> 
                        </Items> 
                    </telerik:RadPanelItem> 
                    <telerik:RadPanelItem Text="Employee"> 
                        <Items> 
                            <telerik:RadPanelItem Text="Home" /> 
                        </Items> 
                        <Items> 
                            <telerik:RadPanelItem Text="Add Employee" /> 
                        </Items> 
                        <Items> 
                            <telerik:RadPanelItem Text="Account" /> 
                        </Items> 
                    </telerik:RadPanelItem> 
                </Items> 
            </telerik:RadPanelBar> 
        </td> 
    </tr> 
</table>