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;
    }

更改方向Devexpress使用javascript调整窗口大小的MenuBar控件

1 个答案: