Componentart. Web. UI. navbar!

I am only studying the usage of this control at work. I will post the implementation method to you. This will avoid wasting too much time !!

Reference control: componentart. Web. UI. navbar

 

Using system;
Using system. Data. sqlclient;
Using system. Data;
Namespace cxcg. system. IFRAME
{
/// <Summary>
/// Summary of menu.
/// </Summary>
Public Class Menu
{
Public common. Function fc = new common. function ();
Public common. Database DB = new common. Database ();
Protected componentart. Web. UI. navbar navbar1;

Private bool isfirst;
Public datatable getleftmenu (INT staffid, int roleid)
{
Datatable dt = new datatable ();
// Staff Staff = new staff (staffid, roleid );
Sqldatareader SDR;
Datarow Dr;

// String admin = staff. menulimit;
String admin= "99,100,101,102,103,104,106,107,108,109,111,114,116,117,118,119,121,125,126,128,131,132,133,134,136,137,138,139,140,141,142,143,145,147,148,149,150,151,152,154,156,157,158,161,163,164,165,166,168,169,170,171,172,174,175,177,178,180,181,182,183,184,191,192,193,194,196,197 ";

DT. Columns. Add ("nodeid", type. GetType ("system. String "));
DT. Columns. Add ("parentnodeid", type. GetType ("system. String "));
DT. Columns. Add ("text", type. GetType ("system. String "));
DT. Columns. Add ("navigateurl", type. GetType ("system. String "));
DT. Columns. Add ("lookid", type. GetType ("system. String "));
DT. Columns. Add ("imageurl", type. GetType ("system. String "));
DT. Columns. Add ("hoverimageurl", type. GetType ("system. String "));
SDR = (sqldatareader) dB. executereader (system. Data. commandtype. storedprocedure, "sp_wa_getusr_purpose", null );
While (SDR. Read ())
{
Dr = DT. newrow ();

Dr [0] = SDR ["PID"]. tostring ();
Dr [1] = SDR ["pzid"]. tostring ();
Dr [2] = SDR ["ptext"]. tostring ();
Dr [3] = SDR ["plink"]. tostring ();
If (Dr [1]. tostring () = "0 ")
{
Dr [4] = "topitemlook ";
}
Dr [5] = SDR ["pimageurl"]. tostring ();
Dr [6] = SDR ["pimageurl"]. tostring ();

DT. Rows. Add (DR );
}

Return DT;
}

///
/// Add a subitem
///
Private void populatesubnavbar (ref datatable DT, string myif, componentart. Web. UI. navbaritem item)
{
String myfilter = "parentnodeid =" + myif;
Foreach (datarow childrow in DT. Select (myfilter ))
{
Componentart. Web. UI. navbaritem childitem = new componentart. Web. UI. navbaritem ();
Childitem. Text = childrow ["text"]. tostring ();

Childitem. navigateurl = "othermenu. aspxmenuid =" + childrow ["nodeid"]. tostring ();
Item. Items. Add (childitem );
}
}

///
/// Create an item
///

Private componentart. Web. UI. navbaritem createitem (datarow dbrow)

{
Componentart. Web. UI. navbaritem item = new componentart. Web. UI. navbaritem ();
Item. Text = dbrow ["text"]. tostring ();
Item. lookid = "topitemlook ";

If (isfirst)
{
Item. Expanded = true;
Isfirst = false;
}
Item. subgroupitemspacing = 15;
Return item;
}

///
/// Create a navbar
///
/// Navbar after initial Modification
Public componentart. Web. UI. navbar instantiatenavbar (INT staffid, int roleid)
{
// Create a new navbar instance
Navbar1 = new componentart. Web. UI. navbar ();

// Create the topitemlook instance and add it to the itemlooks collection
Componentart. Web. UI. itemlook topitemlook = new componentart. Web. UI. itemlook ();
Topitemlook. lookid = "topitemlook ";
Topitemlook. cssclass = "topitem ";
Topitemlook. hovercssclass = "topitemhover ";
Topitemlook. activecssclass = "topitemactive ";
Navbar1.itemlooks. Add (topitemlook );

// Create the defaultitemlook instance and add it to the itemlooks collection
Componentart. Web. UI. itemlook defaultitemlook = new componentart. Web. UI. itemlook ();
Defaultitemlook. lookid = "defaultitemlook ";
Defaultitemlook. imageurl = "folder.gif ";
Defaultitemlook. cssclass = "level2item ";
Defaultitemlook. hovercssclass = "level2itemhover ";
Navbar1.itemlooks. Add (defaultitemlook );

Datatable dt = new datatable ();
Dt = getleftmenu (staffid, roleid );
Int A = DT. Rows. count;
Foreach (datarow dbrow in DT. Rows)
{
If (dbrow ["parentnodeid"]. tostring () = "0 ")
{
Componentart. Web. UI. navbaritem newitem = createitem (dbrow );
Navbar1.items. Add (newitem );
Populatesubnavbar (ref DT, dbrow ["nodeid"]. tostring (), newitem );
}
}

// Set navbar Properties
Navbar1.id = "navbar1 ";
Navbar1.cssclass = "navbar ";
Navbar1.defaultitemlookid = "defaultitemlook ";
Navbar1.imagesbaseurl = "image ";
Navbar1.scrollupimageurl = "scrollup.gif ";
Navbar1.scrolldownimageurl = "scrolldown.gif ";
Navbar1.scrolluphoverimageurl = "scrollup_hover.gif ";
Navbar1.scrolldownhoverimageurl = "scrolldown_hover.gif ";
Navbar1.scrollupactiveimageurl = "scrollup_active.gif ";
Navbar1.scrolldownactiveimageurl = "scrolldown_active.gif ";
Navbar1.scrollupimagewidth = 16;
Navbar1.scrollupimageheight = 16;
Navbar1.scrolldownimagewidth = 16;
Navbar1.scrolldownimageheight = 16;
Navbar1.expandsinglepath = true;
Navbar1.fullexpand = true;
Navbar1.defaulttarget = "othermenuframe ";
Navbar1.width = int. parse ("150 ");
Navbar1.height = int. parse ("560 ");
// Navbar1.height = int. parse ("688 ");

Return navbar1;
}
}
}
 

----------------

Public common. Function fc = new common. function ();
Public common. Database DB = new common. Database ();
Protected system. Web. UI. webcontrols. placeholder placeholder1;
Private bool isfirst;

Private void page_load (Object sender, system. eventargs E)
{
// Place user code here to initialize the page
If (! Ispostback)
{
Menu mu = new menu ();

Placeholder1.controls. Add (
Mu. instantiatenavbar (19,38 ));
}

}

-------------------------------------

CSS

. Navbar
{
Background-color: # dbeaf5;
Border: 1px solid #9d9da1;
Cursor: default;
}

. Topitem
{
Border-Right: #9d9da1 1px solid;
Border-top: White 1px solid;
Font-size: 10pt;
Padding-bottom: 4px;
Border-left: White 1px solid;
Cursor: hand;
Color: white;
Padding-top: 4px;
Border-bottom: #9d9da1 1px solid;
Background-color: #4791c5;
Text-align: center;
}

. Topitemhover
{
Font-size: 10pt;
Border-Right: #9d9da1 2px solid;
Border-top: White 2px solid;
Padding-bottom: 3px;
Border-left: White 2px solid;
Cursor: hand;
Padding-top: 3px;
Border-bottom: #9d9da1 2px solid;
Background-color: #8fc1e6;
Text-align: center;
}

. Topitemactive
{
Font-size: 10pt;
Border-Right: White 2px solid;
Border-top: #9d9da1 2px solid;
Padding-bottom: 3px;
Border-left: #9d9da1 2px solid;
Cursor: hand;
Padding-top: 3px;
Border-bottom: White 2px solid;
Text-align: center;
}

. Level2item
{
Font-size: 9pt;
Cursor: hand;
Color: # 0000cc;
Text-align: center;
}

. Level2itemhover
{
Font-size: 9pt;
Cursor: hand;
Text-align: center;
}

. Level2group
{
Font-size: 9pt;
Border-top-color: # f0f1f5;
Padding-top: 5px;
}

. Empty
{
}

-------------------------