Ideally, this is what I want: Initially, all the rows in Table 1 should be displayed, with the UnitTypeDescription in an editable combobox in each row, so that the UnitTypeID in Table 1 will be updated if I change the combobox values. The other columns should not be editable.

In order to show UnitTypeDescription – instead of UnitTypeID – in an editable combobox in each row, you can try the use the WebValueList feature of WebGrid. The WebValueList is designed to allow different data to be displayed instead of default cell’s text or value.

This feature is widely used in WebGrid samples. There are numerous sample of WebGrid which uses this: BindWebValueListtoISDataSource.aspx; ColumnsortingwithWebValueList.aspx; DeclarativeWebValueListBinding.aspx; MultipleValuesinWebValueList.aspx.

Below is the snippet code which shows how to declare WebValueList on a WebGrid which is bound to ISDataSource control.

<ISWebGrid:WebGrid ID="WebGrid1" runat="server" ...>
    <RootTable DataKeyField="ProductID" Caption="Products" DataMember="Products">
        <Columns>
            ...
            <ISWebGrid:WebGridColumn Caption="CategoryID" DataMember="CategoryID"
                DataType="System.Int32" EditType="WebComboNET" Name="CategoryID"
                WebComboID="wcCategories" Width="150px">
                <ValueList DataMember="Categories" DataTextField="CategoryName"
                    DataValueField="CategoryID">
                </ValueList>
            </ISWebGrid:WebGridColumn>
        </Columns>
    </RootTable>
    <LayoutSettings AllowEdit="Yes" AllowFilter="Yes">
    </LayoutSettings>
</ISWebGrid:WebGrid>

In the snippet code, the ValueList is implemented at column [CategoryID] and column [SupplierID]. When the grid is displayed in browser, CategoryID and SupplierID in each row is translated to CategoryName and CompanyName respectively.

Last, we can utilize WebCombo control as the edit type of the UnitTypeDescription. This will make the option of ValueList displayed in a combobox control as shown in the following screenshot (taken from WebComboNETasFilterEditType.aspx sample file of WebGrid).

If I expand a row, it should show the child rows with the same column definitions, so that all the columns line up (so the UnitID column for parents and children will be visually lined up, etc). If a row does not have any child rows, it should not display a box to expand that row.

Please allow me to introduce you to the SelfReference table mode. SelfReference table mode enables you to display self-referencing hierarchy table quickly by setting the configuration in SelfReferenceSettings, attached per table. There are numerous UI settings that applicable to this feature –including your specific scenario – such as treeview selection mode, parent root mode, autofit column on expand, and more.

You can bind data usually at it is a normal flat table; the grid will be able to automatically group the child rows based on the SelfReferenceSettings. You can use the SelfReferencingGrid.aspx sample file of WebGrid for your reference.

Please feel free to let us know whether the self-reference approach suits your scenario best.