To show this problem, I have rewritten the Telerik Mail Demo default.aspx page to eliminate the Master page (see below). When this is done, the height of RadGrid1 does not get recalculated correctly, and is set to 0 (I checked in the Javascript debugger), making the information in the grid unreadable. I have this problem on a similar setup. A kludge psuedo-fix for the mail demo is to rename RadGrid1 to 'ctl00_ContentPlaceHolder1_ctl00_ContentPlaceHolder2_RadGrid1', which is why it works in your version (the master page content insertion renames the grid). Odd, no? Please advise. Thanks.
-- Default.aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Inbox" Title="Telerik Web Mail Demo - Inbox" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<%@ Register Namespace="HelpDesk" TagPrefix="helpDesk" %>
<!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 id="Head1" runat="server">
<title>Telerik Web Mail Demo</title>
<link href="Styles/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager runat="server" ID="RadScriptManager1">
<Scripts>
<asp:ScriptReference Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
Name="MicrosoftAjax.js"
Path="http://ajax.microsoft.com/ajax/3.5/MicrosoftAjax.js" />
</Scripts>
</telerik:RadScriptManager>
<telerik:RadStyleSheetManager runat="server" ID="RadStyleSheet1" />
<telerik:RadFormDecorator runat="server" ID="RadFormDecorator1" DecoratedControls="Default,Zone" />
<telerik:RadSplitter runat="Server" ID="RadSplitter2" Width="100%" BorderSize="0"
BorderStyle="None" PanesBorderSize="0" Height="100%" Orientation="Horizontal"
VisibleDuringInit="false">
<telerik:RadPane ID="topPane" runat="server" Height="74px">
<div class="header">
<div class="logo"></div>
<div class="skin-chooser">
<label for="ctl00_SkinChooser_Input" class="skinLabel">Skin:</label>
<helpDesk:SkinManager runat="server" ID="RadSkinManager1" ShowChooser="true" Skin="Windows7"
PersistenceKey="Skin" PersistenceMode="Session" />
</div>
</div>
<telerik:RadMenu runat="Server" ID="RadMenu1" EnableShadows="true" EnableRoundedCorners="true"
Style="float: none; position:absolute; top:48px; z-index:3000" Width="100%">
<Items>
<telerik:RadMenuItem runat="server" Text="File">
<Items>
<telerik:RadMenuItem Text="New" Enabled="false" />
<telerik:RadMenuItem Text="Open" Enabled="false" />
<telerik:RadMenuItem IsSeparator="true" />
<telerik:RadMenuItem Text="Save As" Enabled="false" ImageUrl="~/Images/saveas.gif" />
<telerik:RadMenuItem IsSeparator="true" />
<telerik:RadMenuItem Text="Page Setup" Enabled="false" />
<telerik:RadMenuItem Text="Print Preview" Enabled="false" ImageUrl="~/Images/printpreview.gif" />
<telerik:RadMenuItem Text="Print" Enabled="false" ImageUrl="~/Images/print.gif" />
<telerik:RadMenuItem IsSeparator="true" />
<telerik:RadMenuItem Text="Work Offline" Enabled="false" />
<telerik:RadMenuItem IsSeparator="true" />
<telerik:RadMenuItem Text="Exit" Enabled="false" />
</Items>
</telerik:RadMenuItem>
<telerik:RadMenuItem runat="server" Text="Edit">
<Items>
<telerik:RadMenuItem Text="Cut" Enabled="false" ImageUrl="~/Images/cut.gif" />
<telerik:RadMenuItem Text="Copy" Enabled="false" ImageUrl="~/Images/copy.gif" />
<telerik:RadMenuItem Text="Office Clipboard" Enabled="false" ImageUrl="~/Images/office_clip.gif" />
<telerik:RadMenuItem Text="Paste" Enabled="false" ImageUrl="~/Images/paste.gif" />
<telerik:RadMenuItem IsSeparator="true" />
<telerik:RadMenuItem Text="Delete" Enabled="false" ImageUrl="~/Images/delete.gif" />
<telerik:RadMenuItem IsSeparator="true" />
<telerik:RadMenuItem Text="Mark as Read" Enabled="false" ImageUrl="~/Images/mark.gif" />
<telerik:RadMenuItem Text="Mark as Unread" Enabled="false" ImageUrl="~/Images/unread.gif" />
</Items>
</telerik:RadMenuItem>
<telerik:RadMenuItem runat="server" Text="Go">
<Items>
<telerik:RadMenuItem Text="Mail" ImageUrl="~/Images/inbox.gif" NavigateUrl="Default.aspx" />
<telerik:RadMenuItem Text="Calendar" ImageUrl="~/Images/calendar.gif" NavigateUrl="Calendar.aspx" />
<telerik:RadMenuItem Text="Contacts" ImageUrl="~/Images/contacts.gif" NavigateUrl="Contacts.aspx" />
<telerik:RadMenuItem Text="Notes" ImageUrl="~/Images/notes.gif" NavigateUrl="Notes.aspx" />
</Items>
</telerik:RadMenuItem>
<telerik:RadMenuItem Text="Help">
<Items>
<telerik:RadMenuItem Text="Download source code" ImageUrl="~/Images/helpdesk.png" NavigateUrl="http://demos.telerik.com/webmail/source.zip" Target="_blank" />
<telerik:RadMenuItem Text="Download trial" ImageUrl="~/Images/radcontrols.png" NavigateUrl="http://www.telerik.com/account/free-trials.aspx" Target="_blank" />
<telerik:RadMenuItem Text="Browse online help" ImageUrl="~/Images/help.png" NavigateUrl="http://www.telerik.com/help/aspnet-ajax/" Target="_blank" />
</Items>
</telerik:RadMenuItem>
</Items>
</telerik:RadMenu>
</telerik:RadPane>
<telerik:RadPane runat="server" ID="contentPane" Scrolling="none">
<telerik:RadSplitter runat="server" ID="RadSplitter3" BorderStyle="None" PanesBorderSize="0">
<telerik:RadPane runat="Server" ID="leftPane" Width="240px" MinWidth="240" MaxWidth="600" Scrolling="None">
<telerik:RadSplitter runat="server" ID="RadSplitter4" BorderStyle="None" PanesBorderSize="0"
Height="100%" Orientation="Horizontal">
<telerik:RadPane runat="server" ID="topLeftPane">
<telerik:RadAjaxManager runat="server" ID="RadAjaxManager1" OnAjaxRequest="RadAjaxManager1_AjaxRequest">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="RadGrid1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="DetailsView1" LoadingPanelID="RadAjaxLoadingPanel1" />
</UpdatedControls>
</telerik:AjaxSetting>
<telerik:AjaxSetting AjaxControlID="RadTreeView1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
<telerik:AjaxUpdatedControl ControlID="RadToolBar1" />
<telerik:AjaxUpdatedControl ControlID="DetailsView1" />
</UpdatedControls>
</telerik:AjaxSetting>
<telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
<telerik:AjaxUpdatedControl ControlID="DetailsView1" LoadingPanelID="RadAjaxLoadingPanel1" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1">
</telerik:RadAjaxLoadingPanel>
<telerik:RadTreeView runat="Server" ID="RadTreeView1" OnNodeClick="RadTreeView1_NodeClick"
EnableViewState="false">
<Nodes>
<telerik:RadTreeNode Text="John Smith" Expanded="true" ImageUrl="Images/mailbox.gif"
PostBack="false">
<Nodes>
<telerik:RadTreeNode Text="Calendar" ImageUrl="Images/calendar.gif" NavigateUrl="Calendar.aspx" />
<telerik:RadTreeNode Text="Contacts" ImageUrl="Images/contacts.gif" NavigateUrl="Contacts.aspx" />
<telerik:RadTreeNode Text="Inbox" ImageUrl="Images/inbox.gif" Expanded="true" Selected="True">
<Nodes>
<telerik:RadTreeNode Text="AJAX" ImageUrl="Images/inbox.gif" />
<telerik:RadTreeNode Text="Announcements" ImageUrl="Images/inbox.gif" />
<telerik:RadTreeNode Text="OpenAccess ORM" ImageUrl="Images/inbox.gif" />
<telerik:RadTreeNode Text="Silverlight" ImageUrl="Images/inbox.gif" />
<telerik:RadTreeNode Text="WinForms" ImageUrl="Images/inbox.gif" />
<telerik:RadTreeNode Text="WPF" ImageUrl="Images/inbox.gif" />
</Nodes>
</telerik:RadTreeNode>
<telerik:RadTreeNode Text="Notes" ImageUrl="Images/notes.gif" NavigateUrl="Notes.aspx" />
</Nodes>
</telerik:RadTreeNode>
</Nodes>
</telerik:RadTreeView>
</telerik:RadPane>
<telerik:RadSplitBar runat="server" ID="RadSplitBar3" CollapseMode="Backward" EnableResize="false" />
<telerik:RadPane runat="server" ID="bottomLeftPane" Height="120px">
<telerik:RadPanelBar runat="server" ID="RadPanelBar1" Width="100%">
<Items>
<telerik:RadPanelItem Text="Mail" ImageUrl="~/Images/inbox_big.gif" NavigateUrl="Default.aspx" />
<telerik:RadPanelItem Text="Calendar" ImageUrl="~/Images/calendar_big.gif" NavigateUrl="Calendar.aspx" />
<telerik:RadPanelItem Text="Contacts" ImageUrl="~/Images/contacts_big.gif" NavigateUrl="Contacts.aspx" />
<telerik:RadPanelItem Text="Notes" ImageUrl="~/Images/notes_big.gif" NavigateUrl="Notes.aspx" />
</Items>
</telerik:RadPanelBar>
</telerik:RadPane>
</telerik:RadSplitter>
</telerik:RadPane>
<telerik:RadSplitBar runat="server" ID="RadSplitBar2" CollapseMode="Forward" />
<telerik:RadPane runat="Server" ID="rightPane" CssClass="right-pane" Scrolling="None">
<telerik:RadScriptBlock runat="server" ID="RadScriptBlock1">
<script type="text/javascript">
/* <![CDATA[ */
var toolbar;
var grid;
var searchButton;
var ajaxManager;
function pageLoad() {
grid = $find("<%=RadGrid1.ClientID %>");
toolbar = $find("<%= RadToolBar1.ClientID %>");
ajaxManager = $find("<%=RadAjaxManager1.ClientID %>");
if (grid.get_masterTableView().get_selectedItems().length == 0)
toolbar.findButtonByCommandName("reply").disable();
searchButton = toolbar.findButtonByCommandName("doSearch");
$telerik.$(".inbox-search-textbox")
.bind("keypress", function(e) {
searchButton.set_imageUrl("images/search.gif");
searchButton.set_value("search");
});
}
function onKeyPress(sender, args) {
if (args.get_keyCode() == 13) {
args.get_domEvent().stopPropagation();
args.get_domEvent().preventDefault();
performSearch(sender);
return;
}
}
function onButtonClicked(sender, args) {
var commandName = args.get_item().get_commandName();
if (commandName == "doSearch") {
var searchTextBox = sender.findButtonByCommandName("searchText").findControl("RadTextBox1");
if (searchButton.get_value() == "clear") {
searchTextBox.set_value("");
searchButton.set_imageUrl("images/search.gif");
searchButton.set_value("search");
}
performSearch(searchTextBox);
} else if (commandName == "reply") {
window.radopen(null, "Edit");
}
}
function performSearch(searchTextBox) {
if (searchTextBox.get_value()) {
searchButton.set_imageUrl("images/clear.gif");
searchButton.set_value("clear");
}
ajaxManager.ajaxRequest(searchTextBox.get_value());
}
function onGridRowSelected(sender, args) {
toolbar.findButtonByCommandName("reply").enable();
}
function onWindowLoad(sender, args) {
var html = "<br /><br /><br /><hr />" +
"<strong>From:</strong> " + $get("from").innerHTML + "<br />" +
"<strong>Sent:</strong> " + $get("sent").innerHTML + "<br />" +
"<strong>Subject:</strong> " + $get("subject").innerHTML + "<br />" +
$get("message-body").innerHTML;
sender.get_contentFrame().contentWindow.setEditorContent(html);
}
/* ]]> */
</script>
</telerik:RadScriptBlock>
<telerik:RadWindowManager runat="Server" ID="RadWindowManager1" EnableViewState="false">
<Windows>
<telerik:RadWindow runat="server" ID="Edit" NavigateUrl="~/Reply.aspx" OnClientPageLoad="onWindowLoad"
Width="870px" Height="550px" ReloadOnShow="true"
ShowContentDuringLoad="false" Modal="True" Behaviors="Close,Move" VisibleStatusbar="false">
</telerik:RadWindow>
</Windows>
</telerik:RadWindowManager>
<telerik:RadSplitter runat="server" ID="RadSplitter1" Width="100%" BorderSize="0"
BorderStyle="None" PanesBorderSize="0" Height="100%" Orientation="Horizontal">
<telerik:RadPane runat="server" ID="RadPane1" Height="32px" EnableViewState="false" Scrollable="false">
<telerik:RadToolBar runat="server" ID="RadToolBar1" CssClass="inbox-search-toolbar"
OnClientButtonClicked="onButtonClicked" EnableViewState="false">
<Items>
<telerik:RadToolBarButton ImageUrl="~/Images/print.gif" Enabled="false" />
<telerik:RadToolBarButton ImageUrl="~/Images/move.gif" Enabled="false" />
<telerik:RadToolBarButton ImageUrl="~/Images/delete_inbox.gif" Enabled="false" />
<telerik:RadToolBarButton IsSeparator="true" />
<telerik:RadToolBarButton Text="Reply" ImageUrl="~/Images/reply.gif" CommandName="reply" />
<telerik:RadToolBarButton Value="searchTextBoxButton" CommandName="searchText">
<ItemTemplate>
<telerik:RadTextBox
runat="server" ID="RadTextBox1"
EmptyMessage="Search Inbox"
CssClass="inbox-search-textbox" Width="300px"
ClientEvents-OnKeyPress="onKeyPress" />
</ItemTemplate>
</telerik:RadToolBarButton>
<telerik:RadToolBarButton ImageUrl="~/Images/search.gif" Value="search" CommandName="doSearch" />
</Items>
</telerik:RadToolBar>
</telerik:RadPane>
<telerik:RadPane runat="server" ID="RadPane2">
<telerik:RadGrid runat="server" ID="RadGrid1" DataSourceID="LinqDataSource1" AutoGenerateColumns="false"
GridLines="None" Height="100%" BorderWidth="0" AllowSorting="true" Style="outline: none"
ShowGroupPanel="true">
<ClientSettings Scrolling-AllowScroll="True" Scrolling-UseStaticHeaders="true" Selecting-AllowRowSelect="true"
EnablePostBackOnRowClick="true" AllowDragToGroup="true" EnableRowHoverStyle="true"
ClientEvents-OnRowSelected="onGridRowSelected">
</ClientSettings>
<MasterTableView TableLayout="Fixed" GroupLoadMode="Client" DataKeyNames="MessageID"
AdditionalDataFieldNames="Date">
<GroupByExpressions>
<telerik:GridGroupByExpression>
<GroupByFields>
<telerik:GridGroupByField FieldName="DateResult" HeaderValueSeparator=":" SortOrder="Descending" />
</GroupByFields>
<SelectFields>
<telerik:GridGroupByField FieldName="DateResult" HeaderText="Date" FormatString="{0:d}" />
</SelectFields>
</telerik:GridGroupByExpression>
</GroupByExpressions>
<Columns>
<telerik:GridBoundColumn DataField="From" HeaderText="From" HeaderStyle-Width="120px">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Subject" HeaderText="Subject" GroupByExpression="ConversationResult Conversation GROUP BY ConversationResult">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Received" HeaderText="Date" HeaderStyle-Width="150px"
GroupByExpression="DateResult Date GROUP BY DateResult">
</telerik:GridBoundColumn>
<telerik:GridCalculatedColumn UniqueName="Date" DataType="System.DateTime" DataFields="Received"
Expression="Received.Value.Date" HeaderText="Date" Visible="false">
</telerik:GridCalculatedColumn>
<telerik:GridCalculatedColumn UniqueName="Conversation" DataType="System.String"
DataFields="Subject" Expression='Subject.Replace("RE: ", "")' HeaderText="Conversation"
Visible="false">
</telerik:GridCalculatedColumn>
</Columns>
</MasterTableView>
</telerik:RadGrid>
<asp:LinqDataSource ID="LinqDataSource1" runat="server" ContextTypeName="HelpDeskDataContext"
TableName="Messages" Where='Folder == @Folder || @Folder == "Inbox"' OnSelecting="LinqDataSource1_Selecting"
OrderBy="Received DESC">
<WhereParameters>
<asp:ControlParameter ControlID="RadTreeView1" Name="Folder" />
</WhereParameters>
</asp:LinqDataSource>
</telerik:RadPane>
<telerik:RadSplitBar runat="server" ID="RadSplitBar1" />
<telerik:RadPane runat="server" ID="RadPane3" Height="300px">
<asp:DetailsView runat="server" ID="DetailsView1" DataSourceID="LinqDataSource2"
AutoGenerateRows="false" CssClass="message-view" GridLines="None" EnableViewState="false">
<Fields>
<asp:TemplateField ShowHeader="false">
<ItemTemplate>
<ul>
<li><h3 id="subject"><%# Eval("Subject") %></h3></li>
<li><span id="from"><%# Eval("From") %></span></li>
<li>Sent: <span id="sent"><%# Eval("Received") %></span></li>
</ul>
<div id="message-body">
<%# ((string)Eval("Body")).Replace("\n", "<br />") %>
</div>
</ItemTemplate>
</asp:TemplateField>
</Fields>
</asp:DetailsView>
<asp:LinqDataSource runat="server" ID="LinqDataSource2" ContextTypeName="HelpDeskDataContext"
TableName="Messages" Where="MessageID == Convert.ToInt32(@MessageID)">
<WhereParameters>
<asp:ControlParameter ControlID="RadGrid1" Name="MessageID" />
</WhereParameters>
</asp:LinqDataSource>
</telerik:RadPane>
</telerik:RadSplitter>
</telerik:RadPane>
</telerik:RadSplitter>
</telerik:RadPane>
</telerik:RadSplitter>
<asp:PlaceHolder runat="server" ID="AnalyticsPlaceholder">
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-111455-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script');
ga.src = ('https:' == document.location.protocol ? 'https://ssl' :
'http://www') + '.google-analytics.com/ga.js';
ga.setAttribute('async', 'true');
document.documentElement.firstChild.appendChild(ga);
})();
</script>
</asp:PlaceHolder>
</form>
</body>
</html>
-- Default.aspx.cs
using System;
using System.Collections.Generic;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Data.SqlClient;
using System.Linq;
using System.Text.RegularExpressions;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using Telerik.Web.UI;
public partial class Inbox : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
RadPanelItem item = RadPanelBar1.FindItemByUrl(Request.Url.PathAndQuery);
if (item != null)
{
item.Selected = true;
}
// Disabled Google Analytics for everything but telerik.com
AnalyticsPlaceholder.Visible = Request.Url.Host.ToLowerInvariant().Contains("telerik.com");
if (!IsPostBack)
{
RadGrid1.Rebind();
SelectFirstGridRow();
}
}
private void SelectFirstGridRow()
{
GridDataItem firstDataItem = RadGrid1.Items.OfType<GridDataItem>().FirstOrDefault();
if (firstDataItem != null)
firstDataItem.Selected = true;
}
protected void RadTreeView1_NodeClick(object sender, RadTreeNodeEventArgs e)
{
RadGrid1.Rebind();
SelectFirstGridRow();
RadTextBox searchTextBox =
(RadTextBox)((RadToolBarButton) RadToolBar1.FindButtonByCommandName("searchText")).FindControl("RadTextBox1");
searchTextBox.Text = string.Empty;
}
private string searchString;
protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)
{
searchString = e.Argument.ToLower();
RadGrid1.Rebind();
}
protected void LinqDataSource1_Selecting(object sender, LinqDataSourceSelectEventArgs e)
{
if (!string.IsNullOrEmpty(searchString))
{
var context = new HelpDeskDataContext();
e.Result = from message in context.Messages
where message.Subject.ToLower().Contains(searchString) ||
message.Body.ToLower().Contains(searchString) ||
message.From.ToLower().Contains(searchString)
select message;
}
}
}