[CLOSED] [#647] V3.0 RTL Position is incorrect

[Abedo1982]

Position is incorrect (ComboBox Menu, Grid Column Menu, Tooltip,...ets).

Try the Example:

<%@ Page Language="C#" %>

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {        
        string text = "\u0635\u0650\u0641 \u062E\u064E\u0644\u0642\u064E \u062E\u064E\u0648\u062F\u0650 \u0643\u064E\u0645\u0650\u062B\u0644\u0650 \u0627\u0644\u0634\u064E\u0645\u0633\u0650 \u0625\u0650\u0630 \u0628\u064E\u0632\u064E\u063A\u064E\u062A \u2014 \u064A\u064E\u062D\u0638\u0649 \u0627\u0644\u0636\u064E\u062C\u064A\u0639\u064F \u0628\u0650\u0647\u0627 \u0646\u064E\u062C\u0644\u0627\u0621\u064E \u0645\u0650\u0639\u0637\u0627\u0631\u0650";
        int i = 50;
        string[] sentences = new string[i];
        string[] words = text.Split(' ');
        string paragraph;
        
        while (i-- > 0) {
            sentences[i] = text;
        }
        paragraph = string.Join(" ", sentences);
        
        object data = new object[] {
            new object[] { words[6], words[8], words[9], words[10], words[11], words[12] },
            new object[] { words[5], words[4], words[3], words[2], words[1], words[0] },
            new object[] { words[12], words[11], words[10], words[9], words[8], words[6] },
            new object[] { words[0], words[1], words[2], words[3], words[4], words[5] },
            new object[] { words[6], words[8], words[9], words[10], words[11], words[12] },
            new object[] { words[5], words[4], words[3], words[2], words[1], words[0] },
            new object[] { words[12], words[11], words[10], words[9], words[8], words[6] },
            new object[] { words[0], words[1], words[2], words[3], words[4], words[5] },
            new object[] { words[6], words[8], words[9], words[10], words[11], words[12] },
            new object[] { words[5], words[4], words[3], words[2], words[1], words[0] },
            new object[] { words[12], words[11], words[10], words[9], words[8], words[6] },
            new object[] { words[0], words[1], words[2], words[3], words[4], words[5] },
            new object[] { words[6], words[8], words[9], words[10], words[11], words[12] },
            new object[] { words[5], words[4], words[3], words[2], words[1], words[0] },
            new object[] { words[12], words[11], words[10], words[9], words[8], words[6] },
            new object[] { words[0], words[1], words[2], words[3], words[4], words[5] },
            new object[] { words[6], words[8], words[9], words[10], words[11], words[12] },
            new object[] { words[5], words[4], words[3], words[2], words[1], words[0] },
            new object[] { words[12], words[11], words[10], words[9], words[8], words[6] },
            new object[] { words[0], words[1], words[2], words[3], words[4], words[5] }
        };

        Viewport viewport = new Viewport
        {
            Layout = "Border",
            RTL = true,
            Items = { 
                new Ext.Net.Panel 
                {
                    Region = Region.North,
                    Title = "\u0634\u0645\u0627\u0644",
                    Height = 100,
                    AutoScroll = true,
                    Collapsible = true,
                    Split = true,    
                    Items= {
                        new Ext.Net.ComboBox 
                        {
                            ID="ComboBox2" ,
                            Width=250,
                            Editable=false,
                            DisplayField="name",
                            ValueField="name",
                            QueryMode=DataLoadMode.Local,
                            TriggerAction=TriggerAction.All,
                            EmptyText="Select a country...",
                            Items = {
                                new Ext.Net.ListItem { Text="Value1", Value="1"},
                                new Ext.Net.ListItem { Text="Value2", Value="2"}
                            }
                          }
                     }
                                    
                },
                
                new Ext.Net.GridPanel
                {
                    Region = Region.Center,
                    Title = "\u0645\u0631\u0643\u0632 \u0627\u0644\u0645\u0646\u0637\u0642\u0629",
                    ColumnModel =
                    {
                        Columns =
                        {
                            new Column { DataIndex = "foo", Text = words[0] },
                            new Column { DataIndex = "bar", Text = words[1] },
                            new Column { DataIndex = "baz", Text = words[2] },
                            new Column { DataIndex = "zork", Text = words[3] },
                            new Column { DataIndex = "gork", Text = words[4] },
                            new Column { DataIndex = "bork", Text = words[5], Flex = 1 }
                        }
                    },
                    Store = 
                    {
                        new Store
                        {
                            Model =
                            {
                                new Model 
                                {
                                    Fields = 
                                    {
                                        new ModelField("foo"),
                                        new ModelField("bar"),
                                        new ModelField("baz"),
                                        new ModelField("zork"),
                                        new ModelField("gork"),
                                        new ModelField("bork")
                                    }
                                }
                            },
                            
                            Reader = 
                            {
                                new ArrayReader()
                            },
                            
                            Data = data
                        }    
                    }
                },
            }
        };

        this.Form.Controls.Add(viewport);
    }    
</script>

<!DOCTYPE html>

<html>
<head id="Head1" runat="server">
    <title>RTL - Ext.NET Examples</title>   
</head>
<body>
    <form id="Form1" runat="server">
        
        <ext:ResourceManager ID="ResourceManager1" runat="server" />  
    </form>
</body>
</html>

[Daniil]

Hi @Abedo1982,

Thank you for the report. We will investigate.

ComboBox Menu, Grid Column Menu, Tooltip

I have reproduced the issue with both the menus, but please clarify what Tooltip do you mean?

[RaphaelSaldanha]

i was also not able to find any Tooltip.

I tried to set RTL = true to all components but it was not possible to overcome the issue by doing so.

[Abedo1982]

Check the new sample with tooltip, it should track the mouse.

<%@ Page Language="C#" %>

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {        
        string text = "\u0635\u0650\u0641 \u062E\u064E\u0644\u0642\u064E \u062E\u064E\u0648\u062F\u0650 \u0643\u064E\u0645\u0650\u062B\u0644\u0650 \u0627\u0644\u0634\u064E\u0645\u0633\u0650 \u0625\u0650\u0630 \u0628\u064E\u0632\u064E\u063A\u064E\u062A \u2014 \u064A\u064E\u062D\u0638\u0649 \u0627\u0644\u0636\u064E\u062C\u064A\u0639\u064F \u0628\u0650\u0647\u0627 \u0646\u064E\u062C\u0644\u0627\u0621\u064E \u0645\u0650\u0639\u0637\u0627\u0631\u0650";
        int i = 50;
        string[] sentences = new string[i];
        string[] words = text.Split(' ');
        string paragraph;
        
        while (i-- > 0) {
            sentences[i] = text;
        }
        paragraph = string.Join(" ", sentences);
        
        object data = new object[] {
            new object[] { words[6], words[8], words[9], words[10], words[11], words[12] },
            new object[] { words[5], words[4], words[3], words[2], words[1], words[0] },
            new object[] { words[12], words[11], words[10], words[9], words[8], words[6] },
            new object[] { words[0], words[1], words[2], words[3], words[4], words[5] },
            new object[] { words[6], words[8], words[9], words[10], words[11], words[12] },
            new object[] { words[5], words[4], words[3], words[2], words[1], words[0] },
            new object[] { words[12], words[11], words[10], words[9], words[8], words[6] },
            new object[] { words[0], words[1], words[2], words[3], words[4], words[5] },
            new object[] { words[6], words[8], words[9], words[10], words[11], words[12] },
            new object[] { words[5], words[4], words[3], words[2], words[1], words[0] },
            new object[] { words[12], words[11], words[10], words[9], words[8], words[6] },
            new object[] { words[0], words[1], words[2], words[3], words[4], words[5] },
            new object[] { words[6], words[8], words[9], words[10], words[11], words[12] },
            new object[] { words[5], words[4], words[3], words[2], words[1], words[0] },
            new object[] { words[12], words[11], words[10], words[9], words[8], words[6] },
            new object[] { words[0], words[1], words[2], words[3], words[4], words[5] },
            new object[] { words[6], words[8], words[9], words[10], words[11], words[12] },
            new object[] { words[5], words[4], words[3], words[2], words[1], words[0] },
            new object[] { words[12], words[11], words[10], words[9], words[8], words[6] },
            new object[] { words[0], words[1], words[2], words[3], words[4], words[5] }
        };

        Viewport viewport = new Viewport
        {
            Layout = "Border",
            RTL = true,
            Items = { 
                new Ext.Net.Panel 
                {
                    Region = Region.North,
                    Title = "\u0634\u0645\u0627\u0644",
                    Height = 100,
                    AutoScroll = true,
                    Collapsible = true,
                    Split = true,    
                    Items= {
                        new Ext.Net.ComboBox 
                        {
                            ID="ComboBox2" ,
                            Width=250,
                            Editable=false,
                            DisplayField="name",
                            ValueField="name",
                            QueryMode=DataLoadMode.Local,
                            TriggerAction=TriggerAction.All,
                            EmptyText="Select a country...",
                            Items = {
                                new Ext.Net.ListItem { Text="Value1", Value="1"},
                                new Ext.Net.ListItem { Text="Value2", Value="2"}
                            }
                          },
                          new ToolTip 
                          {
                              Target="ComboBox2",
                              TrackMouse=true,
                              Title="Mouse Track",
                              Width=200,
                              Html="This tip will follow the mouse while it is over the element"                              
                          }
                     }
                                    
                },
                
                new Ext.Net.GridPanel
                {
                    Region = Region.Center,
                    Title = "\u0645\u0631\u0643\u0632 \u0627\u0644\u0645\u0646\u0637\u0642\u0629",
                    ColumnModel =
                    {
                        Columns =
                        {
                            new Column { DataIndex = "foo", Text = words[0] },
                            new Column { DataIndex = "bar", Text = words[1] },
                            new Column { DataIndex = "baz", Text = words[2] },
                            new Column { DataIndex = "zork", Text = words[3] },
                            new Column { DataIndex = "gork", Text = words[4] },
                            new Column { DataIndex = "bork", Text = words[5], Flex = 1 }
                        }
                    },
                    Store = 
                    {
                        new Store
                        {
                            Model =
                            {
                                new Model 
                                {
                                    Fields = 
                                    {
                                        new ModelField("foo"),
                                        new ModelField("bar"),
                                        new ModelField("baz"),
                                        new ModelField("zork"),
                                        new ModelField("gork"),
                                        new ModelField("bork")
                                    }
                                }
                            },
                            
                            Reader = 
                            {
                                new ArrayReader()
                            },
                            
                            Data = data
                        }    
                    }
                },
            }
        };

        this.Form.Controls.Add(viewport);
    }    
</script>

<!DOCTYPE html>

<html>
<head id="Head1" runat="server">
    <title>RTL - Ext.NET Examples</title>   
</head>
<body>
    <form id="Form1" runat="server">
        
        <ext:ResourceManager ID="ResourceManager1" runat="server" />  
    </form>
</body>
</html>

[Daniil]

Thank you for the test case.

There are two moments.

1. When I tested the test case with the latest Ext.NET, the error occurs because of the ToolTip definition. For some reason, it works with v3.0, but it is an incorrect definition and it is stopped working in Ext.NET. When the Tooltip is instantiated with Target="ComboBox2", the ComboBox2 HTML element is not rendered yet. Again, for some reason it works with v3.0, but it is unexpected. If you need to apply a ToolTip on a Component like a ComboBox, please use a ToolTips collection. Then a ToolTip should be instantiated in time.

new Ext.Net.ComboBox 
{
    ...
    ToolTips =
    {
        new ToolTip
        {
            TrackMouse = true,
            Title = "Mouse Track",
            Width = 200,
            Html = "This tip will follow the mouse while it is over the element"
        }      
    }
}

2. RTL is broken in Ext.NET v3.0. At least, if a Viewport is used. Thank you for the pointing out the problem! Created an Issue:
https://github.com/extnet/Ext.NET/issues/647

Fixed in the revision 6266 (trunk). It goes to v3.1.0 beta.

I close the thread. Though, please feel free to update with any relevant information.