Sandeep Mewara">
Click here to Skip to main content
15,389,746 members
Articles / Web Development / HTML
Posted 16 Oct 2008


34 bookmarked

Multiple Datatypes in a Single Column of a DataGrid in a Web Application

Rate me:
Please Sign up or sign in to vote.
4.77/5 (30 votes)
25 Nov 2008CPOL3 min read
One out of multiple datatype controls can be shown in a single column of a Datagrid based on row datatype (Customized datagrid column)


A lot of times, it is required to show and get data in a tabular form where a single column needs to handle multiple data types. Something similar to the above image - a table or a grid with two or more columns where the first column displayed is a sort of caption for that row and the second column needs to show the data related to that caption.

For example, there is a Web application where one needs to fill in some data based on certain selection (let's say 1 out of 200 items). Based on the item selected, a tabular form appears with couple of columns, the first column being the caption and other column asks for the data with respect to that row caption. Thus, there can be different datatypes for each row and the second column should be able to take up that datatype value. Since there can be hundreds of items and then based on an item, number of data to be filled (with the same or different datatypes), it would be nice and easy to have a grid that populates at runtime based on the item selected.

ASP.NET does not provide any such control for Web Applications, where one can display and get back the data from users as described above. So, I tried to cope with a scenario playing with a DataGrid.


In our current project, we had to do something similar – we were asked to show the data in a tabular form where Row based data type would change (and multiple columns could be present). Thus, multiple data types can exist in a single column and users can view, edit & save the changes made by them.

Using the Code

When I was working on the sample application, I referred to my project work where we had a number of fixed object types – predefined (custom along with standard). So I made the sample application where it can take any defined object type that needs to be displayed in a datagrid column:

public enum ObjectTypes : byte
   //Define all the object types expected
   [Description("Any string value-corresponding control:Textbox"),
   String = 1,
   [Description("Any integer value-corresponding control:Textbox"), 
   Integer = 2,
   [Description("Any boolean value-corresponding control:Checkbox"), 
   Boolean = 3,
   [Description("Any Text-corresponding control:TextBoxArea"), 
   Text = 4

Out here, we had defined few object types expected for the data-display. Now, data that was supplied from the Business layer to bind needs to be in a form that tells the data type along with data description for a particular row (because this information will help us in selecting the control at runtime). To give a sample:

dt.Rows.Add(ObjectTypes.String,"Name", "Sandeep Mewara");
dt.Rows.Add(ObjectTypes.Integer, "Age", 25);
dt.Rows.Add(ObjectTypes.Text, "Address", "Koramangala, Bangalore");          
dt.Rows.Add(ObjectTypes.Boolean, "Single?", true);

We supply this data fetched to the datagrid. In order to display respective controls, we had designed the grid in a fashion where all the possible controls are present in the item template of a particular column.

<asp:DataGrid ID="dgSample" runat="server" 
	OnItemDataBound="dgSample_ItemDataBound" AutoGenerateColumns="False">
      <asp:BoundColumn DataField="DType" Visible="False" ></asp:BoundColumn>
      <asp:BoundColumn DataField="DText" HeaderText="Text" ReadOnly="True">
      <asp:BoundColumn DataField="DValue" Visible="False"></asp:BoundColumn>
      <asp:TemplateColumn HeaderText="Value">
            <asp:TextBox ID="txtSample" runat="server" CssClass="TextStyle">
            <asp:CheckBox ID="chkSample" runat="server" CssClass="TextStyle"/>
            <asp:TextBox ID="txtAreaSample" TextMode="MultiLine" 
		runat="server" CssClass="TextStyle"></asp:TextBox>

We will handle a different datatype in the 'dgSample_ItemDataBound' handler defined for the datagrid. Out here, we will traverse row-wise. We will find the datatype of the row and then based on the datatype, we will set the control required.

ObjectTypes currType = (ObjectTypes)Enum.Parse(typeof(ObjectTypes),dataType);
//Display the controls that is needed
switch (currType)
      case ObjectTypes.String:
          ((TextBox)e.Item.Cells[3].FindControl("txtSample")).Visible = true;
               ((TextBox)e.Item.Cells[3].FindControl("txtSample")).Text = 
      case ObjectTypes.Boolean:
               ((CheckBox)e.Item.Cells[3].FindControl("chkSample")).Visible = true;
               ((CheckBox)e.Item.Cells[3].FindControl("chkSample")).Checked = 
      case ObjectTypes.Text:
               ((TextBox)e.Item.Cells[3].FindControl("txtAreaSample")).Visible = true;
               ((TextBox)e.Item.Cells[3].FindControl("txtAreaSample")).Text = 
               ((TextBox)e.Item.Cells[3].FindControl("txtSample")).Visible = true;
               ((TextBox)e.Item.Cells[3].FindControl("txtSample")).Text = 

Now, we are able to show the data in a tabular form, where the single column is showing different data types. Similar to the above, we can fetch the data entered by the user in order to capture and save whatever is entered. I have attached a full sample application doing the same.

Points of Interest

Though there was no such control that could have done this directly, Datagrid proved itself a control strong enough to handle scenarios like this very easily. One can add a number of validations to the respective datatype control too, like textbox that accepts only integer, etc.

It was a good play with datagrid that met our condition of something similar to Property Grid present in Windows.


  • 25th November, 2008: Initial post


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


About the Author

Sandeep Mewara
Software Developer (Senior) Intuit India
India India

Comments and Discussions

GeneralMy vote of 1 Pin
Ashish Tyagi 4015-Jan-11 9:27
MemberAshish Tyagi 4015-Jan-11 9:27 
GeneralMy vote of 2 Pin
Jahmal2316-Nov-10 6:42
MemberJahmal2316-Nov-10 6:42 
Generalswitch statement Pin
Jahmal2316-Nov-10 6:39
MemberJahmal2316-Nov-10 6:39 
GeneralGood one Pin
Vani Kulkarni25-Dec-08 2:19
professionalVani Kulkarni25-Dec-08 2:19 
GeneralRe: Good one Pin
Sandeep Mewara29-Dec-08 17:27
mveSandeep Mewara29-Dec-08 17:27 
GeneralMy vote of 1 Pin
Shakeel Hussain1-Dec-08 22:36
MemberShakeel Hussain1-Dec-08 22:36 
AnswerRe: My vote of 1 Pin
Sandeep Mewara1-Dec-08 23:26
mveSandeep Mewara1-Dec-08 23:26 
GeneralCool Idea... Pin
Rickey McWicky1-Dec-08 19:45
MemberRickey McWicky1-Dec-08 19:45 
AnswerRe: Cool Idea... Pin
Sandeep Mewara1-Dec-08 23:28
mveSandeep Mewara1-Dec-08 23:28 
GeneralNice idea! Pin
chkumar26-Nov-08 8:01
Memberchkumar26-Nov-08 8:01 
AnswerRe: Nice idea! Pin
Sandeep Mewara26-Nov-08 18:18
mveSandeep Mewara26-Nov-08 18:18 
GeneralNice! Pin
Tim Hammer26-Nov-08 0:26
MemberTim Hammer26-Nov-08 0:26 
AnswerRe: Nice! Pin
Sandeep Mewara26-Nov-08 18:19
mveSandeep Mewara26-Nov-08 18:19 
GeneralRe: Nice! Pin
Stuart_Mic27-Nov-08 3:06
MemberStuart_Mic27-Nov-08 3:06 
GeneralMy vote of 1 Pin
CPAV25-Nov-08 10:14
MemberCPAV25-Nov-08 10:14 
AnswerRe: My vote of 1 Pin
Sandeep Mewara25-Nov-08 18:39
mveSandeep Mewara25-Nov-08 18:39 
AnswerRe: My vote of 1 Pin
Tim Hammer25-Dec-08 2:28
MemberTim Hammer25-Dec-08 2:28 
RantWhy on earth would you do this?! [modified] Pin
Member 246434225-Nov-08 9:31
MemberMember 246434225-Nov-08 9:31 
AnswerRe: Why on earth would you do this?! Pin
Sandeep Mewara25-Nov-08 18:36
mveSandeep Mewara25-Nov-08 18:36 

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.