Add DataGrid component

[Copilot]

Implements DataGrid control for compatibility with ASP.NET 1.x Web Forms applications during migration. While superseded by GridView in ASP.NET 2.0, DataGrid remains widely used in legacy systems.

Implementation

• Component: DataGrid with auto-column generation, manual column definition, header visibility, and empty data text support
• Column Types: Reuses GridView's BoundField, ButtonField, HyperLinkField, and TemplateField
• Event Model: Uses "Item" prefix (OnItemCommand, OnEditCommand) vs GridView's "Row" prefix for Web Forms compatibility
• API Differences: DataKeyField (singular) vs GridView's DataKeyNames (plural)

Usage

<DataGrid ItemType="Customer"
          AutoGenerateColumns="false"
          DataKeyField="CustomerID"
          SelectMethod="GetCustomers"
          EmptyDataText="No data available">
    <Columns>
        <BoundField ItemType="Customer" DataField="CustomerID" HeaderText="ID" />
        <BoundField ItemType="Customer" DataField="CompanyName" HeaderText="Company" />
        <ButtonField ButtonType="ButtonType.Button" 
                     CommandName="Edit" 
                     Text="Edit" />
    </Columns>
</DataGrid>

Testing & Documentation

• 4 bUnit tests covering data binding, auto-generation, empty states, and header control
• 3 sample pages demonstrating component features (Default, Auto-Generated Columns, Show/Hide Header)
• Integration tests for all DataGrid sample pages
• Comprehensive migration guide comparing DataGrid vs GridView
• DataGrid added to navigation tree and home page component list
• Status: Data Controls now 6/8 complete (75%)

Screenshots

Home page with DataGrid in component list:

Navigation tree with DataGrid:

DataGrid sample page:

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Add DataGrid Componant</issue_title>
<issue_description>Would be great if you can add a DataGrid support as we were using it heavily in our system or if there is an easy swappable already implemented component.

Sample ASPX code:

<asp:DataGrid ID="dgCountries" CellSpacing="2" CellPadding="1" runat="server" EnableViewState="true" CssClass="table"
BorderWidth="0px" BorderStyle="None" DataKeyField="COUNTRY_ID" OnDeleteCommand="deleteCountry"
AllowSorting="false" AutoGenerateColumns="false">




<asp:TemplateColumn HeaderText="Country">


<asp:Label runat="server" Text='<%# htmlEncode(Container.DataItem, "COUNTRY_NAME")%>' ID="lblCountry">
</asp:Label>

</asp:TemplateColumn>
<asp:ButtonColumn HeaderStyle-Width="30" ItemStyle-CssClass="iconCell" Text="<i class='deleteIcon' alt='Delete' title='Delete'> </i>"
CommandName="Delete"></asp:ButtonColumn>

</asp:DataGrid>
</issue_description>

<agent_instructions>Create a DataGrid component using techniques similar to our GridView. Be sure to create docs, samples, integrations tests, and update the status.md file</agent_instructions>

Comments on the Issue (you are @copilot in this section)

• Fixes Add DataGrid Componant #272

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[csharpfritz]

@copilot Add the DataGrid to the samples navigation tree and the samples home page list of controls

[Copilot]

@copilot Add the DataGrid to the samples navigation tree and the samples home page list of controls

Added in commit c17ba19:

• Navigation tree now includes DataGrid with sub-pages (Default, Auto-Generated Columns, Show/Hide Header)
• Home page component list now includes DataGrid link in Data Controls section
• Integration tests updated to include all DataGrid sample pages

Screenshots:

• Home page with DataGrid in list: https://github.com/user-attachments/assets/19220f46-6a4e-4bb9-a482-a429de70888d
• Navigation tree with DataGrid expanded: https://github.com/user-attachments/assets/3f6f9fa8-1d83-4378-bc20-8118104762da
• DataGrid sample page: https://github.com/user-attachments/assets/b112472c-42bc-4a5e-9b2b-85f9b709c9e8