Hi:
I have a Grid displayed within a RadWindow. White space is showing between the Item portion of the MasterTable and the Footer portion. I've never seen this before and am a bit surprised. The codes on the aspx page (hosted within the radWindow) is quite simple. Here is the main portion of it:
| <div id="ContentArea"> |
| <table border="0" cellpadding="0" cellspacing="0" style="background-color:white;width:740px;"> |
| <tr> |
| <td class="SectionHdr" style="width:640px;"> |
| <asp:Label ID="LblHeader" Text="Viewing Question Template Report Levels:" runat="server"></asp:Label> |
| </td> |
| <td style="width:100px;padding-left:10px;padding-top:2px;padding-bottom:5px;padding-right:10px;text-align:right;vertical-align:top;"> |
| <asp:LinkButton ID="LnkBtnDone" Visible="false" Font-Size="10pt" Text="Done" OnClick="LnkBtnDone_Clicked" runat="server" /> |
| </td> |
| </tr> |
| </table> |
| <table cellpadding="0" cellspacing="0" border="0" style="width:740px;"> |
| <tr> |
| <td style="padding-top:10px;padding-left:5px;padding-right:5px;text-align:center;vertical-align:top;width:100%;"> |
| <telerik:RadGrid |
| id="RdG" |
| Width="360px" |
| AllowMultiRowSelection="false" |
| OnNeedDataSource="RdG_NeedDataSource" |
| OnItemDataBound="RdG_ItemDataBound" |
| OnPreRender="RdG_PreRender" |
| AllowPaging="false" |
| AllowSorting="false" |
| Height="450px" |
| ShowStatusBar="false" |
| ShowFooter="true" |
| AutoGenerateColumns="false" |
| Skin="WebBlue" |
| runat="server"> |
| <ClientSettings ReorderColumnsOnClient="false" |
| AllowDragToGroup="false" |
| EnablePostBackOnRowClick="false" |
| AllowColumnsReorder="false"> |
| <Scrolling AllowScroll="true" |
| UseStaticHeaders="true" |
| SaveScrollPosition="true" |
| ScrollHeight="450px" /> |
| <ClientEvents OnGridCreated="GetRdGGrid" /> |
| </ClientSettings> |
| <MasterTableView |
| DataKeyNames="TJCommFYr_RowID, TSFYrRowID, TJFYrQTmplt_RowID, ADate, QTCode, OTypeSpecified" |
| AutoGenerateColumns="False" |
| AllowMultiColumnSorting="False" |
| GridLines="Vertical" |
| TableLayout="Fixed" |
| width="345px" CommandItemDisplay="None" |
| EnableNoRecordsTemplate="true" |
| EditMode="InPlace" |
| Name="MainGrid"> |
| <NoRecordsTemplate> |
| <div>No records found.</div> |
| </NoRecordsTemplate> |
| <Columns> |
| <telerik:GridEditCommandColumn |
| ButtonType="ImageButton" |
| UniqueName="EditCommandColumn"> |
| <HeaderStyle Width="10%" HorizontalAlign="Left" /> |
| <ItemStyle Width="10%" HorizontalAlign="Left" CssClass="MyImageButton" /> |
| </telerik:GridEditCommandColumn> |
| <telerik:GridTemplateColumn UniqueName="TColADate" SortExpression="TJCommFYrASource_ADate" HeaderText="Dates"> |
| <HeaderStyle Width="70%" HorizontalAlign="Left"></HeaderStyle> |
| <ItemStyle Width="70%" HorizontalAlign="Left" VerticalAlign="Top" /> |
| <FooterStyle Width="70%" HorizontalAlign="Left" VerticalAlign="Top" /> |
| <ItemTemplate> |
| <asp:Label ID="LblADate" Text='<%# Eval("ADate") %>' runat="server"></asp:Label> |
| </ItemTemplate> |
| <EditItemTemplate> |
| <asp:TextBox ID="TB_ADate" Text='<%# Bind("ADate") %>' MaxLength="8" runat="server"></asp:TextBox> |
| </EditItemTemplate> |
| <FooterTemplate> |
| <asp:TextBox ID="TB_ADate_New" MaxLength="8" runat="server"></asp:TextBox> |
| </FooterTemplate> |
| </telerik:GridTemplateColumn> |
| <telerik:GridTemplateColumn UniqueName="TColQTmpltAction"> |
| <HeaderStyle Width="20%" HorizontalAlign="center"></HeaderStyle> |
| <ItemStyle Width="20%" HorizontalAlign="center" /> |
| <FooterStyle Width="20%" HorizontalAlign="center" /> |
| <HeaderTemplate> |
| Actions |
| </HeaderTemplate> |
| <ItemTemplate> |
| <asp:ImageButton ID="ImgBtn_Update" |
| ImageUrl="../Images/Save.png" |
| OnCommand="Update_ASource" |
| CommandName="CmdUpdateASource" |
| CommandArgument='<%# Eval("TJFYrQTmplt_RowID")%>' |
| AlternateText="Update" |
| runat="server" /> |
| |
| <asp:ImageButton ID="ImgBtn_Delete" |
| ImageUrl="../Images/Delete.png" |
| OnCommand="Delete_ASource" |
| CommandName = "CmdDeleteASource" |
| CommandArgument='<%# Eval("TJFYrQTmplt_RowID")%>' |
| AlternateText="Update" |
| runat="server" /> |
| </ItemTemplate> |
| <FooterTemplate> |
| <asp:ImageButton ID="ImgBtn_Add" |
| ImageUrl="../Images/Add.png" |
| CommandName = "CmdAddNewASource" |
| OnCommand="AddNew_ASource" |
| AlternateText="Add" |
| runat="server" /> |
| </FooterTemplate> |
| </telerik:GridTemplateColumn> |
| </Columns> |
| </MasterTableView> |
| </telerik:RadGrid> |
| </td> |
| </tr> |
| </table> |
| </div> |
I would like to post a picture of how the grid is displayed. But unfortunately, I can't seem to find a mechanism to paste a picture to a thread within this forum. I'm hoping that others may have experienced similar issue and could lend me a hand on how to get rid of the white space. . . .
Thanks.
| OnClientLoaded="InitDemoSlider" |
| OnClientValueChanged="HandleClientValueChanged" |
What’s New:
| <%` Control Language="C#" AutoEventWireup="true" CodeFile="ucTestGrid.ascx.cs" Inherits="UserControls_ucTestGrid" %> |
| <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("FirstName") %>' TabIndex="1" /> |
| <asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("LastName") %>' TabIndex="2" /> |
| <asp:button id="btnUpdate" text="Update" runat="server" CommandName="Update" /> |
| <asp:button id="btnInsert" text="Insert" runat="server" CommandName="PerformInsert" /> |
| <asp:button id="btnCancel" text="Cancel" runat="server" causesvalidation="False" commandname="Cancel" /> |
| <%@ Page Language="C#" AutoEventWireup="true" CodeFile="perform.aspx.cs" Inherits="perform" %> | |
| <%@ 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"> | |
| <html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%"> | |
| <head runat="server"> | |
| <title>Activity Criteria</title> | |
| </head> | |
| <body scroll="no"> | |
| <form id="form1" runat="server" style="height: 100%"> | |
| <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> | |
| </telerik:RadScriptManager> | |
| <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1"> | |
| <AjaxSettings> | |
| <telerik:AjaxSetting AjaxControlID="RadTreeView1"> | |
| <UpdatedControls> | |
| <telerik:AjaxUpdatedControl ControlID="RadSplitter1" /> | |
| </UpdatedControls> | |
| </telerik:AjaxSetting> | |
| </AjaxSettings> | |
| </telerik:RadAjaxManager> | |
| <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server"> | |
| <img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading1.gif") %>' | |
| style="border: 0px;" /> | |
| </telerik:RadAjaxLoadingPanel> | |
| <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"> | |
| <script type="text/javascript"> | |
| function GetRadWindow() | |
| { | |
| var oWindow = null; | |
| if (window.radWindow) oWindow = window.radWindow; | |
| else if (window.frameElement.radWindow) oWindow = window.frameElement.radWindow; | |
| return oWindow; | |
| } | |
| // function called in order to close a window | |
| function closeRadWindow(windowname) | |
| { | |
| // close parent of this window | |
| GetRadWindow().BrowserWindow.closeRadWindow(windowname); | |
| } | |
| // calls a function on the parent form to close this window | |
| function CloseMe() | |
| { | |
| GetRadWindow().BrowserWindow.closeRadWindow("perform"); | |
| } | |
| </script> | |
| </telerik:RadCodeBlock> | |
| <telerik:RadSplitter ID="RadSplitter2" runat="server" Orientation="Horizontal" Height="100%" | |
| Width="100%" FullScreenMode="true"> | |
| <telerik:RadPane ID="RadPane4" runat="server" Scrolling="None"> | |
| <telerik:RadSplitter ID="RadSplitter1" runat="server" Items-Capacity="0" Orientation="Vertical" | |
| ResizeMode="AdjacentPane" SplitBarsSize="" Width="100%"> | |
| <telerik:RadPane ID="rpFolders" runat="server" Width="140"> | |
| <telerik:RadTreeView ID="RadTreeView1" runat="server" OnNodeClick="RadTreeView1_NodeClick" | |
| AllowNodeEditing="True" AccessKey="T" EnableDragAndDrop="False"> | |
| <CollapseAnimation Duration="100" Type="OutQuint" /> | |
| <ExpandAnimation Duration="100" Type="OutQuart" /> | |
| </telerik:RadTreeView> | |
| </telerik:RadPane> | |
| <telerik:RadSplitBar ID="RadSplitBar1" runat="server" /> | |
| <telerik:RadPane ID="rpMainContent" runat="server" CssClass="pm_paneContent"> | |
| <table cellspacing="0" cellpadding="4" width="100%" border="0" class="pm_tableDetail"> | |
| <tr> | |
| <td> | |
| <div id="divComment" class="pm_ContentBorder"> | |
| <table width="100%" border="0" cellspacing="2" cellpadding="0"> | |
| <tr> | |
| <td valign="top"> | |
| <telerik:RadTextBox ID="RadTextBox1" runat="server" OnTextChanged="RadTextBox1_TextChanged" | |
| Rows="12" SelectionOnFocus="CaretToEnd" TextMode="MultiLine" Width="94%" EnableEmbeddedSkins="false" | |
| AutoPostBack="true" CssClass="pm_fldText" MaxLength="100000"> | |
| </telerik:RadTextBox> | |
| <%-- <asp:TextBox ID="txtCommets" runat="server" CssClass="pm_fldText" Rows="10" Style="width: 99%" | |
| AutoPostBack="true" TextMode="MultiLine" OnTextChanged="RadTextBox1_TextChanged"></asp:TextBox> | |
| --%> </td> | |
| </tr> | |
| </table> | |
| </div> | |
| </td> | |
| </tr> | |
| </table> | |
| </telerik:RadPane> | |
| </telerik:RadSplitter> | |
| </telerik:RadPane> | |
| <telerik:RadPane ID="RadPane3" runat="server" Height="37px" Scrolling="None"> | |
| <div class="CenteredToolBar"> | |
| <telerik:RadToolBar ID="RadToolBar1" runat="server" SkinID="submitBar" OnButtonClick="RadToolBar1_ButtonClick"> | |
| <CollapseAnimation Duration="200" Type="OutQuint" /> | |
| </telerik:RadToolBar> | |
| </div> | |
| </telerik:RadPane> | |
| </telerik:RadSplitter> | |
| </form> | |
| </body> | |
| </html> | |
using
System;
using
System.Collections.Generic;
using
System.Data;
using
System.Web.UI;
using
System.Web.UI.WebControls;
using
Telerik.Web.UI;
namespace
ITemplateTest
{
public partial class _Default : Page
{
private bool isInserting = false;
protected void Page_Load(object sender, EventArgs e)
{
var dict = new DataTable();
dict.Columns.Add(
"Region");
dict.Rows.Add(
"Region1");
dict.Rows.Add(
"Region2");
TestGrid.DataSource = dict;
TestGrid.DataBind();
}
protected void TestGrid_ItemCommand(object source, GridCommandEventArgs e)
{
switch (e.CommandName)
{
case RadGrid.InitInsertCommandName:
var dateTemplate = new DatePickerTemplate();
var dateColumn = new GridTemplateColumn { EditItemTemplate = dateTemplate, HeaderText = "Test Date" };
TestGrid.Columns.AddAt(TestGrid.Columns.Count, dateColumn);
var comboTemplate = new ComboBoxTemplate();
var comboColumn = new GridTemplateColumn { EditItemTemplate = comboTemplate, HeaderText = "Test Combo" };
TestGrid.Columns.AddAt(TestGrid.Columns.Count, comboColumn);
TestGrid.ShowHeader =
false;
isInserting =
true;
break;
case RadGrid.CancelCommandName:
isInserting =
false;
TestGrid.Columns.RemoveAt(1);
TestGrid.ShowHeader =
true;
break;
}
}
protected void TestGrid_ItemDataBound(object sender, GridItemEventArgs e)
{
if (e.Item == null) return;
if (isInserting && e.Item is GridDataItem)
{
//Merge the cells that have been inserted with the name cell.
var numOfRequired = 1;
e.Item.Cells[0].ColumnSpan = numOfRequired + 1;
for (var i = 1; i <= numOfRequired; i++)
{
e.Item.Cells.RemoveAt(e.Item.Cells.Count - 1);
}
}
if (!isInserting && e.Item is GridDataItem)
{
//Set the column span to the correct value since it may have been altered by an insert
e.Item.Cells[0].ColumnSpan = 1;
}
}
}
class DatePickerTemplate : ITemplate
{
public void InstantiateIn(Control container)
{
var ctl = new RadDatePicker
{
SelectedDate =
DateTime.Now
};
ctl.Attributes.Add(
"FactID", "FactIDValue");
ctl.Attributes.Add(
"HiddenFieldID", "HiddenFieldIDValue");
ctl.DateInput.ClientEvents.OnError =
"DatePicker_Error";
ctl.DateInput.ClientEvents.OnValueChanged =
"DatePicker_Changed";
container.Controls.Add(ctl);
}
}
public class ComboBoxTemplate : ITemplate
{
public void InstantiateIn(Control container)
{
var ctl = new RadComboBox()
{
ID =
"RadComboBox"
};
ctl.Attributes.Add(
"FactID", "SomeID");
ctl.Attributes.Add(
"HiddenFieldID", "SomeOtherID");
container.Controls.Add(ctl);
}
}
}
ASPX Page ->
<%
@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestPage.aspx.cs" Inherits="ITemplateTest._Default" %>
<%
@ 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">
<
html xmlns="http://www.w3.org/1999/xhtml" >
<
head runat="server">
<title>Sample Page</title>
</
head>
<
body>
<form id="form1" runat="server">
<script type="text/javascript">
function DatePicker_Error(sender, eventArgs)
{
window.alert(
"date error");
}
function DatePicker_Changed(sender, eventArgs)
{
window.alert(
"date changed");
}
</script>
<div runat="server" id="TestGridDiv">
<telerik:RadScriptManager ID="RadScriptManager1" Runat="server">
</telerik:RadScriptManager>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="TestGrid">
<UpdatedControls><telerik:AjaxUpdatedControl ControlID="TestGrid" /></UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
</div>
<telerik:RadTabStrip ID="RadTabStrip1" runat="server" SelectedIndex="0" MultiPageID="RadMultiPage1">
<Tabs>
<telerik:RadTab runat="server" Text="Root RadTab1" Selected="True" PageViewID="RadPageView1">
</telerik:RadTab>
<telerik:RadTab runat="server" Text="Root RadTab2" PageViewID="RadPageView2">
</telerik:RadTab>
</Tabs>
</telerik:RadTabStrip>
<telerik:RadMultiPage ID="RadMultiPage1" Runat="server">
<telerik:RadPageView ID="RadPageView2" Runat="server" Width="100%">
<telerik:RadDatePicker ID="RadDatePicker1" Runat="server">
</telerik:RadDatePicker>
</telerik:RadPageView> <telerik:RadPageView ID="RadPageView1" Runat="server" Width="100%">
<div id="TestGridPanel">
<
telerik:RadGrid ID="TestGrid" runat="server" AutoGenerateColumns="False"
GridLines="None" onitemcommand="TestGrid_ItemCommand"
onitemdatabound="TestGrid_ItemDataBound">
<
mastertableview commanditemdisplay="Top" editmode="EditForms">
<
norecordstemplate>
<asp:Label ID="ProcessFilterLabel" runat="server" Text="No processes found." />
</norecordstemplate>
<Columns>
<telerik:GridTemplateColumn HeaderText="Region" UniqueName="region">
<EditItemTemplate>
<asp:ListBox ID="RegionListBox" runat="server"><asp:ListItem Text="Region" Value="Value"></asp:ListItem></asp:ListBox>
</EditItemTemplate>
<ItemTemplate>Hello</ItemTemplate>
</telerik:GridTemplateColumn>
</Columns>
<editformsettings>
<popupsettings scrollbars="None" />
</editformsettings>
</
mastertableview>
</
telerik:RadGrid>
</
div>
</telerik:RadPageView>
</telerik:RadMultiPage>
</form>
</
body>
</
html>