I have a page that I am trying to place two grids and set the heights or grid correctly correctly. I am making some success, see attached screen shot. I have the top grid loading somewhat visually correct but when I select a row in the grid (see second attached screen shot) it all falls part.
here is my page
<%@ Page Title="" Language="C#" MasterPageFile="~/Modules/Module.Master" AutoEventWireup="true" CodeBehind="ManageEmployees.aspx.cs" Inherits="HelmOnline.Web.Modules.TimeClock.ManageEmployee" %>
<%@ Register Src="~/Common/Controls/CustomerIdField.ascx" TagPrefix="uc1" TagName="CustomerIdField" %>
<asp:Content ID="Content2" ContentPlaceHolderID="ModuleContent" runat="server">
<div style="margin: 10px; height: 100%; background-color: pink;">
<style type="text/css">
.rightAlign {
float: right;
}
</style>
<telerik:RadScriptBlock runat="server">
<script type="text/javascript">
function Resize() {
setTimeout(function () {
var scrollArea = document.getElementById("<%= RadGrid1.ClientID %>" + "_GridData");
if (scrollArea) {
//scrollArea.style.height = 100%;
alert(document.body.offsetHeight);
scrollArea.style.height = ((document.body.offsetHeight) / 2) - 150 + "px";
}
if (window["<%= RadGrid1.ClientID %>"].ClientSettings.Scrolling.UseStaticHeaders) {
var header = document.getElementById("<%= RadGrid1.ClientID %>" + "_GridHeader");
scrollArea.style.height = document.body.offsetHeight - header.offsetHeight + "px";
}
}, 200);
}
window.onresize = window.onload = Resize;
function OpenWCEntry(sender, punchid, customerid, employeeid, punchtimein, punchtimeout) {
//alert('Hello');
var dialogWindow = $find("<%=RadWindow1.ClientID%>");
dialogWindow.set_title("Modify Punch Entry");
//dialogWindow.set_navigateUrl(dialogWindow._navigateUrl);
var baseUrl = "Dialog/AddEditWebTime.aspx";
baseUrl = baseUrl + "?";
baseUrl = baseUrl + "punchid=" + punchid;
baseUrl = baseUrl + "&";
baseUrl = baseUrl + "customerid=" + customerid;
baseUrl = baseUrl + "&";
baseUrl = baseUrl + "employeeid=" + employeeid;
baseUrl = baseUrl + "&";
baseUrl = baseUrl + "punchtimein=" + punchtimein;
baseUrl = baseUrl + "&";
baseUrl = baseUrl + "punchtimeout=" + punchtimeout;
dialogWindow.set_navigateUrl(baseUrl)
dialogWindow.set_modal(true);
dialogWindow.show();
}
function OnClientCloseHandler(sender, args) {
var btnRefreshGrids = $find("<%=btnRefreshGrids.ClientID%>");
btnRefreshGrids.click();
}
function OpenWebClockReport(sender, customerid, startdate, enddate) {
var baseUrl = "Dialog/WebClockReport.aspx";
baseUrl = baseUrl + "?";
baseUrl = baseUrl + "customerid=" + customerid;
baseUrl = baseUrl + "&";
baseUrl = baseUrl + "startdate=" + startdate;
baseUrl = baseUrl + "&";
baseUrl = baseUrl + "enddate=" + enddate;
document.title = 'Web Clock Report';
window.open(baseUrl);
}
function OpenWebClockEmployeeReport(sender, customerid, employeeid, startdate, enddate) {
//alert(customerid);
//alert(employeeid);
//alert(startdate);
//alert(enddate);
var baseUrl = "Dialog/WebClockEmployeeReport.aspx";
baseUrl = baseUrl + "?";
baseUrl = baseUrl + "customerid=" + customerid;
baseUrl = baseUrl + "&";
baseUrl = baseUrl + "employeeid=" + employeeid;
baseUrl = baseUrl + "&";
baseUrl = baseUrl + "startdate=" + startdate;
baseUrl = baseUrl + "&";
baseUrl = baseUrl + "enddate=" + enddate;
document.title = 'Web Clock Employee Report';
window.open(baseUrl);
}
</script>
</telerik:RadScriptBlock>
<telerik:RadWindowManager RenderMode="Lightweight" ID="RadWindowManager1" ShowContentDuringLoad="false" VisibleStatusbar="false" ReloadOnShow="true" runat="server" EnableShadow="true">
<Windows>
<telerik:RadWindow RenderMode="Lightweight" ID="RadWindow1" runat="server" Height="400" Width="1000" NavigateUrl="~/Modules/TimeClock/Dialog/AddEditWebTime.aspx" OnClientClose="OnClientCloseHandler" Behaviors="Close" />
</Windows>
</telerik:RadWindowManager>
<telerik:RadAjaxManager ID="RadRadAjaxManager1" runat="server">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="RadGrid1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="RadGrid1" />
<telerik:AjaxUpdatedControl ControlID="RadGrid2" />
<telerik:AjaxUpdatedControl ControlID="btnAdd" />
<telerik:AjaxUpdatedControl ControlID="btnEdit" />
</UpdatedControls>
</telerik:AjaxSetting>
<telerik:AjaxSetting AjaxControlID="btnRefreshGrids">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="btnRefreshGrids" />
<telerik:AjaxUpdatedControl ControlID="RadGrid1" />
<telerik:AjaxUpdatedControl ControlID="RadGrid2" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
<ClientEvents />
</telerik:RadAjaxManager>
<asp:Panel runat="server" ID="pcustomerDateSelect">
<div style="margin: 0px; height: 10%;">
<table>
<tbody>
<tr>
<td>
<telerik:RadLabel runat="server" ID="radlabel1" Text="Customer ID"></telerik:RadLabel>
</td>
<td>
<uc1:CustomerIdField runat="server" ID="CustomerIdField" />
</td>
<td>
<telerik:RadLabel runat="server" ID="radlabel3" Text="Start Date"></telerik:RadLabel>
</td>
<td>
<telerik:RadDatePicker runat="server" ID="StartDate"></telerik:RadDatePicker>
</td>
<td>
<telerik:RadLabel runat="server" ID="radlabel4" Text="End Date"></telerik:RadLabel>
</td>
<td>
<telerik:RadDatePicker runat="server" ID="EndDate"></telerik:RadDatePicker>
</td>
<td>
<telerik:RadButton runat="server" ID="btnLoadCustomer" Text="Submit" OnClick="btnLoadCustomer_Click"></telerik:RadButton>
</td>
</tr>
</tbody>
</table>
</div>
</asp:Panel>
<telerik:RadAjaxPanel runat="server" ID="pCustomerEmployee" PostBackControls="btnExportGrid" Height="100%">
<div style="margin: 0px; height: 5%; background-color: red;">
<table>
<tbody>
<tr>
<td>
<telerik:RadLabel runat="server" ID="radlabel2" Text="Customer"></telerik:RadLabel>
</td>
<td width="30%">
<telerik:RadLabel runat="server" ID="lblCustomerIDName"></telerik:RadLabel>
</td>
<td width="30%">
<telerik:RadLabel runat="server" ID="lblSelectDate"></telerik:RadLabel>
</td>
<td width="15%">
<asp:LinkButton runat="server" ID="btnReport" Text="Web Clock Report" />
<%--<asp:LinkButton runat="server" ID="btnEmployeeReport" Text="Web Clock Employee Report" />--%>
</td>
<td width="25%">
<telerik:RadButton runat="server" ID="btnTimeImport" CssClass="rightAlign" Text="Import Time" OnClick="btnTimeImport_Click" />
</td>
</tr>
</tbody>
</table>
<telerik:RadButton ID="btnRefreshGrids" Text="Refresh" OnClick="btnRefreshGrids_Click" runat="server" Style="display: none;" />
</div>
<div style="margin: 0px; height: 50%; background-color: green;">
<div>
<asp:ImageButton ID="btnExportGrid" runat="server" ImageUrl="/Images/Excel_XLSX.png" Height="24" Width="24" OnClick="btnExportGrid_Click" AlternateText="ExportToExcel" />
</div>
<telerik:RadGrid runat="server" ID="RadGrid1" Width="100%" Height="100%" AutoGenerateColumns="false" AllowPaging="False" AllowSorting="true" ShowGroupPanel="false" PageSize="10" RenderMode="Classic" AllowFilteringByColumn="true" GroupingSettings-CaseSensitive="false" OnSelectedIndexChanged="RadGrid1_SelectedIndexChanged" OnNeedDataSource="RadGrid1_NeedDataSource">
<MasterTableView Width="100%" >
<Columns>
<telerik:GridBoundColumn HeaderStyle-Width="0" SortExpression="Customerid" HeaderText="Customerid" HeaderButtonType="TextButton" DataField="Customerid" DataFormatString="{0:d}" />
<telerik:GridBoundColumn SortExpression="EmployeeID" HeaderText="EmployeeID" HeaderButtonType="TextButton" DataField="EmployeeID" DataFormatString="{0:d}" />
<telerik:GridBoundColumn SortExpression="FirstName" HeaderText="FirstName" HeaderButtonType="TextButton" DataField="FirstName" DataFormatString="{0:d}" />
<telerik:GridBoundColumn SortExpression="LastName" HeaderText="LastName" HeaderButtonType="TextButton" DataField="LastName" DataFormatString="{0:d}" />
<telerik:GridBoundColumn SortExpression="TotalHours" HeaderText="TotalHours" HeaderButtonType="TextButton" DataField="TotalHours" DataFormatString="{0:###,##0.00}" />
</Columns>
</MasterTableView>
<ClientSettings ReorderColumnsOnClient="True" AllowDragToGroup="True" AllowColumnsReorder="True" EnablePostBackOnRowClick="true" Selecting-AllowRowSelect="true">
<Selecting AllowRowSelect="True"></Selecting>
<Resizing AllowRowResize="False" AllowColumnResize="True" EnableRealTimeResize="True" ResizeGridOnColumnResize="False"></Resizing>
<Scrolling UseStaticHeaders="true" AllowScroll="true" />
</ClientSettings>
</telerik:RadGrid>
</div>
<div style="margin: 0px; height: 50%; background-color: yellow;">
<div>
<asp:LinkButton runat="server" ID="btnAdd" Text="Add New Punch" OnClick="btnAdd_Click" Visible="false"></asp:LinkButton>
</div>
<telerik:RadGrid ID="RadGrid2" OnNeedDataSource="RadGrid2_NeedDataSource" runat="server" AutoGenerateColumns="false" AllowPaging="False" AllowSorting="true" ShowGroupPanel="false" PageSize="10" RenderMode="Classic" Width="100%" Height="100%" AllowFilteringByColumn="false" GroupingSettings-CaseSensitive="false" OnItemCreated="RadGrid2_ItemCreated" OnItemCommand="RadGrid2_ItemCommand">
<MasterTableView Width="100%">
<Columns>
<telerik:GridButtonColumn UniqueName="btnDelete" CommandName="Delete" ButtonType="LinkButton" Text="Delete" HeaderStyle-Width="45" HeaderText="Delete" ConfirmText="Do want to delete punch?" ImageUrl="../../Images/redx-md.png" />
<telerik:GridButtonColumn UniqueName="btnEdit" ButtonType="LinkButton" Text="Modify" HeaderText="Modify" HeaderStyle-Width="55" />
<telerik:GridBoundColumn HeaderStyle-Width="0" SortExpression="Customerid" HeaderText="Customerid" HeaderButtonType="TextButton" DataField="Customerid" DataFormatString="{0:d}" />
<telerik:GridDateTimeColumn SortExpression="dt" HeaderText="Date" HeaderButtonType="TextButton" DataField="dt" DataType="System.DateTime" DataFormatString="{0:M/d/yyyy}" />
<telerik:GridBoundColumn SortExpression="DayOfWeek" HeaderText="Day Of Week" HeaderButtonType="TextButton" DataField="DayOfWeek" DataFormatString="{0:d}" />
<telerik:GridBoundColumn HeaderStyle-Width="0" SortExpression="EmployeeID" HeaderText="EmployeeID" HeaderButtonType="TextButton" DataField="EmployeeID" DataFormatString="{0:d}" />
<telerik:GridBoundColumn HeaderStyle-Width="0" SortExpression="FirstName" HeaderText="FirstName" HeaderButtonType="TextButton" DataField="FirstName" DataFormatString="{0:d}" />
<telerik:GridBoundColumn HeaderStyle-Width="0" SortExpression="LastName" HeaderText="LastName" HeaderButtonType="TextButton" DataField="LastName" DataFormatString="{0:d}" />
<telerik:GridBoundColumn SortExpression="PunchID" HeaderText="PunchID" HeaderButtonType="TextButton" DataField="PunchID" DataFormatString="{0:d}" />
<telerik:GridDateTimeColumn SortExpression="PunchInDate" HeaderText="Punch In Date" HeaderButtonType="TextButton" DataField="PunchInDate" DataType="System.DateTime" DataFormatString="{0:M/d/yyyy}" />
<telerik:GridDateTimeColumn SortExpression="PunchInTime" HeaderText="Punch In Time" HeaderButtonType="TextButton" DataField="PunchInTime" DataType="System.DateTime" />
<telerik:GridDateTimeColumn SortExpression="PunchOutDate" HeaderText="Punch Out Date" HeaderButtonType="TextButton" DataField="PunchOutDate" DataType="System.DateTime" DataFormatString="{0:M/d/yyyy}" />
<telerik:GridDateTimeColumn SortExpression="PunchOutTime" HeaderText="Punch Out Time" HeaderButtonType="TextButton" DataField="PunchOutTime" DataType="System.DateTime" />
<telerik:GridBoundColumn SortExpression="Hours_Worked" HeaderText="Hours Worked" HeaderButtonType="TextButton" DataField="Hours_Worked" DataFormatString="{0:###,##0.00}" />
</Columns>
</MasterTableView>
<ClientSettings ReorderColumnsOnClient="True" AllowDragToGroup="True" AllowColumnsReorder="True" EnablePostBackOnRowClick="true">
<Selecting AllowRowSelect="True"></Selecting>
<Resizing AllowRowResize="False" AllowColumnResize="True" EnableRealTimeResize="True" ResizeGridOnColumnResize="False"></Resizing>
<Scrolling UseStaticHeaders="true" AllowScroll="true" />
</ClientSettings>
</telerik:RadGrid>
</div>
</telerik:RadAjaxPanel>
</div>
</asp:Content>
3 Answers, 1 is accepted
I've already sent you the following link in your formal support thread:
https://www.telerik.com/support/code-library/setting-radgrid's-height-in-percents
I suggest that we continue our technical conversation on the mentioned thread.
Regards,
Eyup
Progress Telerik
Rank 1
I'm glad the provided directions have proven helpful.
Please feel free to turn to us if new questions arise.
Regards,
Eyup
Progress Telerik