Tuesday, July 10, 2018

Bullet List in ASP.Net with Different Style and Features

Bullet List in ASP.Net with Different Style and Features

In ASP.Net whenever you start design a WebForm, you may use a bullet List where your desire content will present, you can use this BulletedList as Text, Hyperlink or LinkButton mode. You can adjust List with numbers order or bullet order. So, lets understand about Bullet List in ASP.Net with different style and features

Now, we will learn how to use this control in ASP.Net with Following Steps:

  1. How To add BulletedList with Items?
  2. How To Change Style of BulletedList?

(1) How To add BulletedList with Items?
For Adding this control, go to ToolBox and Find “BulletedList” control and select it. Then Drag it to your WebForm. After that click on “BulletedList Tasks” button. This process will present a List with containing “Choose Data Source…” and “Edit Items…”. Click on “Edit Items…” option.

How To Change Text In Uppercase in ASP?


This will present “ListItem Collection Editor” screen. In this Screen. You can add items whatever you want.

Steps:
Go to (ToolBox) >> Select (BulletedList) >> Drag to Webform >> Click (BulletedList Tasks) >> Click (Edit Items…)

Add BulletedList with Items settings in ASP.net
Add BulletedList with Items settings
For add items, just click on “Add” button from “ListItem Collection Editor” screen. Then select one by one item for change Text name. When you select Item, it will show you Properties in right side pane.

How to Pass Parameter in Asp.Net RDLC Report?


Go to “Text” property and change or input text name whatever you want as we mention as “Item Number A”. Like this you can add Items and change item name with following above given image steps.

When you complete this process, the source code of this control will looks like bellow.
<asp:bulletedlist height="60px" id="BulletedList1" runat="server" width="271px">
            <asp:listitem>Item Number A</asp:listitem>
            <asp:listitem>Item Number B</asp:listitem>
            <asp:listitem>Item Number C</asp:listitem> 
</asp:bulletedlist>
(2) How To Change Style of BulletedList?
If you want to change style of this control, you have to go to “Properties” window after selecting this control.
Change Border and color style
BackColor #669999
BorderColor Maroon
BorderStyle Groove
BorderWidth 1px
ForeColor #FFFF99
When you change this settings, it will change this controls looks different as shown bellow image.
BulletedList style with properties settings
properties settings
After complete this process. Lets start next process.

Use of CheckBoxList with Adding Items in ASP.Net.


In Next process, we will change the Bullet Style and Display Mode. When you go to Properties screen, You can choose “Display Mode” in which you can select following mode.
Display Mode
Text
HyperLink
LinkButton
In ASP, there is some bullet style you can use according to your need. There is following BulletStyle in ASP.Net.
BulletStyle
Style Display type
Numbered
1.
LowerAlpha
a.
UpperAlpha
A.
LowerRoman
i.
UpperRoman
I.
Disc
Circle
Square
CustomImage
Inset any image
BulletStyle and DisplayMode setting in BulletedList
BulletStyle and DisplayMode setting
Now after apply these settings you can change the mode and style of this control.
Suppose, you want to change DisplayMode with HyperLink and want to add some Link inside every items.

Learn How to Design Master Page in Asp.Net?


Then go to Source window and apply following link add process.

Link Add Process on this control's Item.
<asp:bulletedlist ID="BulletedList1" runat="server" BackColor="#CCFFFF" BorderColor="Maroon" BorderStyle="Groove" BorderWidth="1px" BulletStyle="Square" ForeColor="#990033" Height="64px" Width="271px" DisplayMode="HyperLink">
            <asp:ListItem Value="http://google.com">Item Number A</asp:ListItem>
            <asp:ListItem Value="http://facebook.com">Item Number B</asp:ListItem>
            <asp:ListItem Value="http://twitter.com">Item Number C</asp:ListItem>
</asp:BulletedList>
Add Link in BulletedList's Items in ASP.Net
Add Link in Items
For add link, you have to pass Value inside “asp:ListItem” as shown above given instruction.
When you run application and click on particular item one by one, it will redirect you to given link. You can also link to you WebForm.
So, this is the way to use BulletedList in ASP.Net with easy step by step process. You can apply this process and change Bullet List in ASP.Net with Different Style and Features with SKOTechLearn.

0 comments: