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

RadGrid Context Menu Right-To-Left (RTL)

6 Answers 317 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Daniel
Top achievements
Rank 1
Daniel asked on 29 May 2014, 07:23 AM
Hi,

I am
using a RadGrid in my project and have the following code:

<body dir="rtl">

RadGrid1.MasterTableView.Dir = GridTableTextDirection.RTL


I am experiencing the following problems:

1. Pressing right click on the grid's header cell, context menu is shown on the side.
(For all headers cells it's shown in the same position - in the side, instead of showing below each header cell).
 Please see number 1 circled, in the image attached.


2. The list of columns in the context menu is aligned to the right but the check box
is still in the left side. I want the checkboxes to appear also at right. Please
see number 2 circled, in the image attached. 

I appreciate your help.

Thanks,

Daniel.

6 Answers, 1 is accepted

Sort by
0
Venelin
Telerik team
answered on 03 Jun 2014, 06:41 AM
Hi Daniel,

I am not sure if I understand the first issue. Could you please provide more detailed explanation. On my side, when you click with right mouse button on the header the context menu appear just next to the mouse pointer as expected. Please disable your custom styles (if any).

For the second issue, use the following CSS:

.RadMenu_Context_rtl {
    direction: rtl;
}

Regards,
Venelin
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Daniel
Top achievements
Rank 1
answered on 05 Jun 2014, 03:46 PM
Hi Venelin.

Thank you, You indeed  resolved the second issue .

But regarding the first problem:
The grid and the page are defined as follows:
<!DOCTYPE html>
 
<head runat="server">
    <title></title>
    <style type="text/css">
        .RadMenu_Context_rtl {
    direction: rtl;
}
 
      
    </style>
</head>
<body dir="rtl">
    <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            <Scripts>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js">
                </asp:ScriptReference>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js">
                </asp:ScriptReference>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js">
                </asp:ScriptReference>
            </Scripts>
        </telerik:RadScriptManager>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        </telerik:RadAjaxManager>
    <div>
    <telerik:RadGrid ID="RadGrid1" runat="server" EnableHeaderContextMenu="true">
 
    </telerik:RadGrid>
        <br />
        <br />
     
    </div>
    </form>
</body>
</html>


(I attached a link to video that shows the problem. 
As you can see, right clicking after RTL mode,
Not places the Context menu at the mouse cursor.)

http://youtu.be/oRIntnmXeJc


Hope for a solution

Daniel.



0
Venelin
Telerik team
answered on 10 Jun 2014, 09:05 AM
Hi Daniel,

I am still not able to replicate the same issue based on the provided code. I created a test page as well as a short video showing the result on my side. Could you please identify if there is any relevant difference between your case and my test case?

Regards,
Venelin
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Daniel
Top achievements
Rank 1
answered on 11 Jun 2014, 08:05 AM
Hello Venelin,

First of all, thanks for your response. 
I tested the code example you gave me, and found the root of the problem. 

Only when there is horizontal scroll bar,( If you have many columns)  the problem occurs.

Regards
Daniel.

p.s.
I added a YouTube link that shows the problem:
http://youtu.be/7-6vw3IIst0






0
Accepted
Venelin
Telerik team
answered on 13 Jun 2014, 08:25 AM
Hi Daniel,

I have examined the problems in details and it seems that the it is in the setup itself rather than in the grid. RadGrid is nested in block-level elements which by default have overflow: visible and display: block. This means that they will expand based on the window width and not the content (i.e. the grid). The grid overflows but the wrappers stay at the same width, combining with the fact that body has rtl results in that the origin (0,0) of the window is displaced. The cleanest and easiest solution would be to simply turn on grid's scroll and you won't have this problem.

Regards,
Venelin
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Daniel
Top achievements
Rank 1
answered on 29 Jun 2014, 02:12 PM
I added :


<div style="top: 0; bottom: 0;  position: absolute;">
    <telerik:RadGrid ID="RadGrid1" runat="server" EnableHeaderContextMenu="true" ClientSettings-Scrolling-AllowScroll="true" Height="100%">
        <MasterTableView Dir="RTL"></MasterTableView>
    </telerik:RadGrid>
</div>

and this is work.
Thanks!!
Tags
Grid
Asked by
Daniel
Top achievements
Rank 1
Answers by
Venelin
Telerik team
Daniel
Top achievements
Rank 1
Share this question
or