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

RadGrid + PageLayout

3 Answers 159 Views

Documentation and Tutorials

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

Lienys asked on 04 Jul 2014, 11:06 PM

bigsize.png

resize.png

I'm using the pagelayout feature to make my rad grid responsive... but when I resize the browser, I'm able to see the pageLayout columns resizing but the radgrid remains with its default size.
this is the code I have... and I attached screen shots to describe what is happening

ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="CraigList.ascx.cs" Inherits="CraigListResponsive.CraigList" %>

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

<telerik:RadPageLayout runat="server" ID="layoutCraigList" ShowGrid="true" GridType="Fluid">

<Rows>

<telerik:LayoutRow>

<Content>

<telerik:RadDropDownList runat="server" ID="craigListCategory"

DataTextField="CategoryName" DataValueField="CategoryId"

OnSelectedIndexChanged="CraigListCategorySelectedIndexChanged">

</telerik:RadDropDownList>

</Content>

</telerik:LayoutRow>

<telerik:LayoutRow>

<Content>

<telerik:RadCodeBlock ID="RadCodeBlockPopWindow" runat="server">

<script type="text/javascript">

var popUp;

function PopUpShowing(sender, eventArgs)

{

popUp = eventArgs.get_popUp();

var gridWidth = sender.get_element().offsetWidth;

var gridHeight = sender.get_element().offsetHeight;

var popUpWidth = popUp.style.width.substr(0, popUp.style.width.indexOf("px"));

var popUpHeight = popUp.style.height.substr(0, popUp.style.height.indexOf("px"));

popUp.style.left = ((gridWidth - popUpWidth) / 2 + sender.get_element().offsetLeft).toString() + "px";

popUp.style.top = ((gridHeight - popUpHeight) / 2 + sender.get_element().offsetTop).toString() + "px";

}

</script>

</telerik:RadCodeBlock>

<telerik:RadAjaxManager runat="server" ID="listAjaxManager">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="craigListGrid">

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadGrid runat="server" ID="craigListGrid"

AllowPaging="true" ShowFooter="true"

AutoGenerateColumns="false"

OnPreRender="CraigListGridPreRender"

OnNeedDataSource="CraigListGridNeedDataSource"

OnUpdateCommand="CraigListGridSaveCommand"

OnInsertCommand="CraigListGridSaveCommand"

OnDeleteCommand="CraigListGridDeleteCommand"

OnItemCommand="CraigListGridItemCommand">

<MasterTableView CommandItemDisplay="Top"

DataKeyNames="ItemId" EditMode="PopUp">

<ColumnGroups>

<telerik:GridColumnGroup Name="Actions"

HeaderText="Actions"

HeaderStyle-HorizontalAlign="Center">

</telerik:GridColumnGroup>

</ColumnGroups>

<Columns>

<telerik:GridBoundColumn UniqueName="Title" DataField="Title"

HeaderText="Items Title">

</telerik:GridBoundColumn>

<telerik:GridEditCommandColumn UniqueName="EditCommandColumn" ColumnGroupName="Actions">

</telerik:GridEditCommandColumn>

<telerik:GridButtonColumn UniqueName="DeleteColumn" Text="Delete"

ColumnGroupName="Actions" CommandName="Delete">

</telerik:GridButtonColumn>

</Columns>

<EditFormSettings UserControlName="~/DesktopModules/CraigListResponsive/CraigListEdit.ascx" EditFormType="WebUserControl">

<PopUpSettings ScrollBars="Auto" Width="400" />

<EditColumn UniqueName="EditCommandColumn"></EditColumn>

</EditFormSettings>

</MasterTableView>

<ClientSettings>

<ClientEvents OnPopUpShowing="PopUpShowing" />

<Selecting AllowRowSelect="True"></Selecting>

</ClientSettings>

</telerik:RadGrid>

</Content>

</telerik:LayoutRow>

</Rows>

</telerik:RadPageLayout>

What i'm doing wrong?

thanks

RadGrid + PageLayout

3 Answers, 1 is accepted