Click here to Skip to main content
Click here to Skip to main content

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

, 25 Nov 2008
Rate this:
Please Sign up or sign in to vote.
One out of multiple datatype controls can be shown in a single column of a Datagrid based on row datatype (Customized datagrid column)
GridMultipleTypeImg.JPG

Introduction

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.

Background

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"),
	Category("Appearance")]
   String = 1,
   [Description("Any integer value-corresponding control:Textbox"), 
	Category("Appearance")]
   Integer = 2,
   [Description("Any boolean value-corresponding control:Checkbox"), 
	Category("Appearance")]
   Boolean = 3,
   [Description("Any Text-corresponding control:TextBoxArea"), 
	Category("Appearance")]
   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">
   <Columns>
      <asp:BoundColumn DataField="DType" Visible="False" ></asp:BoundColumn>
      <asp:BoundColumn DataField="DText" HeaderText="Text" ReadOnly="True">
	</asp:BoundColumn>
      <asp:BoundColumn DataField="DValue" Visible="False"></asp:BoundColumn>
      <asp:TemplateColumn HeaderText="Value">
         <ItemTemplate>
            <asp:TextBox ID="txtSample" runat="server" CssClass="TextStyle">
			</asp:TextBox>
            <asp:CheckBox ID="chkSample" runat="server" CssClass="TextStyle"/>
            <asp:TextBox ID="txtAreaSample" TextMode="MultiLine" 
		runat="server" CssClass="TextStyle"></asp:TextBox>
         </ItemTemplate>
      </asp:TemplateColumn>                            
   </Columns>                                    
</asp:DataGrid>

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 = 
							e.Item.Cells[2].Text;
               break;
      case ObjectTypes.Boolean:
               ((CheckBox)e.Item.Cells[3].FindControl("chkSample")).Visible = true;
               ((CheckBox)e.Item.Cells[3].FindControl("chkSample")).Checked = 
					Convert.ToBoolean(e.Item.Cells[2].Text);
               break;
      case ObjectTypes.Text:
               ((TextBox)e.Item.Cells[3].FindControl("txtAreaSample")).Visible = true;
               ((TextBox)e.Item.Cells[3].FindControl("txtAreaSample")).Text = 
							e.Item.Cells[2].Text;
               break;
      default:
               ((TextBox)e.Item.Cells[3].FindControl("txtSample")).Visible = true;
               ((TextBox)e.Item.Cells[3].FindControl("txtSample")).Text = 
							e.Item.Cells[2].Text;
               break;
} 

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.

History

  • 25th November, 2008: Initial post

License

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)
India India
Current location: Bangalore, India.
Follow on   Twitter

Comments and Discussions

 
GeneralMy vote of 1 PinmemberAshish Tyagi 4015-Jan-11 9:27 
GeneralMy vote of 2 PinmemberJahmal2316-Nov-10 6:42 
Generalswitch statement PinmemberJahmal2316-Nov-10 6:39 
GeneralGood one PinmemberVani Kulkarni25-Dec-08 2:19 
GeneralRe: Good one PinmemberSandeep Mewara29-Dec-08 17:27 
GeneralMy vote of 1 PinmemberShakeel Hussain1-Dec-08 22:36 
AnswerRe: My vote of 1 PinmemberSandeep Mewara1-Dec-08 23:26 
GeneralCool Idea... PinmemberRickey McWicky1-Dec-08 19:45 
AnswerRe: Cool Idea... PinmemberSandeep Mewara1-Dec-08 23:28 
GeneralNice idea! Pinmemberchkumar26-Nov-08 8:01 
AnswerRe: Nice idea! PinmemberSandeep Mewara26-Nov-08 18:18 
GeneralNice! PinmemberTim Hammer26-Nov-08 0:26 
AnswerRe: Nice! PinmemberSandeep Mewara26-Nov-08 18:19 
GeneralRe: Nice! PinmemberStuart_Mic27-Nov-08 3:06 
GeneralMy vote of 1 PinmemberCPAV25-Nov-08 10:14 
AnswerRe: My vote of 1 PinmemberSandeep Mewara25-Nov-08 18:39 
AnswerRe: My vote of 1 PinmemberTim Hammer25-Dec-08 2:28 
RantWhy on earth would you do this?! [modified] PinmemberMember 246434225-Nov-08 9:31 
AnswerRe: Why on earth would you do this?! PinmemberSandeep Mewara25-Nov-08 18:36 

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

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

| Advertise | Privacy | Mobile
Web03 | 2.8.140721.1 | Last Updated 25 Nov 2008
Article Copyright 2008 by Sandeep Mewara
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid