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

Download source - 6.8 KB

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.