This is a migrated thread and some comments may be shown as answers.

Grid resize display problem

5 Answers 217 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Stanley asked on 16 Aug 2011, 07:10 AM

grid-resize.JPG

grid-normal-size.JPG

Hi there,

Whenever I minimize or set my screen to a lower resolution my radgrid starts to display columns as if their contents were squashed. Refer to the screenshot 'grid resize.jpeg' below:

I have my MasterTableView property TableLayout="Fixed"

How do I rectify this problem?

<%@ Page language="C#" Codebehind="Custom_DealUI.aspx.cs" AutoEventWireup="false" Inherits="KF.Crm.Web.Custom_DealUI" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

<style type="text/css">

#mainForm

{

height: 600px;

}

.button, .disabledButton

{

filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#cecfde);

cursor: hand;

font-size: 11px;

}

.applicationToolBar

{

height: 26px;

}

span.text

{

font: 13px 'Segoe UI' , Arial, sans-serif;

color: #4888a2;

padding-right: 10px;

vertical-align: middle;

display: inline-block; *display:inline;zoom:1;width:90px;}

.module-row

{

margin: 10px 0;

}

.module-row .status-text

{

margin-left: 103px;

display: block;

font: 13px 'Segoe UI' , Arial, sans-serif;

color: #4888a2;

}

html.rfdButton a.rfdSkinnedButton

{

vertical-align: middle;

margin: 0 0 0 5px;

}

* html div.RadComboBox

{

vertical-align: middle;

}

.style4

{

height: 620px;

border-bottom: 1px solid #319AEA;

margin-top: 3px;

}

.style6

{

width: 935px;

}

.style7

{

width: 227px;

}

.style8

{

margin-left: 48px;

}

</style>

<telerik:RadScriptBlock ID="RadScriptBlock" runat="server">

<script type="text/javascript">

function AlertMessage(message, width, height, title) {

var oWnd = radalert(message, width, height, title);

CenterItem('.rwDialogPopup', '.rwDialogText', '.rwPopupButton');

}

function CenterItem(parentItem, subparentItem, theItem) {

var parentWidth = $telerik.$(parentItem).outerWidth();

var subparentWidth = $telerik.$(subparentItem).outerWidth();

var itemWidth = $telerik.$(theItem).outerWidth();

var theCenter = parentWidth / 2 - (parentWidth - subparentWidth) - itemWidth / 2;

if (theCenter > 0) $telerik.$(theItem).css('margin-left', theCenter);

else $telerik.$(theItem).css('margin-left', '0');

}

function onRequestStart(sender, args)

{

if (args.get_eventTarget().indexOf("ExportToExcelButton") >= 0)

{

args.set_enableAjax(false);

}

function OnClientClicked(sender, eventArgs) {

sender.set_enabled(false);

var combo = $find("<%= RadComboBox4.ClientID %>");

combo.disable();

if (sender.get_text() == "Approve") sender.set_text("Approving...");

else if (sender.get_text() == "Select") {

sender.set_text("Retrieving...");

}

else if (sender.get_text() == "Clear") {

combo.set_text("");

}

else { }

}

function OnClientSelectedIndexChanged(sender, eventArgs) {

var combo = $find("<%= RadComboBox4.ClientID %>");

combo.set_text("");

combo.disable();

}

function OnClientFocus(sender, args) {

var button = $find("<%= btnSelectDeal.ClientID %>");

button.set_text("Select");

}

function EnableButtons( sender, eventArgs) {

/*if (sender.get_text() == "Submit") {

var btnStandard = $find("<%=btnStandard.ClientID%>");

btnStandard.set_text("Submit");

btnStandard.set_enabled(true);*/

}

</script>

</telerik:RadScriptBlock>

</head>

<body class="BODY">

<form runat="server" id="mainForm" method="post" >

<telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server">

</telerik:RadStyleSheetManager>

<telerik:RadScriptManager ID="ScriptManager1" EnablePageMethods="true" runat="server"/>

<telerik:RadWindowManager ID="RadWindowManager1" runat="server"

Behaviors="Default" EnableShadow="true" AutoSize="True" Modal="True"

Skin="Windows7" CssClass="RadWindow">

</telerik:RadWindowManager>

<table

border="0" cellpadding="0" cellspacing="0" width="100%" >

<tr class="applicationToolBar">

<td class="style7" >

<telerik:RadComboBox ID="RadComboBox4" runat="server" AutoPostBack="true" Width="157px" Height="150px"

EmptyMessage="Select a Deal" EnableLoadOnDemand="true" ShowMoreResultsBox="true"

EnableVirtualScrolling="true" OnItemsRequested="RadComboBox4_ItemsRequested" onclientfocus="OnClientFocus" >

</telerik:RadComboBox>

</td>

<td>

<telerik:RadButton runat="server" Text="Select" ID="btnSelectDeal"

UseSubmitBehavior="False" Skin="Telerik"

OnClick="btnSelectDeal_Click" onclientclicked="OnClientClicked" >

</telerik:RadButton>

</td>

<td class="style6">

<telerik:RadComboBox ID="RadComboBox1" runat="server" AutoPostBack="true"

Width="250px"

DataTextField="DealSelector"

DataValueField="DealSelector" Culture="English (Australia)"

EnableAutomaticLoadOnDemand="True" Skin="Windows7"

OnSelectedIndexChanged="RadComboBox1_SelectedIndexChanged" onclientselectedindexchanged="OnClientSelectedIndexChanged"

EnableTheming="True" CssClass="style8" >

<Items>

<telerik:RadComboBoxItem runat="server" Text="All Deals" Value="All Deals" />

<telerik:RadComboBoxItem runat="server" Text="New Deals" Value="New Deals" />

<telerik:RadComboBoxItem runat="server" Text="Waiting Manager Approval"

Value="Waiting Manager Approval" />

<telerik:RadComboBoxItem runat="server" Text="Manager Approved"

Value="Manager Approved" />

<telerik:RadComboBoxItem runat="server" Text="Income Recognised"

Value="Income Recognised" />

<telerik:RadComboBoxItem runat="server" Text="Pro-forma Invoice Created"

Value="Pro-forma Invoice Created" />

<telerik:RadComboBoxItem runat="server" Text="Waiting Accounts Approval"

Value="Waiting Accounts Approval" />

<telerik:RadComboBoxItem runat="server" Text="Invoiced" Value="Invoiced" />

<telerik:RadComboBoxItem runat="server" Text="Receipt Processed"

Value="Receipt Processed" />

<telerik:RadComboBoxItem runat="server" Text="Credit Processed"

Value="Credit Processed" />

<telerik:RadComboBoxItem runat="server" Text="Inactive" Value="Inactive" />

</Items>

</telerik:RadComboBox>

</td>

<td>

<asp:Panel ID="btnStandardWrapper" runat="server" Width="127px" >

<telerik:RadButton ID="btnStandard" runat="server" Text="Approve" OnClick="btnStandard_Click"

UseSubmitBehavior="False" OnClientClicked="OnClientClicked"

Style="clear: both;" Skin="Telerik" Visible = "false"

>

</telerik:RadButton></asp:Panel>

</td>

</tr>

</table>

</br>

<telerik:RadGrid ID="RadGrid1" AllowSorting="True" AllowPaging="True"

AllowFilteringByColumn="True" runat="server" CellSpacing="0" GridLines="None"

PageSize="100" Skin="Windows7" Culture="English (Australia)" OnNeedDataSource="RadGrid1_NeedDataSource"

ShowStatusBar="True"

AutoGenerateColumns="False" OnItemDataBound="RadGrid1_ItemDataBound"

OnPreRender="RadGrid1_PreRender" AllowMultiRowSelection="True"

CssClass="style4" CellPadding="0" onitemcommand="RadGrid1_ItemCommand" Height="667px" Width="100%"

>

<exportsettings exportonlydata="True">

</exportsettings>

<MasterTableView CommandItemDisplay="Top" CommandItemSettings-ShowExportToExcelButton="true" TableLayout="Fixed" >

<CommandItemSettings ShowExportToExcelButton="True"

showaddnewrecordbutton="True" AddNewRecordText="Clear filters"></CommandItemSettings>

<RowIndicatorColumn FilterControlAltText="Filter RowIndicator column"></RowIndicatorColumn>

<ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column"></ExpandCollapseColumn>

<Columns>

<telerik:GridClientSelectColumn UniqueName="CheckboxSelectColumn" Visible = "false" >

<HeaderStyle Width="30px" HorizontalAlign="Justify" VerticalAlign="Middle" />

<ItemStyle Width="30px" />

</telerik:GridClientSelectColumn>

<telerik:GridHyperLinkColumn HeaderText= "Deal No" UniqueName="GridHyperLinkColumn" DataTextField="DealNo">

<HeaderStyle Font-Bold="True" Wrap="False" />

</telerik:GridHyperLinkColumn>

<telerik:GridBoundColumn DataField="DealID" UniqueName = "DealID" HeaderText="DealID"

AllowFiltering="False" Visible="False" >

<HeaderStyle Font-Bold="True" Wrap="False" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Location" HeaderText="Location"

AllowFiltering="True" >

<HeaderStyle Font-Bold="True" Wrap="False" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Department" HeaderText="Department"

AllowFiltering="False" >

<HeaderStyle Font-Bold="True" Wrap="False" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="LeadOperative"

HeaderText="Lead Operative" AllowFiltering="True" >

<HeaderStyle Font-Bold="True" Wrap="False" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="TransactionType"

HeaderText="Transaction Type" AllowFiltering="False" >

<HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle"

Wrap="False" />

</telerik:GridBoundColumn>

<telerik:GridDateTimeColumn UniqueName="Income_Rec_Date" HeaderText="Income Recognition Date"

DataField="Income_Rec_Date" DataFormatString="{0:dd/MM/yyyy}"

>

<HeaderStyle Font-Bold="True" Width="160px" Wrap="False" />

</telerik:GridDateTimeColumn>

<telerik:GridDateTimeColumn DataField="TargetInvoiceDate"

DataFormatString="{0:dd/MM/yyyy}"

FilterControlAltText="Filter TargetInvoice column"

HeaderText="Target Invoice Date" UniqueName="TargetInvoice">

<HeaderStyle Font-Bold="True" Width="160px" Wrap="False" />

</telerik:GridDateTimeColumn>

<telerik:GridBoundColumn DataField="Address" HeaderText="Address"

AllowFiltering="False" >

<HeaderStyle Font-Bold="True" Wrap="False" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="LevelSuite" HeaderText="Level Suite"

AllowFiltering="False" >

<HeaderStyle Font-Bold="True" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="KF_Amount_Excl_GST"

HeaderText="Amount Ex GST" AllowFiltering="False" DataType ="System.Decimal" DataFormatString="{0:C2}" >

<HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle"

Wrap="False" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="DealStatus" HeaderText="Deal Status"

AllowFiltering="False" >

<HeaderStyle Font-Bold="True" Wrap="False" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="GP_Debtor" UniqueName="GP_Debtor" HeaderText="GP Debtor"

AllowFiltering="False" >

<HeaderStyle Font-Bold="True" Wrap="False" />

</telerik:GridBoundColumn>

</Columns>

<EditFormSettings>

<EditColumn FilterControlAltText="Filter EditCommandColumn column"></EditColumn>

</EditFormSettings>

<PagerStyle AlwaysVisible="True"></PagerStyle>

</MasterTableView>

<HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Default"></HeaderContextMenu>

<ClientSettings AllowColumnsReorder="True" ReorderColumnsOnClient="True" >

<selecting allowrowselect="True" />

<Scrolling AllowScroll="True" UseStaticHeaders="True" scrollheight="500px" />

<Resizing AllowColumnResize="True" AllowResizeToFit="True" />

</ClientSettings>

<FilterMenu EnableImageSprites="False"></FilterMenu>

</telerik:RadGrid>

<br /><br />

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server"

Transparency="20" BackColor="#E0E0E0" Height="16px" >

<table style="width:100%;height:100%;">

<tr style="height:100%"><td align="center" valign="middle" style="width:100%">

<asp:Image ID="Image1" runat="server" AlternateText="Loading..."

BorderWidth="0px" ImageUrl="~/DealTracking/loading.gif">

</asp:Image>

</telerik:RadAjaxLoadingPanel>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" ClientEvents-OnResponseEnd="EnableButtons" >

<ClientEvents OnRequestStart="onRequestStart" />

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="btnStandard" EventName="Click">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="btnStandardWrapper" UpdatePanelRenderMode="Block" />

<telerik:AjaxUpdatedControl ControlID="RadGrid1"

LoadingPanelID="RadAjaxLoadingPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="RadComboBox1">

<updatedcontrols>

<telerik:AjaxUpdatedControl ControlID="btnStandardWrapper" UpdatePanelRenderMode="Block" />

<telerik:AjaxUpdatedControl ControlID="RadComboBox4" />

<telerik:AjaxUpdatedControl ControlID="RadGrid1"

LoadingPanelID="RadAjaxLoadingPanel1" />

</updatedcontrols>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="btnSelectDeal" EventName="Click">

<updatedcontrols>

<telerik:AjaxUpdatedControl ControlID="btnSelectDeal"/>

<telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1"/>

<telerik:AjaxUpdatedControl ControlID="RadComboBox4" />

</updatedcontrols>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="RadGrid1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGrid1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

</form>

</body>

</html>

5 Answers, 1 is accepted

answered on 22 Aug 2011, 02:54 AM

minimize.JPG

Hi,
i have tried what the demo said and now I get the horizontal scroll bar to appear on my screen.

However, as soon as I minimize my screen the grid only displays partially and the rest of the columns are cut off and I cannot scroll across the screen as the horizontal bar has now disappeared. Refer to the pic attached.

Please help