RadGrid Context Menu Right-To-Left (RTL)

7 posts, 1 answers
  1. Daniel
    Daniel avatar
    159 posts
    Member since:
    Feb 2014

    Posted 29 May 2014 Link to this post

    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.
  2.
  3. Venelin
    Admin
    Venelin avatar
    352 posts

    Posted 03 Jun 2014 Link to this post

    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.

     
  5. Daniel
    Daniel avatar
    159 posts
    Member since:
    Feb 2014

    Posted 05 Jun 2014 in reply to Venelin Link to this post

    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.



  7. Venelin
    Admin
    Venelin avatar
    352 posts

    Posted 10 Jun 2014 Link to this post

    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.

     
  8.
  9. Daniel
    Daniel avatar
    159 posts
    Member since:
    Feb 2014

    Posted 11 Jun 2014 in reply to Venelin Link to this post

    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






  11. Answer
    Venelin
    Admin
    Venelin avatar
    352 posts

    Posted 13 Jun 2014 Link to this post

    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.

     
  13. Daniel
    Daniel avatar
    159 posts
    Member since:
    Feb 2014

    Posted 29 Jun 2014 in reply to Venelin Link to this post

    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!!
  14.
Back to Top