使用 javascript window 调整大小时更改方向 Devexpress MenuBar 控件

Question

我有一个带有多个子菜单的 Devexpress MenuBar 控件。我想使用 Javascript 动态更改菜单栏方向。到目前为止我尝试的是：

<script type="text/javascript">
     window.onresize = function () {
        if (window.innerWidth <= 1100) {
                RASPxMenuViewSetting.SetOrientation('Vertical');   
                                       }
                                    }
</script>

我的菜单代码在哪里：

<dx:ASPxMenu ID="ASPxMenuViewSetting" runat="server" EnableTheming="True" ClientInstanceName="RASPxMenuViewSetting">
    <Items>//contains Submenus  </Items>
</dx:ASPxMenu>

我在调试时出错的地方

Uncaught TypeError: RASPxMenuViewSetting.SetOrientation is not a function

你能帮忙解决一下吗？

Answer 1

我从 Devexpress 团队得到了如下对我有用的答案：

Javascript

 <script type="text/javascript">
        function OnControlsInitialized(s, e) {
            ASPxClientUtils.AttachEventToElement(window, "resize", function (evt) {
                if (cp.InCallback())
                    return;
                if (window.innerWidth <= 1100) {
                    if (RASPxMenuViewSetting.cpOrientation != "Vertical")
                        cp.PerformCallback("Vertical");
                }
                else
                    if (RASPxMenuViewSetting.cpOrientation != "Horizontal")
                        cp.PerformCallback("Horizontal");
            });
        }
    </script>

ASPX 文件

<dx:ASPxCallbackPanel ID="ASPxCallbackPanel1" runat="server" Width="200px" ClientInstanceName="cp" OnCallback="ASPxCallbackPanel1_Callback">
            <PanelCollection>
                <dx:PanelContent runat="server">
                    <dx:ASPxMenu ID="ASPxMenuViewSetting" runat="server" ClientInstanceName="RASPxMenuViewSetting" EnableTheming="True" ItemWrap="false">
                        <Items>
                            <dx:MenuItem Text="Item 1">
                            </dx:MenuItem>
                            <dx:MenuItem Text="Item 2">
                            </dx:MenuItem>
                            <dx:MenuItem Text="Item 3">
                            </dx:MenuItem>
                            <dx:MenuItem Text="Item 4">
                            </dx:MenuItem>
                        </Items>
                    </dx:ASPxMenu>
                </dx:PanelContent>
            </PanelCollection>
        </dx:ASPxCallbackPanel>
        <dx:ASPxGlobalEvents ID="ASPxGlobalEvents1" runat="server">
            <ClientSideEvents ControlsInitialized="OnControlsInitialized" />
        </dx:ASPxGlobalEvents>

并且还需要如下更改cs文件：

protected void ASPxCallbackPanel1_Callback(object sender, DevExpress.Web.CallbackEventArgsBase e)
    {
        if (e.Parameter == "Vertical")
            ASPxMenuViewSetting.Orientation = Orientation.Vertical;
        else
            ASPxMenuViewSetting.Orientation = Orientation.Horizontal;

        ASPxMenuViewSetting.JSProperties["cpOrientation"] = e.Parameter;
    }

使用 javascript window 调整大小时更改方向 Devexpress MenuBar 控件

Change Orientation Devexpress MenuBar control on window resize using javascript

javascript

asp.net

devexpress