Here, in the article I am going to tell you about the Infragistics Progress Bar control, designed to serve a similar purpose, however, it has some very nice distinct features. Professionally designed styles, various themes, orientation such as Vertical or Horizontal progress, and you can also add a Tooltip to the progress bar to make it more informative.
In my previous articles before this one, I have reviewed two very important controls designed by Infragistics, a company that builds custom controls for Asp.Net and other web technologies. The first in the series was about the Asp.Net Data Grid control and the second was about the Hierarchical Data Grid control. Both the controls that I have reviewed are very special in their category and have unique features.
Now, let us get back to this article. You can easily add the progress bar control on your web page, by simply dragging and dropping the control on the page.
<ig:WebProgressBar
ID="WebProgressBar1"
Value="63"
Width="200px"
LabelAlignment="Center"
runat="server">
</ig:WebProgressBar>The default value is always 0%. However, you can set a default value of your choice or according to your client’s requirement. I have assigned its initial value as 63, in above example. This means, the progress will start from 63%. However, I have not assigned the max limit. Therefore, it will stop when it reaches 100%. Default behavior.
Using some of its properties, we can manage this control more professionally. We can assign the minimum and maximum value to make the control understand where to start the progress and when it should end.
Minimum and Maximum Value
<ig:WebProgressBar ID="WebProgressBar1"
Minimum="0"
Maximum="100"
Width="200px"
runat="server" >
</ig:WebProgressBar>In the above example, I have set the minimum and maximum value as 0 and 100. You can set the min and max value from code behind too.
WebProgressBar1.Minimum = 0; WebProgressBar1.Maximum = 100;
To see this progress bar in action, we will write a small jQuery function. First, we need to add a Button control in the markup section in our app. The button’s click event will trigger the progress. Here is the complete markup, followed by the script.
<!DOCTYPE>
<html>
<head>
<script src="ig_ui/js/infragistics.js" type="text/javascript" id="igClientScript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<ig:WebScriptManager ID="WebScriptManager1" runat="server"></ig:WebScriptManager>
<div>
<ig:WebProgressBar ID="WebProgressBar1"
Value="0"
LabelAlignment="LeftOrTop"
Minimum="0"
Maximum="100"
Orientation="Horizontal"
FillDirection="FromLeftOrTop"
Width="200px"
runat="server">
</ig:WebProgressBar>
<input type="button" id="btShowProgress" value="Progress" />
</div>
</body>
<script>
$("#btShowProgress").click(function () {
bar = $find('<%= WebProgressBar1.ClientID%>');
i = bar.get_progressValue();
i = i + 100;
if (i < bar.get_maximum()) {
bar.set_progressValue(i);
}
else {
bar.set_progressValue(100);
}
});
</script>
</html>When you click the button, it will show you the progress starting from 0 until it reaches 100%.
By now, you must be eager to see the output, and it is possible only when you add this control on your application. Don’t scratch your head. Simply go to the Infragistics website and download the developer kit.
Label Alignment
The property LabelAlignment allows you to show the label (for example, 36%) at a desired location inside the progress bar. You can choose from five different values.
01) LabelAlignment= “center” - This is the default value and it shows, a static label at the center of the progress bar.
02) LabelAlignment= “LeftOrTop” – Left of the progress bar.
03) LabelAlignment= “None” – Do not show any label.
04) LabelAlignment= “RightOrBottom” – Right of the progress bar.
05) LabelAlignment= “Running” - The figure will move with progress.
<ig:WebProgressBar ID="WebProgressBar1" Value="60"
LabelAlignment="LeftOrTop"
Minimum="0" Maximum="100"
Width="200px" runat="server" >
</ig:WebProgressBar>Vertical or Horizontal Orientation
You can show the progress bar, either vertically or horizontally, depending upon your requirement.
<ig:WebProgressBar ID="WebProgressBar1"
Value="60"
LabelAlignment="Running"
Minimum="0"
Maximum="100"
Orientation="Horizontal"
Width="200px"
runat="server" >
</ig:WebProgressBar>Orientations are optional. You can adjust the progress bar depending upon the space on your web page.