如何使用动态控件创建可编辑的GridView

Question

How do I create editable gridviews with dynamic controls. The following image gives an idea.

On page load, a gridview will be shown with only a single row other than the header. The row contains two dropdownlist, two textboxes and an image button. Once I enter data in the first row, and then press the image button, a new row with these controls will be created, and so on.

How is this possible?

Answer 1

Gridview by default does not provide a simple way of handling the Insert operations. You will have to perform several steps to handle this.

First of all each gridview column has to be converted to TemplateColumn(TemplateField). Then in the footer template you have to insert your controls(dropdown, textbox etc.)

<asp:TemplateField HeaderText="Item Category">
    <%--Define item template--%>
    <FooterTemplate>    
      <asp:DropDownList ID="dropDownListCategory" runat="server"></asp:DropDownList>
    </FooterTemplate>
</asp:TemplateField>
...... similarly other footer templates

You have to add the onclick Event for the ImageButton.

protected void imageButtonInsert_Click(object sender, EventArgs e)
{
    //Get the gridview row
    GridViewRow row = (sender as Control).NamingContainer as GridViewRow;
    DropDownList dropDownListCategory = row.FindControl("dropDownListCategory") as DropDownList;
    ///Similarly you can access the other controls here

    //If you are using SqlDataSource then you can add/assign these values to the insert parameters
    //Note that, you need to have insertcommand defined for the sql data source with appropreate parameters
    SqlDataSource1.InsertParameters.Add("category", dropDownListCategory.SelectedValue);
    //Similarly assign the other parameter values

    //Call the insert method of the sql data source.
    SqlDataSource1.Insert();

    //If you are not using data source approach, here you can insert the data to 
    // database by calling sql command or other ways


    //Rebind the gridview.
    GridView1.DataBind();

}

This should work, when you have some rows to display in the gridview.

BIG PROBLEM : EMPTY ROWS

The above approach works when you have at least one row in the gridview. But if you do not have any rows, that is for the first time, the gridview will be empty. If the gridview data source is empty, then it does not display anything, even header,footer, rows etc. As a initial workaround, first you need to make the header is always visible

ShowHeaderWhenEmpty="true"  ShowFooter="true"

This makes sure that you have the headers all the time. Now footer will not at all display unless and until there is some row in the gridview. As a work around you can use EmptyDataTemplate of the gridview.

Here you need to add all your controls again, dropdownlist, textboxes etc. Not that you have to use here to make the same layout. You can use the same control ids, so that you dont need to write the codebehind again

<EmptyDataTemplate>
    <tr>
        <td><asp:DropDownList ID="dropDownListCategory" runat="server"></asp:DropDownList></td>
        <td><asp:Button runat="server" CommandName="Insert"  ID="buttonInsert" OnClick="imageButtonInsert_Click" Text="Insert" /></td>
        <%--Other controls go here--%>
    </tr>
</EmptyDataTemplate>

This is now good for both first time and successive load.

The next question you may have is how to bind these dropdowns. For this you need to use the RowCreated event, in which you can access the dropdowns and fill them

protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.Footer || e.Row.RowType == DataControlRowType.EmptyDataRow)
    {
        DropDownList dropDownListCategory = e.Row.FindControl("dropDownListCategory") as DropDownList;
        //similarly access the other controls and bind them
    }
}

Answer 2

For Doing this use can use Dynamic table at client side. where you can create whole table dynamically and also apply styling that can look like grid view. for Styling use can use JQuery DataTables which provice much more controls.

And also by using JQuery DataTables or JQuery Code you can also add rows dynamically at client side.