从javascript处理radpanelbar的宽度

时间:2018-07-05 08:53:14

标签: javascript asp.net radpanelbar

我正在使用radpanelbar进行导航。

让我先向您展示它是标记。

<telerik:RadPanelBar ID="rpb_menu" runat="server" DataValueField="NavID" DataTextField="NavigationText" ExpandMode="MultipleExpandedItems" DataFieldID="NavID"
                     DataFieldParentID="NavParentID" AllowCollapseAllItems="false" Skin="Web20" OnItemDataBound="rpb_menu_OnItemDataBound" OnClientMouseOver="onMouseOver" OnClientMouseOut="onMouseOut" OnClientLoad="onClientLoad">
            </telerik:RadPanelBar>

现在让我们将其与数据绑定

protected void Page_Load(object sender, EventArgs e)
        {
            BindMenu();
        }

        private void BindMenu()
        {
            DataTable dtMenu = new DataTable();
            dtMenu.Columns.AddRange(new[] { new DataColumn("NavID", typeof(int)), new DataColumn("NavParentID", typeof(int)), new DataColumn("NavigationText"),new DataColumn("ImageUrl")});
            DataRow dr = dtMenu.NewRow();
            dr["NavID"] = 1; dr["NavParentID"] = DBNull.Value; dr["NavigationText"] = "Home"; dr["ImageUrl"] = "~/Images/home_icon.png";
            dtMenu.Rows.Add(dr);
            DataRow dr2 = dtMenu.NewRow();
            dr2["NavID"] = 2; dr2["NavParentID"] = DBNull.Value; dr2["NavigationText"] = "AboutUs"; dr2["ImageUrl"] = "~/Images/about.png";
            dtMenu.Rows.Add(dr2);
            DataRow dr3 = dtMenu.NewRow();
            dr3["NavID"] = 3; dr3["NavParentID"] = DBNull.Value; dr3["NavigationText"] = "ContactUs"; dr3["ImageUrl"] = "~/Images/contactus.png";
            dtMenu.Rows.Add(dr3);
            DataRow dr4 = dtMenu.NewRow();
            dr4["NavID"] = 4; dr4["NavParentID"] = 1; dr4["NavigationText"] = "Sub Home"; dr4["ImageUrl"] = "~/Images/subhome.png";
            dtMenu.Rows.Add(dr4);
            DataRow dr5 = dtMenu.NewRow();
            dr5["NavID"] = 5; dr5["NavParentID"] = 4; dr5["NavigationText"] = "Sub Sub Home";
            dtMenu.Rows.Add(dr5);
            ViewState["nav_items"] = dtMenu;

            rpb_menu.DataSource = dtMenu;
            rpb_menu.DataBind();

        }

        protected void rpb_menu_OnItemDataBound(object sender, RadPanelBarEventArgs e)
        {
            DataTable dt =  ViewState["nav_items"] as DataTable;
            e.Item.ImageUrl = dt.AsEnumerable().Single(i => i["NavID"].ToString() == e.Item.Value)["ImageUrl"].ToString();
        }

现在这样显示 enter image description here

一切如预期, 现在我想要的是  在页面加载时,我只想显示图标而不是图标和文本,而鼠标悬停时我想显示图标和文本

现在,这里是我面临的问题,我无法设置width属性。

function onMouseOut(sender, eventArgs) {
                debugger;
                // set width to show only icons..
            }

            function onMouseOver(sender, eventArgs) {
                debugger;
              // set width to show icons and text..
            }

            function onClientLoad(sender, eventArgs) {
                debugger;
            // set width to show only icons..
            }

0 个答案:

没有答案