我正在使用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();
}
一切如预期, 现在我想要的是 在页面加载时,我只想显示图标而不是图标和文本,而鼠标悬停时我想显示图标和文本
现在,这里是我面临的问题,我无法设置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..
}