Questions on UI for ASP.NET AJAX Forum

5 answers

97 views

Browser exception while removing menu items using IE 10

Hello,

We've run into a fairly obscure but critical issue when removing menu items client-side using IE 10. This seems to be an IE 10-only bug - does not occur for other versions of IE or Chrome or Firefox I believe. If there is code like this:

var historyItems = historyMenu.get_items();
historyItems.removeAt(0);

and there is only one menu item in the list, IE 10 will throw an exception:

Error: NoModificationAllowedError

inside of Telerik script. This line:

if($telerik.isIE&&s){s.outerHTML="";

Call stack is:

_purgeEmptyGroup
_childRemoved
remove
removeAt

We're using the very latest Telerik release. 2012.3.1205.40

Please advise,

Thank you,

- Mike Oliver

Menu

answered on 13 May 2013

4 answers

171 views

Radgrid with Combobox-checkbox

i need to fill a radgrid with the checked items on the combobox checkbox, but i dont know what event or function can me help to do this.
PLEASE HELP

Grid

answered on 13 May 2013

4 answers

198 views

item backColor overriding hover color

We changed our grid to assign an item Backcolor ( e.Item.BackColor = System.Drawing.Color.Red;) and now the hover color is gone. We do this on itemDataBound.

Before this change, hovering over each row would change the background.
We still have the client settings set: EnablePostBackOnRowClick="True" EnableRowHoverStyle="True"

is there a way so the BackColor does not override the hover, we just want to see the hover color again, I believe it defaulted to light blue.

Thanks

Grid

answered on 13 May 2013

1 answer

133 views

Validating Custom drop down in RadScheduler

Hi,

I want to validate Custom resource fields in radscheduler on client side when i click on save button in insert and update case.

Please help..

Scheduler

answered on 13 May 2013

2 answers

219 views

Create WebServiceSettings for RadAutoCompleteBox programmatically

Hi

I have a requirement to create a RadAutoCompleteBox programmatically.

I have successfully created the RadAutoCompleteBox via code but I am unsure how to set the TextSettings and WebServiceSettings programmatically.

The documentation describes a WebServiceSettings class but I am unsure if it can be used for RadAutoCompleteBox and how to use it.

I also see that a AutoCompleteBoxTextSettings class exists but I am also unsure if it can be used to set the selection mode.

Ultimately I want single selection and for the RadAutoCompleteBox to post back to the web service to get the detail to display.

Thanks.

AutoCompleteBox

answered on 13 May 2013

1 answer

92 views

Skin in config

Hi,

What key do I need to set the Skin globally?

I have tried

<add key="Telerik.Notification" value="Simple" />

<add key="Telerik.RadNotification" value="Simple" />

neither work

cheers

Notification

answered on 13 May 2013

1 answer

205 views

Options to upgrade from ASP.NET 3.5 to 4.5

Hi,
Our application uses Telerik.Web.UI version 2010.1.415.0. It is a .NET 3.5 application.

We like to upgrade our application to .NET 4.5. the code and project is ready. We just hold for Telerik controls.

Is Telerik.Web.UI version 2010.1.415.0. compatible with .NET 4.5?
What is our best option to upgrade from NET35 to .NET 45? ?

Thank you,
Allan

General Discussions

answered on 13 May 2013

3 answers

137 views

[Solved] Error in ajax with grid and dropdown

Hi
In Sharepoint 2010 I created a web part with a dropdown that contain a list of the month and based on the selection some data is shown in a grid. If I don't ajaxify it, it works well. When I work with ajax , if I select first time imediately after the page is shown a month with no data, it show the grid empty, when I select back to a month that has data I get this error
"
Microsoft JScript runtime error: Sys.ArgumentUndefinedException: Value cannot be undefined.
Parameter name: type
".

If imediately after the page is shown I select a month with data and then a month without data and then a month with data i have no erorrs.

How I can fix the error ?

Thank you !
Hans

The code is here:

<%@ Assembly Name="$SharePoint.Project.AssemblyFullName$" %>

<%@ Assembly Name="Microsoft.Web.CommandUI, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%@ Register Tagprefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>

<%@ Import Namespace="Microsoft.SharePoint" %>

<%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="WebPart_EstimatedFinalCostsUserControl.ascx.cs" Inherits="Project_EstimatedFinalCosts.WebPart_EstimatedFinalCosts.WebPart_EstimatedFinalCostsUserControl" %>

<%@ Register Assembly="Telerik.Web.UI, Version=2013.1.417.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4"

Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"

DefaultLoadingPanelID="RadAjaxLoadingPanel1" >

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadGrid1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGrid1"></telerik:AjaxUpdatedControl>

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="RadDropDownYears">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGrid1"></telerik:AjaxUpdatedControl>

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="RadDropDownMonths">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGrid1"></telerik:AjaxUpdatedControl>

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="RadDropDownJobMaster">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGrid1"></telerik:AjaxUpdatedControl>

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" Skin="WebBlue" />

<asp:Panel ID="Panel1" runat="server">

<table style="width: 500px;" >

<tr>

<td>

Current

</td>

<td>

<telerik:RadDropDownList ID="RadDropDownYears" runat="server" Skin="WebBlue" AutoPostBack="True" onselectedindexchanged="RadDropDownYears_SelectedIndexChanged">

</telerik:RadDropDownList>

</td>

<td>

<telerik:RadDropDownList ID="RadDropDownMonths" runat="server" Skin="WebBlue" AutoPostBack="True" onselectedindexchanged="RadDropDownMonths_SelectedIndexChanged">

</telerik:RadDropDownList>

</td>

<td>

<telerik:RadDropDownList ID="RadDropDownJobMaster" runat="server" Skin="WebBlue" AutoPostBack="True" onselectedindexchanged="RadDropDownJobMaster_SelectedIndexChanged" DropDownWidth="500px" DropDownHeight="200px" EnableVirtualScrolling="true">

<ItemTemplate>

<table>

<tr>

<td style="width: 10%">

<%# DataBinder.Eval(Container.DataItem, "JobNo")%>

</td>

<td style="width: 80%">

<%# DataBinder.Eval(Container.DataItem, "JobName")%>

</td>

<td style="width: 10%">

<%# DataBinder.Eval(Container.DataItem, "JobStatus")%>

</td>

</tr>

</table>

</ItemTemplate>

</telerik:RadDropDownList>

</td>

</tr>

</table>

</asp:Panel>

<br />

<telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="False"

CellSpacing="0" GridLines="None" AllowFilteringByColumn="True"

AllowPaging="True" AllowSorting="True" AutoGenerateEditColumn="True" OnUpdateCommand="RadGrid1_UpdateCommand"

OnNeedDataSource="RadGrid1_NeedDataSource" Skin="WebBlue" ShowStatusBar="true" >

<ClientSettings>

<Selecting AllowRowSelect="True" />

</ClientSettings>

<MasterTableView EditMode="EditForms" DataKeyNames="EFCId" CommandItemDisplay="Top" InsertItemPageIndexAction="ShowItemOnCurrentPage" GridLines="None" TableLayout="Auto">

<CommandItemSettings ExportToPdfText="Export to PDF"></CommandItemSettings>

<Columns>

<telerik:GridTemplateColumn HeaderText="Year" ItemStyle-Width="100px">

<ItemTemplate >

<%#DataBinder.Eval(Container.DataItem, "Year")%>

</ItemTemplate>

<EditItemTemplate>

<telerik:RadComboBox runat="server" ID="RadComboBox1" EnableLoadOnDemand="True" OnItemsRequested="RadComboBox1_ItemsRequested"

DataTextField="YearNo" DataValueField="YearNo" Text='<%#DataBinder.Eval(Container.DataItem,"Year")%>' Skin="WebBlue"

MarkFirstMatch="True" >

</telerik:RadComboBox>

</EditItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridBoundColumn AutoPostBackOnFilter="true" CurrentFilterFunction="Contains"

DataField="JobNo" ForceExtractValue="Always" HeaderText="Job No"

SortExpression="JobNo" ItemStyle-Width="120px">

<HeaderStyle Width="120px" />

<ItemStyle Width="120px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn AutoPostBackOnFilter="true" CurrentFilterFunction="Contains"

DataField="JobName" HeaderText="Job Name" SortExpression="JobName" ItemStyle-Width="500px">

<HeaderStyle Width="500px" />

<ItemStyle Width="500px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn AllowFiltering="false"

DataField="EFCAmount" HeaderText="EFC Amount" SortExpression="EFCAmount" ItemStyle-Width="100px">

<HeaderStyle Width="100px" />

<ItemStyle Width="100px" />

</telerik:GridBoundColumn>

</Columns>

<RowIndicatorColumn FilterControlAltText="Filter RowIndicator column">

<HeaderStyle Width="20px"></HeaderStyle>

</RowIndicatorColumn>

<ExpandCollapseColumn Visible="True"

FilterControlAltText="Filter ExpandColumn column" Created="True">

<HeaderStyle Width="20px"></HeaderStyle>

</ExpandCollapseColumn>

<EditFormSettings>

<EditColumn FilterControlAltText="Filter EditCommandColumn column"></EditColumn>

</EditFormSettings>

<PagerStyle PageSizeControlType="RadComboBox"></PagerStyle>

</MasterTableView>

<PagerStyle PageSizeControlType="RadComboBox"></PagerStyle>

<FilterMenu EnableTheming="True">

<CollapseAnimation Duration="200" Type="OutQuint"></CollapseAnimation>

</FilterMenu>

</telerik:RadGrid>

and here it is the c#

using System;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Collections.Generic;

using System.Linq;

using Project_SqlDataLibrary;

using Microsoft.SharePoint.Administration;

using Telerik.Web.UI;

using System.Collections;

namespace Project_EstimatedFinalCosts.WebPart_EstimatedFinalCosts

{

public partial class WebPart_EstimatedFinalCostsUserControl : UserControl

{

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

LoadAndConfigureYearData();

LoadAndConfigureMonthData();

LoadAndConfigureActiveJobData();

}

private void LoadAndConfigureActiveJobData()

{

try

{

int year = RadDropDownYears.SelectedValue == null ? DateTime.Now.Year : Convert.ToInt32(RadDropDownYears.SelectedValue);

int month = RadDropDownMonths.SelectedValue == null ? DateTime.Now.Month : Convert.ToInt32(RadDropDownMonths.SelectedValue);

IEnumerable<EFC_JobMaster> list = SQL_EFC.GetAll_ActiveJobList(year,month,true);

RadDropDownJobMaster.DataSource = list;

RadDropDownJobMaster.DataTextField = "JobName";

RadDropDownJobMaster.DataValueField = "JobNo";

RadDropDownYears.SelectedValue = "0";

RadDropDownJobMaster.DataBind();

}

catch (Exception ex)

{

SPDiagnosticsService.Local.WriteTrace(0, new SPDiagnosticsCategory("Autoreportlinks error: ", TraceSeverity.Unexpected, EventSeverity.Error), TraceSeverity.Unexpected, ex.Message, ex.StackTrace);

}

private void LoadAndConfigureYearData()

{

try

{

IEnumerable<Year> list = SQL_Misc.GetAll_YearsList();

int index = list.FirstOrDefault(x => x.CurrentWorkYear == true).YearNo;

RadDropDownYears.DataSource = list;

RadDropDownYears.DataTextField = "YearNo";

RadDropDownYears.DataValueField = "YearNo";

RadDropDownYears.SelectedValue = index.ToString().Trim();

RadDropDownYears.DataBind();

}

catch (Exception ex)

{

SPDiagnosticsService.Local.WriteTrace(0, new SPDiagnosticsCategory("Autoreportlinks error: ", TraceSeverity.Unexpected, EventSeverity.Error), TraceSeverity.Unexpected, ex.Message, ex.StackTrace);

}

private void LoadAndConfigureMonthData()

{

try

{

IEnumerable<Month> list = SQL_Misc.GetAll_MonthsList();

RadDropDownMonths.DataSource = list;

RadDropDownMonths.DataTextField = "MonthName";

RadDropDownMonths.DataValueField = "MonthNo";

int curMonth = DateTime.Now.Month;

if (curMonth == 1)

curMonth = 12;

else

curMonth--;

RadDropDownMonths.SelectedValue = curMonth.ToString().Trim();

RadDropDownMonths.DataBind();

}

catch (Exception ex)

{

SPDiagnosticsService.Local.WriteTrace(0, new SPDiagnosticsCategory("Autoreportlinks error: ", TraceSeverity.Unexpected, EventSeverity.Error), TraceSeverity.Unexpected, ex.Message, ex.StackTrace);

}

#region "Events"

protected void RadGrid1_UpdateCommand(object source, GridCommandEventArgs e)

{

var editableItem = ((GridEditableItem)e.Item);

var efcId = (int)editableItem.GetDataKeyValue("EFCId"); //you have the primary key value to required for update

//get the value of the combobox

GridEditFormItem formItem = e.Item as GridEditFormItem;

var x = formItem.FindControl("RadComboBox1");

RadComboBox dd = x as RadComboBox;

int comboVal = Convert.ToInt32(dd.SelectedValue);

////this gets the other values from text input in values variable

Hashtable values = new Hashtable();

editableItem.ExtractValues(values);

}

protected void RadGrid1_NeedDataSource(object source, Telerik.Web.UI.GridNeedDataSourceEventArgs e)

{

try

{

int year = RadDropDownYears.SelectedValue == null ? DateTime.Now.Year : Convert.ToInt32(RadDropDownYears.SelectedValue);

int month = RadDropDownMonths.SelectedValue == null ? DateTime.Now.Month : Convert.ToInt32(RadDropDownMonths.SelectedValue);

string jobno = String.Empty;

RadGrid1.DataSource = SQL_EFC.GetAll_List(year, month, jobno);

}

catch (Exception ex)

{

SPDiagnosticsService.Local.WriteTrace(0, new SPDiagnosticsCategory("Autoreportlinks error: ", TraceSeverity.Unexpected, EventSeverity.Error), TraceSeverity.Unexpected, ex.Message, ex.StackTrace);

}

protected void RadDropDownJobMaster_SelectedIndexChanged(object sender, DropDownListEventArgs e)

{

try

{

RadGrid1.Rebind();

}

catch (Exception ex)

{

SPDiagnosticsService.Local.WriteTrace(0, new SPDiagnosticsCategory("Autoreportlinks error: ", TraceSeverity.Unexpected, EventSeverity.Error), TraceSeverity.Unexpected, ex.Message, ex.StackTrace);

}

protected void RadDropDownYears_SelectedIndexChanged(object sender, DropDownListEventArgs e)

{

try

{

RadGrid1.Rebind();

}

catch (Exception ex)

{

SPDiagnosticsService.Local.WriteTrace(0, new SPDiagnosticsCategory("Autoreportlinks error: ", TraceSeverity.Unexpected, EventSeverity.Error), TraceSeverity.Unexpected, ex.Message, ex.StackTrace);

}

protected void RadDropDownMonths_SelectedIndexChanged(object sender, DropDownListEventArgs e)

{

try

{

RadGrid1.Rebind();

}

catch (Exception ex)

{

SPDiagnosticsService.Local.WriteTrace(0, new SPDiagnosticsCategory("Autoreportlinks error: ", TraceSeverity.Unexpected, EventSeverity.Error), TraceSeverity.Unexpected, ex.Message, ex.StackTrace);

}

protected void RadComboBox1_ItemsRequested(object sender, RadComboBoxItemsRequestedEventArgs e)

{

RadComboBox comboBox = (RadComboBox)sender;

comboBox.Items.Clear();

IEnumerable<Year> list = SQL_Misc.GetAll_YearsList();

comboBox.DataSource = list;

//comboBox.DataTextField = "YearNo";

//comboBox.DataValueField = "YearNo";

comboBox.DataBind();

}

#endregion

}

Ajax

answered on 13 May 2013

1 answer

113 views

ContentFilters=None not working as expected

Hello,

Given this C# code:

HtmlContentEditor1.Content = @"<html><body>

<img height=""0"" width=""0"">

<a href=""http://www.telerik.com"" style=""color: #9a9a9a;"">Telerik</a><br>

</body></html>";

and this in the .aspx file:

<telerik:RadEditor runat="server" ID="HtmlContentEditor1"

EditModes="Html" Width="600" ContentFilters="None" />

we are seeing the HTML content get rewritten as:

<html><head></head><body>

<img width="0" height="0">

<a style="color: rgb(154, 154, 154);" href="http://www.telerik.com">Telerik</a><br>

</body></html>

and when the ContentFilters="None" property is removed altogether, the HTML content gets rewritten as:

<html>

<head>

</head>

<body>

<img alt="" width="0" height="0" />

<a href="http://www.telerik.com" style="color: #9a9a9a;">Telerik</a><br />

</body>

</html>

This is pretty unusual behaviour -- in the first case it reordered attributes and rewrote inline styles.... and in the second case it reordered attributes and added one in the <img> tag, but left the <a> tag alone.

The HTML rewriting only seems to happen when initializing the control after setting the Content property. If I paste content into the HTML tab, then post the control back to the server, the content is unaltered.

We'd like to be able to use RadEditor for a project but it is critical that the editor not change the HTML content at all. Is this possible?

I can provide a sample project but it's larger than the 2MB upload limit due to it including the controls DLL itself. Controls version is 2013.1.319.40.

Any insight into this issue would be appreciated, thanks.

Warren.

Editor

answered on 13 May 2013

1 answer

133 views

Issue with RadRibbonBar Spacing

Hello,

I have an issue with the spacing of the RadRibbonBar...see the video below. What I need to do is remove the Red Area. Please note the color is simply used for contrast.
Demo of Issue

ASPX

<div id="dsxWeb">

<div id="ribbonBar">

<div class="autoSpacer">

<telerik:RadRibbonBar ID="dsxWebRibbon" runat="server" EnableQuickAccessToolbar="true" EnableMinimizing="true">

<ApplicationMenu Text="File">

<Items>

<telerik:RibbonBarApplicationMenuItem Text="New" ImageUrl="images/icon_new16.png"></telerik:RibbonBarApplicationMenuItem>

<telerik:RibbonBarApplicationMenuItem Text="Open" ImageUrl="images/icon_open16.png">

</telerik:RibbonBarApplicationMenuItem>

<telerik:RibbonBarApplicationMenuItem Text="Save" ImageUrl="images/icon_save16.png">

</telerik:RibbonBarApplicationMenuItem>

<telerik:RibbonBarApplicationMenuItem Text="Save As" ImageUrl="images/icon_saveas16.png">

</telerik:RibbonBarApplicationMenuItem>

<telerik:RibbonBarApplicationMenuItem Text="Log Out" ImageUrl="images/icon_logout16.png">

</telerik:RibbonBarApplicationMenuItem>

</Items>

</ApplicationMenu>

<Tabs>

<telerik:RibbonBarTab Text="Home">

<telerik:RibbonBarGroup Text="DSX Home">

<Items>

<telerik:RibbonBarButton Size="Large" Text="Open Home" ImageUrl="images/dashboard.png" CommandName="opendc" />

</Items>

</telerik:RibbonBarGroup>

<telerik:RibbonBarGroup Text="Workspace">

<Items>

<telerik:RibbonBarMenu QuickAccess="Active" Size="Large" Text="File" ImageUrlLarge="images/icon_save.png" ImageUrl="images/icon_save16.png">

<Items>

<telerik:RibbonBarMenuItem Text="Save" ImageUrl="images/icon_save16.png"></telerik:RibbonBarMenuItem>

<telerik:RibbonBarMenuItem Text="Save As" ImageUrl="images/icon_saveas16.png"></telerik:RibbonBarMenuItem>

<telerik:RibbonBarMenuItem Text="New" ImageUrl="images/icon_new16.png"></telerik:RibbonBarMenuItem>

<telerik:RibbonBarMenuItem Text="Open" ImageUrl="images/icon_open16.png"></telerik:RibbonBarMenuItem>

<telerik:RibbonBarMenuItem Text="Log Out" ImageUrl="images/icon_logout16.png"></telerik:RibbonBarMenuItem>

</Items>

</telerik:RibbonBarMenu>

<telerik:RibbonBarMenu QuickAccess="Active" Size="Large" Text="Navigation" ImageUrlLarge="images/home_navigation.png" ImageUrl="images/home_navigation16.png">

<Items>

<telerik:RibbonBarMenuItem Text="Left" ImageUrl="images/navigation_left.png" CommandName="choosenav" CommandArgument="navigationLeft"></telerik:RibbonBarMenuItem>

<telerik:RibbonBarMenuItem Text="Top" ImageUrl="images/navigation_top.png" CommandName="choosenav" CommandArgument="navigationTop"></telerik:RibbonBarMenuItem>

<telerik:RibbonBarMenuItem Text="Right" ImageUrl="images/navigation_right.png" CommandName="choosenav" CommandArgument="navigationRight"></telerik:RibbonBarMenuItem>

<telerik:RibbonBarMenuItem Text="Bottom" ImageUrl="images/navigation_bottom.png" CommandName="choosenav" CommandArgument="navigationBottom"></telerik:RibbonBarMenuItem>

</Items>

</telerik:RibbonBarMenu>

<telerik:RibbonBarButton QuickAccess="Active" Size="Large" Text="Refresh" ImageUrl="images/home_refresh.png" />

</Items>

</telerik:RibbonBarGroup>

</telerik:RibbonBarTab>

<telerik:RibbonBarTab Text="Data">

<telerik:RibbonBarGroup Text="Database">

<Items>

<telerik:RibbonBarButton Size="Large" Text="Restore" ImageUrl="images/restoredb.png"/>

<telerik:RibbonBarButton Size="Large" Text="Sandbox" ImageUrl="images/sandboxdb.png" />

</Items>

</telerik:RibbonBarGroup>

<telerik:RibbonBarGroup Text="Record">

<Items>

<telerik:RibbonBarButton Size="Large" Text="New" ImageUrl="images/addrecord.png" />

<telerik:RibbonBarButton Size="Large" Text="Delete" ImageUrl="images/deleterecord.png" />

<telerik:RibbonBarButton Size="Large" Text="Zero Data Fields" ImageUrl="images/zerorecord.png" />

</Items>

</telerik:RibbonBarGroup>

</telerik:RibbonBarTab>

<telerik:RibbonBarTab Text="Reports">

<telerik:RibbonBarGroup Text="Standard">

<Items>

<telerik:RibbonBarButton Size="Large" Text="Fiscal" ImageUrl="images/report_fiscal.png" />

<telerik:RibbonBarButton Size="Large" Text="Item Master" ImageUrl="images/report_itemmaster.png" />

<telerik:RibbonBarButton Size="Large" Text="History-Forecast" ImageUrl="images/report_historyforecast.png" />

<telerik:RibbonBarButton Size="Large" Text="Shortage" ImageUrl="images/report_shortage.png" />

<telerik:RibbonBarButton Size="Large" Text="ABC" ImageUrl="images/report_abc.png" />

<telerik:RibbonBarButton Size="Large" Text="Performance" ImageUrl="images/report_performance.png" />

<telerik:RibbonBarButton Size="Large" Text="Performance Summary" ImageUrl="images/report_performance.png" />

<telerik:RibbonBarButton Size="Large" Text="Basic Inventory" ImageUrl="images/report_basicinventory.png" />

<telerik:RibbonBarButton Size="Large" Text="Valuation Inventory" ImageUrl="images/report_valuationinventory.png" />

</Items>

</telerik:RibbonBarGroup>

</telerik:RibbonBarTab>

<telerik:RibbonBarTab Text="Process">

<telerik:RibbonBarGroup Text="Convert">

<Items>

<telerik:RibbonBarButton Size="Large" Text="Currency" ImageUrl="images/convert_currency.png" />

<telerik:RibbonBarButton Size="Large" Text="UOM" ImageUrl="images/convert_uom.png" />

</Items>

</telerik:RibbonBarGroup>

<telerik:RibbonBarGroup Text="Forecast Mangement">

<Items>

<telerik:RibbonBarButton Size="Large" Text="Forecasting" ImageUrl="images/fm_forecasting.png" />

<telerik:RibbonBarButton Size="Large" Text="Performance" ImageUrl="images/fm_performance.png" />

<telerik:RibbonBarButton Size="Large" Text="ABC" ImageUrl="images/fm_abc.png" />

<telerik:RibbonBarButton Size="Large" Text="Aggregation" ImageUrl="images/fm_aggregation.png" />

<telerik:RibbonBarButton Size="Large" Text="BOM" ImageUrl="images/fm_bom.png" />

<telerik:RibbonBarButton Size="Large" Text="Inventory" ImageUrl="images/fm_inventory.png" />

<telerik:RibbonBarButton Size="Large" Text="Promotions" ImageUrl="images/fm_promotions.png" />

</Items>

</telerik:RibbonBarGroup>

</telerik:RibbonBarTab>

<telerik:RibbonBarTab Text="Create">

<telerik:RibbonBarGroup Text="Panels">

<Items>

<telerik:RibbonBarSplitButton ID="createDescriptive" Size="Large" Text="Descriptive" ImageUrlLarge ="images/widgets_descriptive.png">

<Buttons>

<telerik:RibbonBarButton Text='Edit/Create Descriptive Panels' CommandName='managewidgets' CommandArgument='0' />

<telerik:RibbonBarButton Text='Description Panel #1' CommandName='descriptionpanel' CommandArgument='1' />

</Buttons>

</telerik:RibbonBarSplitButton>

<telerik:RibbonBarSplitButton ID="createAggregation" Size="Large" Text="Aggregation" ImageUrlLarge="images/widgets_aggregation.png">

<Buttons>

<telerik:RibbonBarButton Text='Edit/Create Aggregation Panels' CommandName='managewidgets' CommandArgument='1' />

</Buttons>

</telerik:RibbonBarSplitButton>

<telerik:RibbonBarSplitButton ID="createSpreadsheets" Size="Large" Text="Spreadsheets" ImageUrlLarge="images/widgets_spreadsheets.png" CommandName="managespreadsheets">

<Buttons>

<telerik:RibbonBarButton Text='Edit/Create Spreadsheet Panels' CommandName='managewidgets' CommandArgument='2' />

</Buttons>

</telerik:RibbonBarSplitButton>

<telerik:RibbonBarSplitButton ID="createCharts" Size="Large" Text="Charts" ImageUrlLarge="images/widgets_charts.png" CommandName="managecharts">

<Buttons>

<telerik:RibbonBarButton Text='Edit/Create Chart Panels' CommandName='managewidgets' CommandArgument='3' />

</Buttons>

</telerik:RibbonBarSplitButton>

<telerik:RibbonBarSplitButton ID="createDashboard" Size="Large" Text="Dashboard" ImageUrlLarge="images/widgets_dashboard.png" CommandName="managedashboard">

<Buttons>

<telerik:RibbonBarButton Text='Edit/Create Dashboard Panels' CommandName='managewidgets' CommandArgument='4' />

</Buttons>

</telerik:RibbonBarSplitButton>

</Items>

</telerik:RibbonBarGroup>

<telerik:RibbonBarGroup Text="Builders">

<Items>

<telerik:RibbonBarButton Size="Large" Text="Curves" ImageUrl="images/builders_curves.png" />

<telerik:RibbonBarButton Size="Large" Text="Calendars" ImageUrl="images/builders_calendars.png" />

<telerik:RibbonBarButton Size="Large" Text="Ranges" ImageUrl="images/builders_ranges.png" />

<telerik:RibbonBarButton Size="Large" Text="Closed Day Calendars" ImageUrl="images/builders_closeddaycalendars.png" />

<telerik:RibbonBarButton Size="Large" Text="APS Refresh" ImageUrl="images/builders_apsrefresh.png" />

</Items>

</telerik:RibbonBarGroup>

</telerik:RibbonBarTab>

<telerik:RibbonBarTab Text="Admin">

<telerik:RibbonBarGroup Text="Security">

<Items>

<telerik:RibbonBarButton Size="Large" Text="Users" ImageUrl="images/security_users.png" />

<telerik:RibbonBarButton Size="Large" Text="Roles" ImageUrl="images/security_roles.png" />

</Items>

</telerik:RibbonBarGroup>

<telerik:RibbonBarGroup Text="DBA">

<Items>

<telerik:RibbonBarButton Size="Large" Text="Supersession" ImageUrl="images/dba_supersession.png" />

<telerik:RibbonBarButton Size="Large" Text="Batch Builder" ImageUrl="images/dba_batchbuilder.png" />

<telerik:RibbonBarButton Size="Large" Text="Global Changes" ImageUrl="images/dba_globalchanges.png" />

<telerik:RibbonBarButton Size="Large" Text="Delete Records" ImageUrl="images/dba_deleterecords.png" />

<telerik:RibbonBarButton Size="Large" Text="Field Mangement" ImageUrl="images/dba_fieldmanagement.png" />

</Items>

</telerik:RibbonBarGroup>

</telerik:RibbonBarTab>

</Tabs>

</telerik:RadRibbonBar>

</div>

<div id="mainContent">

<div class="autoSpacer">

<telerik:RadSplitter ID="RadSplitter1" runat="server" Width="100%" Height="100%">

<telerik:RadPane ID="navigationPane" runat="server" Width="150">

Navigation

</telerik:RadPane>

<telerik:RadSplitBar ID="RadSplitbar1" runat="server" CollapseMode="Both">

</telerik:RadSplitBar>

<telerik:RadPane ID="contentPane" runat="server">

Panels

</telerik:RadPane>

</telerik:RadSplitter>

</div>

<div id="statusBar">

<div class="autoSpacer">

Status Bar

</div>

CSS Used:

#dsxWeb

{

position: absolute;

display: table;

top:0px;

left:0px;

height: 100%;

width: 100%;

background-color: #ffffff;

}

#ribbonBar

{

display: table-row;

background-color: Red;

}

#dsxWebRibbon

{

padding: 0px;

}

#mainContent

{

display: table-row;

background-color: Yellow;

}

#statusBar

{

display: table-row;

width: 100%;

height: 40px;

background-color: #3399FF;

}

.autoSpacer

{

display: table-cell;

vertical-align: top;

}

Any help would be great.

Michael

RibbonBar

answered on 13 May 2013