ASP.NET generated html textarea instead of input type text in a datagrid

aka… learning is growing and growing means growing pains.

One of the wonderful things about ASP.NET is Microsoft’s ASP.NET Web Matrix. It includes a GUI Web Forms designer as well as many excellent templates for data driven pages. It is free, which means that coupled with IIS5.1 on Windows XP or even MONO on Linux, you can develop ASP.NET Web applications for free. There is no need to pay $$$ for Visual Studio.NET.

I’m new to ASP.NET, but since I’m not new to the web or programming, I often find myself trying to do slightly more advanced things with unfamiliar tools. This happened today with the datagrid control. I have a very simple SQL Table that drives a very simple FAQ for a website that is still powered by old ASP. I won’t vent how painful it is to maintain this old ASP code other than this sentance mentioning it. Amazingly, no one ever write a front end for maintaining this table of FAQ entries! Maybe some used Access to maintain it? I find it hard to believe someone actually edited things with direct SQL commands, or SQL Enterprise Manager. I wanted a very easy way to update the FAQ.

ASP.NET’s DataGrid control provides a very easy way to get this done. In fact, with ASP.NET Web Matrix, I was able to say “File->New->Data Pages->Editable Data Grid” and have a template ready for me to change to our environment. I change connectionString, SelectCommand, and the INSERT and UPDATE lines and I had a working page! That was so easy it was awesome! But who wants to edit html in a input type=text html control?

Google Groups didn’t show much about easy solutions for this. The only reply I found suggested using TemplateColumns and inserting the textarea directly. Well, I’ve seen DataGrid TemplateColumns before, and they are an excellent and powerful features, but I wanted a quick hack into editing a table. TemplateColumns would have been overkill.

I learned that ASP.NET doesn’t differentiate between input type=text and textarea. Instead ASP.NET decides which to display at page render time. If the ASP.NET TextBox control is multiline and has row and column counts greater than 1, it renders a textarea instead of an input box. (To be clear, it depends on teh values of TextBox members TextMode, Rows, and Columns.)

The biggest question to me, as a DataGrid newbie, was to find where to set these properties. It must be done programatically at run time, because we don’t have access to the controls at design time. Well, we might have some access to the controls are run time, but that involves the ColumnTemplates that we are trying to avoid. It turns out that the DataGrid.ItemDataBound event is where things need to be.

Add attribute OnItemDataBound="DataGrid_ItemBound" to the asp:datagrid tag.

Then set properties in that event function.
For example:

void DataGrid_ItemBound(object sender, DataGridItemEventArgs e) {
if ( e.Item.Cells[3].Controls.Count > 0 ) {
((TextBox)e.Item.Cells[3].Controls[0]).TextMode = TextBoxMode.MultiLine;
((TextBox)e.Item.Cells[4].Controls[0]).TextMode = TextBoxMode.MultiLine;
((TextBox)e.Item.Cells[3].Controls[0]).Rows = 20;
((TextBox)e.Item.Cells[4].Controls[0]).Rows = 20;
((TextBox)e.Item.Cells[3].Controls[0]).Columns = 40;
((TextBox)e.Item.Cells[4].Controls[0]).Columns = 40;
}
}


The event gets called for every binding. If you are familiar a little with the DataGrid, you know that even in edit mode, the grid is displayed, so the non-edit table cells need to be displayed, so the if block is important here!