My sample webform below is trying to get the grid to "fit 100%" within the radpane. I think i have followed all the advice so far in these forums, but i could have missed something. It is close but their are "showstopper" problems.
Problem: the radgrid item cells and cell borders are not left aligned with the ragrid column headers! the cells are "shifted to the right"
Q: how can i get these to align?
Problem: can't get rid of horizontal scrollbar.
Q: how do i specify the column widths such that the grid "fits neatly" in the radpane "without" generating a horizontal scrollbar? in other words, how do i configure the grid to not generate a horizontal scrollbar when the radgrid width is 100%? i want to keep the vertical scrollbar though which is working ok.
Problem: i can't seem to get the "GridLines" consistently. I want horz and vertical gridlines but they appear to be random.
Q: what do i do to (consistenly) turn on horizontal and vertical gridlines?
Thanks in advance!
-chris
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GridInSplitter.aspx.cs" Inherits="_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></title>
<style type="text/css">
html
{
padding: 0px;
margin: 0px;
width: 100%;
height: 100%;
border: none;
overflow: hidden;
}
body, form
{
padding: 0px;
margin: 0px;
width: 100%;
height: 100%;
border: none;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
overflow: hidden;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<telerik:RadSplitter ID="RadSplitter1" ResizeWithBrowserWindow="true" ResizeWithParentPane="true"
LiveResize="true" Orientation="Horizontal" Width="100%" Height="100%" BorderSize="0"
BorderStyle="None" BorderWidth="0" runat="server">
<telerik:RadPane ID="RadPane1" Width="100%" Height="150px" Scrolling="None" runat="server">
<telerik:RadGrid ID="RadGrid1" DataSourceID="SqlDataSource1" Width="100%" Height="100%"
AllowSorting="True" AllowPaging="True" PageSize="50" runat="server" AutoGenerateColumns="False"
BorderStyle="None" BorderWidth="0px">
<HeaderContextMenu>
<CollapseAnimation Duration="200" Type="OutQuint" />
</HeaderContextMenu>
<PagerStyle Mode="NumericPages" />
<MasterTableView DataKeyNames="CustomerID" Width="100%">
<Columns>
<telerik:GridBoundColumn DataField="CustomerID" HeaderText="aCustomerID" UniqueName="column1">
<HeaderStyle Font-Bold="False" Font-Italic="False" Font-Overline="False" Font-Strikeout="False"
Font-Underline="False" Width="50px" Wrap="True" />
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="CompanyName" HeaderText="aCompanyName" UniqueName="column2">
<HeaderStyle Width="100px" />
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="ContactName" HeaderText="aContactName" UniqueName="column3">
<HeaderStyle Width="200px" />
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="ContactTitle" HeaderText="aContactTitle" UniqueName="column4">
<HeaderStyle Width="50px" />
</telerik:GridBoundColumn>
</Columns>
</MasterTableView>
<ClientSettings AllowColumnsReorder="true" ReorderColumnsOnClient="true">
<Scrolling AllowScroll="true" UseStaticHeaders="true" />
<Resizing ResizeGridOnColumnResize="false" AllowColumnResize="true" />
</ClientSettings>
<FilterMenu>
<CollapseAnimation Duration="200" Type="OutQuint" />
</FilterMenu>
</telerik:RadGrid>
<br />
<asp:SqlDataSource ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
ProviderName="System.Data.SqlClient" SelectCommand="SELECT CustomerID, CompanyName, ContactName, ContactTitle FROM Customers"
runat="server"></asp:SqlDataSource>
</telerik:RadPane>
<telerik:RadSplitBar ID="RadSplitBar1" runat="server" />
<telerik:RadPane ID="RadPane2" Width="100%" Scrolling="None" runat="server">
</telerik:RadPane>
</telerik:RadSplitter>
</div>
</form>
</body>
</html>