Click here to Skip to main content
13,863,336 members
Click here to Skip to main content
Add your own
alternative version

Tagged as


44 bookmarked
Posted 2 Mar 2010
Licenced CPOL

Visual Data Binding – Hot Dang!

, 3 Sep 2014
Rate this:
Please Sign up or sign in to vote.
Often, there are many ways to do the same thing in .NET. You can do things the hard way or the easy way. By hard, I mean you can type a lot of code by hand. By easy, I mean you can click and drag and drop.

Often, there are many ways to do the same thing in .NET. You can do things the hard way or the easy way. By hard, I mean you can type a lot of code by hand. By easy, I mean you can click and drag and drop. Guess which method I am going to demonstrate… go on guess… it's OK, I'm grading on a curve…

Before I go any further, here is what we are going to build:

See the blue and yellow bars in the Graphs column? That is what we're going to create.

<Flashback… me as a Cub Scout at a Blue and Gold Banquet… gosh, that was a long time ago.>

Note: To follow this article, you should already know how to drop a DataSource onto a form and bind it to a GridView.

First there is the data. To keep things simple, I added two columns of type int to a table and gave them values between 1 and 100. Here is the data we are going to bind:

ID          CustomerName Ratio_1     Ratio_2
----------- ------------ ----------- -----------
1           Bob          55          34
2           Ellen        33          44
3           Gene         100         2
4           Sue          1           66
5           Larry        34          99
6           Lola         65          45
7           Ahmad        78          23
8           Mary         34          56
9           Albert       45          87

To start, drop a DataSource onto a Form, hook it up to the data, add a GridView and set its DataSource.

Then, using the Smart Tag on the GridView, add a new column:

For the field type, select TemplateField:

Now go back to the GridView Smart Tag window and select "Edit Templates…" You should see an empty ItemTemplate:

From the ToolBox, drag and drop two Panel controls onto the ItemTemplate.

Note: On my machine, I have the ToolBox set to "Auto Hide" and it covered the template when it appeared. So I temporarily "pinned it" using the thumbtack icon to make it possible to drag and drop panel controls onto the template.

Note: One Panel kept dropping inside the other. I had to go into the code behind and undo the nesting manually.

The markup for the template field should look something like this:

<asp:TemplateField HeaderText="Graphs"> 
        <asp:Panel ID="Panel3" runat="server"></asp:Panel> 
        <asp:Panel ID="Panel4" runat="server"></asp:Panel>        

Back in the designer, select a Panel, click its Smart Tag and select "Edit DataBindings…"

In the DataBindings window, click the "Show all properties" checkbox.

Scroll to the Width property.

Select the appropriate database field to bind to:

Do the same for the other Panel (Bind the Width property to the appropriate database field).

When finished, select "End Template Editing".

If you run the form, you'll get an "Invalid Cast" exception. Here is why:

The Width property is a Unit type. It expects a Unit or int type (the Unit type has an implicit operator to cast from int to a Unit type of pixel).

This is for illustration purposes only:

Panel5.Width = Unit.Percentage(50);
Panel5.Width = 45;
Panel5.Width = 45.0;   // Error, wrong type    

Eval() returns a type Object. So, we have to go to the markup code and do the correct cast…I've done one of each:

Width='<%# (int)Eval("Ratio_1") %>'>             
Width='<%# Unit.Pixel((int)Eval("Ratio_2")) %>'        

We're almost there… Since I want the bars to look the same, I created a common CSS class for them:

    border-style: solid;
    border-width: 1px;
    border-color: Black;
    height: 8px;

But each bar should have a different color (partial panel markup below):

CssClass="BarGraph" BackColor="Blue"   Width='<%# (int)Eval("Ratio_1") %>'           
CssClass="BarGraph" BackColor="Yellow" 
	Width='<%# Unit.Pixel((int)Eval("Ratio_2")) %>'

That is it. I went back and hid the two raw data columns and added some GridView auto formatting to 'sex it up' a bit. All that's needed is a legend and it's ready for prime time. You can connect almost any property directly to a database field. I think some of the more useful ones are:

  • Enabled
  • CssClass
  • ToolTip
  • BackColor
  • Visible

All you have to do is drill down to the magic DataBinding screen. This same technique can be used on the other data-centric controls. I hope someone finds this useful. - Steve Wellens.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Steve Wellens
EndWell Software, Inc.
United States United States
I am an independent contractor/consultant working in the Twin Cities area in Minnesota. I work in .Net, Asp.Net, C#, C++, XML, SQL, Windows Forms, HTML, CSS, etc., etc., etc.

You may also be interested in...

Comments and Discussions

QuestionPlease change type Pin
Rage3-Sep-14 2:02
professionalRage3-Sep-14 2:02 
GeneralMy vote of 5 Pin
anoopk012-Aug-13 20:05
memberanoopk012-Aug-13 20:05 
GeneralMy vote of 5 Pin
ketan italiya28-Jul-13 20:19
memberketan italiya28-Jul-13 20:19 
GeneralMy vote of 5 Pin
Manoj Kumar Choubey29-Mar-12 20:13
professionalManoj Kumar Choubey29-Mar-12 20:13 
Generalawesome artical Pin
snopbear31-Oct-10 3:44
membersnopbear31-Oct-10 3:44 
GeneralDataGrid VS GridView Pin
eraser95028-Jul-10 0:31
membereraser95028-Jul-10 0:31 
GeneralMy vote of 5 Pin
shanmugampandian15-Jul-10 4:40
membershanmugampandian15-Jul-10 4:40 
Generalu must use vs2008,right? cause in vs2005 there seems no such dialog window.. Pin
hillyzheng12-Mar-10 2:16
memberhillyzheng12-Mar-10 2:16 
GeneralRe: u must use vs2008,right? cause in vs2005 there seems no such dialog window.. Pin
Steve Wellens12-Mar-10 3:29
memberSteve Wellens12-Mar-10 3:29 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web04 | 2.8.190214.1 | Last Updated 3 Sep 2014
Article Copyright 2010 by Steve Wellens
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid