Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

[Solved] Numeric pager in RTL culture

7 Answers 266 Views
Grid
This is a migrated thread and some comments may be shown as answers.
slam
Top achievements
Rank 1
slam asked on 25 Aug 2009, 12:24 PM
I have created a grid which is to be displayed right-to-left. This grid has a pager item which should also be displayed right-to-left. Regardless of the 'dir' setting my numeric pager item is always displayed left-to-right (but right-aligned). I would like to know how to enforce RTL direction on the numeric pager item so that the numeric hyperlinks are displayed RTL.
I have created a simple page, shown below, which exhibits this behaviour.

Default.aspx:
<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.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" dir="rtl">  
<head runat="server">  
    <title>Numeric Pager RTL Test</title> 
</head> 
<body> 
    <form id="form1" runat="server">  
      
    <div dir="rtl">  
        <telerik:RadScriptManager ID="RadScriptManager1" Runat="server"/>  
          
        <telerik:RadGrid ID="RadGrid1" runat="server" PageSize="5" Skin="Vista" AllowPaging="True" ShowGroupPanel="True" Width="100%">  
            <PagerStyle AlwaysVisible="True" Mode="NumericPages" PageButtonCount="5" /> 
            <MasterTableView CommandItemDisplay="Top" Dir="RTL"/>  
        </telerik:RadGrid> 
    </div> 
    </form> 
</body> 
</html> 
 

Default.aspx.cs
using System;  
using System.Data;  
using System.Globalization;  
 
public partial class _Default : System.Web.UI.Page   
{  
    protected void Page_Load(object sender, EventArgs e)  
    {  
        System.Threading.Thread.CurrentThread.CurrentUICulture = new CultureInfo("ar-SA");  
 
        DataSet ds = new DataSet("NumericPagerDataSet");  
        DataTable dt = new DataTable("GridTable");  
        dt.Columns.Add("Id", System.Type.GetType("System.String"));  
        ds.Tables.Add(dt);  
 
        for (int i = 0; i < 10; i++)  
        {  
            DataRow dr = dt.NewRow();  
            dr.SetField("Id", i.ToString());  
            dt.Rows.Add(dr);  
        }  
 
        RadGrid1.DataSource = ds;  
        RadGrid1.DataBind();  
    }  
}  

The following demo: http://demos.telerik.com/aspnet-ajax/grid/examples/styles/righttoleft/defaultcs.aspx correctly displays the numeric pager hyperlinks right-to-left. I cannot see any obvious difference between my page and the Telerik demo.
I am using RadControls for ASP.NET AJAX Q3 2008.
Any help is greatly appreciated.

7 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 25 Aug 2009, 12:38 PM
grid-rtl.gif
Hello Simon,

The provided code snippet works correctly on my side (see the attached screenshot). Please check for any other settings or CSS styles, which might interfere with your setup. If you need further assistance, please send us a complete runnable project.

Best wishes,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
slam
Top achievements
Rank 1
answered on 25 Aug 2009, 12:49 PM
HI Dimo,
Thanks for your quick response. I am using RadControls for ASP.NET AJAX Q3 2008. Is this likely to make a difference?
Thanks.
0
slam
Top achievements
Rank 1
answered on 25 Aug 2009, 04:15 PM
Hi Dimo,
I downloaded RadControls for ASP.NET AJAX version 2009 Q2 trial and this resolved my issue. However, without upgrading my project to this latest version is there a work-around to correct the problem when using 2008 Q3?
Thanks.
0
Accepted
Dimo
Telerik team
answered on 26 Aug 2009, 08:06 AM
Hello Simon,

With the older RadGrid version you can try the following workaround:

<telerik:RadGrid ID="RadGrid1" runat="server" PageSize="5" Skin="Vista" AllowPaging="True"> 
    <PagerStyle AlwaysVisible="True" Mode="NumericPages" PageButtonCount="5" />
    <MasterTableView Dir="RTL"/> 
    <ClientSettings>
        <ClientEvents OnGridCreated="MyGridCreated" />
    </ClientSettings>
</telerik:RadGrid>


<script type="text/javascript">

function MyGridCreated(sender, args)
{
    var pagerNumbers = $telerik.getElementByClassName(sender.get_element(), "PagerLeft_Vista", "div");
    pagerNumbers.innerHTML = pagerNumbers.innerHTML.replace(/&nbsp;/g, " ");
}

</script>


All the best,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
Jagadeesh siri
Top achievements
Rank 1
answered on 03 Feb 2010, 12:18 PM
Hi Dimo,

I am also using the Q3 2008 rad controls. I am also trying to align the page numbers in Right to left ordering. i have used your solution provided in this thread. This solution has worked in IE and Firefox but not in Safari browser. Iam still facing the same issue in Safari browsers (left to right alignment of page umber ordering). Can you please advise me on this issue to resolve in Safari browsers as well.

Thanks.
0
Dimo
Telerik team
answered on 08 Feb 2010, 08:33 AM
Hi Jagadeesh,

I tested the workaround and it works in Safari 4 - my test page code is below.

Let me know if I am missing something.


<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
 
<script runat="server">
 
    protected void RadGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
    {
        DataTable dt = new DataTable();
        DataRow dr;
        int colsNum = 4;
        int rowsNum = 50;
        string colName = "Column";
 
        for (int j = 1; j <= colsNum; j++)
        {
            dt.Columns.Add(String.Format("{0}{1}", colName, j));
        }
 
        for (int i = 1; i <= rowsNum; i++)
        {
            dr = dt.NewRow();
 
            for (int k = 1; k <= colsNum; k++)
            {
                dr[String.Format("{0}{1}", colName, k)] = String.Format("{0}{1} Row{2}", colName, k, i);
            }
            dt.Rows.Add(dr);
        }
 
        (sender as RadGrid).DataSource = dt;
    }
     
</script>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 
<head runat="server">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>RadControls</title>
</head>
<body dir="rtl">
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
 
<telerik:RadGrid
    ID="RadGrid1"
    runat="server"
    AllowPaging="true"
    PageSize="5"
    OnNeedDataSource="RadGrid_NeedDataSource">
    <MasterTableView Dir="RTL" />
    <PagerStyle Mode="NumericPages" />
    <ClientSettings>
        <ClientEvents OnGridCreated="MyGridCreated" />
    </ClientSettings>
</telerik:RadGrid>
 
<script type="text/javascript">
 
function MyGridCreated(sender, args)
{
    var pagerNumbers = $telerik.getElementByClassName(sender.get_element(), "PagerLeft_Default", "div");
    pagerNumbers.innerHTML = pagerNumbers.innerHTML.replace(/ /g, " ");
}
 
</script>
 
</form>
</body>
</html>


All the best,
Dimo
the Telerik team

Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Follow the status of features or bugs in PITS and vote for them to affect their priority.
0
Dimo
Telerik team
answered on 08 Feb 2010, 09:23 AM
Hello again,

After testing with Safari 3, it turned out that the Javascript workaround does not work there. Here is a server-side workaround:

<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
 
<script runat="server">
 
    protected void RadGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
    {
        DataTable dt = new DataTable();
        DataRow dr;
        int colsNum = 4;
        int rowsNum = 50;
        string colName = "Column";
 
        for (int j = 1; j <= colsNum; j++)
        {
            dt.Columns.Add(String.Format("{0}{1}", colName, j));
        }
 
        for (int i = 1; i <= rowsNum; i++)
        {
            dr = dt.NewRow();
 
            for (int k = 1; k <= colsNum; k++)
            {
                dr[String.Format("{0}{1}", colName, k)] = String.Format("{0}{1} Row{2}", colName, k, i);
            }
            dt.Rows.Add(dr);
        }
 
        (sender as RadGrid).DataSource = dt;
    }
 
    protected void RadGrid_ItemCreated(object sender, GridItemEventArgs e)
    {
        if (e.Item is GridPagerItem)
        {
            GridPagerItem item = e.Item as GridPagerItem;
            foreach (Control c in item.PagerContentCell.Controls[0].Controls)
            {
                if (c is LiteralControl && (c as LiteralControl).Text == " ")
                {
                    (c as LiteralControl).Text = " ";
                }
            }
        }
    }
     
</script>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 
<head runat="server">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>RadControls</title>
</head>
<body dir="rtl">
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
 
<telerik:RadGrid
    ID="RadGrid1"
    runat="server"
    AllowPaging="true"
    PageSize="5"
    OnItemCreated="RadGrid_ItemCreated"
    OnNeedDataSource="RadGrid_NeedDataSource">
    <MasterTableView Dir="RTL" />
    <PagerStyle Mode="NumericPages" />
</telerik:RadGrid>
 
</form>
</body>
</html>


Best wishes,
Dimo
the Telerik team

Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Follow the status of features or bugs in PITS and vote for them to affect their priority.
Tags
Grid
Asked by
slam
Top achievements
Rank 1
Answers by
Dimo
Telerik team
slam
Top achievements
Rank 1
Jagadeesh siri
Top achievements
Rank 1
Share this question
or