Hello Valery,
We have provided a solution to your problem in the respective support ticket, but I will also present the solution here so it is available to the community.
Here it is:
When used with static headers, RadGrid makes some adjustments to its layout. This action should be executed each time the control changes its size. In your case I suggest you to subscribe to the RadDock's OnClientDragEnd event:
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<script runat="server">
protected override void OnPreRender(EventArgs e)
{
base.OnPreRender(e);
object[] dataSource = new object[] { };
RadGrid1.DataSource = dataSource;
RadGrid1.DataBind();
}
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<head id="Head1" runat="server">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>RadControls</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div style="height: 300px">
<telerik:RadDockZone ID="RadDockZone1" runat="server" Height="100%" />
</div>
<telerik:RadDock ID="DockGrid" runat="server" OnClientDragEnd="repaintGrid">
<ContentTemplate>
<telerik:RadGrid ID="RadGrid1" runat="server">
<MasterTableView>
<Columns>
<telerik:GridBoundColumn HeaderText="ID" DataField="ID" HeaderStyle-Width="50px"
ItemStyle-Width="50px" />
<telerik:GridBoundColumn HeaderText="Text" DataField="Text" />
<telerik:GridBoundColumn HeaderText="Value" DataField="Value" DataFormatString="{0:N3}"
HeaderStyle-Width="50px" ItemStyle-Width="50px" />
</Columns>
</MasterTableView>
<ClientSettings>
<Scrolling AllowScroll="true" UseStaticHeaders="true" />
</ClientSettings>
</telerik:RadGrid>
</ContentTemplate>
</telerik:RadDock>
<script type="text/javascript">
function getRandomString(length) {
var chars = ' 0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz';
var s = '';
for (var i = 0; i < length; i++) {
var rnum = Math.floor(Math.random() * chars.length);
s += chars.substring(rnum, rnum + 1);
}
return s;
}
var dataItems = [];
for (var i = 0; i < 100; i++) {
var dataItem = {
ID: i,
Text: getRandomString(50),
Value: Math.random()
};
dataItems.push(dataItem);
}
function updateGrid(radGrid) {
var masterTableView = radGrid.get_masterTableView();
masterTableView.set_dataSource(dataItems);
masterTableView.dataBind();
}
function OnGridCommand(radGrid, args) {
updateGrid(radGrid);
}
function repaintGrid(sender, args)
{
var radGrid = $find('<%= RadGrid1.ClientID %>');
radGrid.repaint();
}
Sys.Application.add_load(function() {
var radGrid = $find('<%= RadGrid1.ClientID %>');
radGrid.add_command(OnGridCommand);
updateGrid(radGrid);
});
</script>
</form>
</body>
</html>
A more universal solution is to replace the repaintGrid method with the following:
Best wishes,
Pero
the Telerik team
Do you want to have your say when we set our development plans?
Do you want to know when a feature you care about is added or when a bug fixed?
Explore the
Telerik Public Issue Tracking
system and vote to affect the priority of the items.