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

RadGrid Popup Edit form Controls Positions and direction Issues

6 Answers 327 Views

Grid

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

Asa'ad asked on 28 Jun 2011, 07:55 AM

leftToRight.png

rightToLeft.png

Hi All,

i have a page this used radgrid to retrieve data from database and i used a customized edit form which is shown as popup while editing and inserting records....

i noticed that when this popup is called for the first time...all controls in it are shown correctly in their postions including the update/insert and cancel buttons.... the popup is called when click on the edit/insert columns in the grid...

but after the first time and when the popup is called the update/insert button is moved up its position in the row...

i used html tables to design the popup template....

i don't know what is the reason for this behavior??? and how can be solved?

i have a second question regarding the grid direction attribute if from right to left...
the gird direction becomes from right to left correctly BUT the grid header, pager and filter row is expanded and controls are not in their expected positions.

i have attached a snapshot of the grid when it is left to right and right to left...

i hope can find the reason and solution of this problem????

thanks in adavnced

Asa'ad

6 Answers, 1 is accepted

answered on 28 Jun 2011, 12:03 PM

Hello Asa'ad,

I cannot reproduce your first issue at my end. Here is the code that I tried which worked as expected.

aspx:

<telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="SqlDataSource1">

<MasterTableView Dir="RTL" EditMode="PopUp" CommandItemDisplay="Top">

<EditFormSettings EditFormType="Template">

<FormTemplate>

<table id="Table2" cellspacing="2" cellpadding="1" width="100%" border="0">

<tr >

<td colspan="2" style="font-size: small">

<b>Employee Details</b>

</td>

</tr>

<tr>

<td align="right" colspan="2">

<asp:Button ID="btnUpdate"

Text="Button" runat="server"

</asp:Button>

<asp:Button ID="btnCancel" Text="Cancel" runat="server">

</asp:Button>

</td>

</tr>

</table>

</FormTemplate>

</EditFormSettings>

<Columns>

. . . .

</Columns>

</MasterTableView>

</

telerik:RadGrid>

For second scenario, try setting the CSS as shown below.

CSS:

<style type="text/css">

.RadGridRTL .rgNumPart

{

width: 0px !important;

}



</style>

Thanks,
Shinu.

answered on 29 Jun 2011, 07:39 AM

pager.png

pager1.png

thanks Shinu for the reply...

I tried your solution and the pager row becomes as the attached picture pager.png
I increased the width to 50px in the css and it becomes better as the attached second one pager1.png

but i think it will be shown incorrectly again if the data is larger and more pages is produced(more than 2 pages)!!!

aslo still not find any solution for the header and filter rows????

Thanks
Asa'ad

Accepted

answered on 08 Jul 2011, 11:55 AM

Hi Asa'ad,

I could not notice such issue on our demo for RTL support. Can you tell what is different on your side (in regard of grid code, custom styles, etc.)?
http://demos.telerik.com/aspnet-ajax/grid/examples/styles/righttoleft/defaultcs.aspx

Also, what controls do you have in the edit form? For some RadControls loading skins requires further handling when the controls first appear after an ajax request. Generally, you need to explicitly load the skin either through RadStyleSheetManager or declare it on the page e.g.:

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

<StyleSheets>

<telerik:StyleSheetReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Skins.Rating.css" />

<telerik:StyleSheetReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Skins.Forest.Rating.Forest.css" />

</StyleSheets>

</telerik:RadStyleSheetManager>

<link href='<%= Page.ClientScript.GetWebResourceUrl(typeof(RadRating), "Telerik.Web.UI.Skins.Rating.css") %>' rel="stylesheet" type="text/css" />

<link href='<%= Page.ClientScript.GetWebResourceUrl(typeof(RadRating), "Telerik.Web.UI.Skins.Default.Rating.Default.css") %>' rel="stylesheet" type="text/css" />

Regards,
Tsvetina
the Telerik team

Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!