Saturday, 22 October 2016

Bind DropDownList in EditItemTemplate of GridView with selected value using Button edit CommandName in asp.net

In this article, I will explain you how to bind DropDownList control in EditItemTemplate of GridView by using CommandName property of Button control. We will also set original value of DropDownList as default selected value while row editing using FindByValue.

Related Articles

  1. How to bind DropDownList control in GridView control in asp.net
  2. How to bind DropDownList in asp.net using dummy DataTable
  3. How to implement cascaded DropDownList in asp.net
  4. How to bind DropDownList from DataBase in ASP.NET with C#

In designer File

In designer file, create a GridView control with OnRowEditing and OnRowCancelingEdit events. Create four TemplateFields for four columns. In 4th TemplateField, create two buttons CommandName="Edit" and CommandName="Cancel". Below is the complete designer code.

<div style="font-family: Arial; ">
<asp:GridView ID="gvEmployee" runat="server" AutoGenerateColumns="False" AllowPaging="True"
    ShowFooter="True" PageSize="5" OnRowCancelingEdit="gvEmployee_RowCancelingEdit"
    OnRowEditing="gvEmployee_RowEditing" CellPadding="2" BackColor="White"
    BorderColor="#CC9966" BorderStyle="None" BorderWidth="1px">
    <FooterStyle BackColor="#FFFFCC" ForeColor="#330099" />
    <HeaderStyle BackColor="#990000" ForeColor="#FFFFCC" Font-Bold="True" />
    <Columns>
        <asp:TemplateField HeaderText="Employee Id">
            <ItemTemplate>
                <asp:Label ID="lblEmpId" runat="server" Text='<%#Eval("EmpId") %>'>
                </asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Employee Name">
            <ItemTemplate>
                <asp:Label ID="lblEmpName" runat="server" Text='<%#Eval("EmpName") %>'>
                </asp:Label>
            </ItemTemplate>
            <EditItemTemplate>
                <asp:TextBox ID="eEmpName" runat="server" Text='<%#Eval("EmpName") %>'>
                </asp:TextBox>
            </EditItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Employee Country">
            <ItemTemplate>
                <asp:Label ID="lblEmpCountry" runat="server" Text='<%#Eval("EmpCountry") %>'>
                </asp:Label>
            </ItemTemplate>
            <EditItemTemplate>
                <asp:DropDownList ID="eddlEmpCountry" runat="server"></asp:DropDownList>
            </EditItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Operation">
            <ItemTemplate>
                <asp:Button ID="btnEdit" Text="Edit" runat="server" CommandName="Edit" />
            </ItemTemplate>
            <EditItemTemplate>
                <asp:Button ID="btnCancel" Text="Cancel" runat="server" CommandName="Cancel" />
            </EditItemTemplate>
        </asp:TemplateField>
    </Columns>
    <PagerStyle BackColor="#FFFFCC" ForeColor="#330099" HorizontalAlign="Center" />
    <RowStyle BackColor="White" ForeColor="#330099" />
    <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="#663399" />
    <SortedAscendingCellStyle BackColor="#FEFCEB" />
    <SortedAscendingHeaderStyle BackColor="#AF0101" />
    <SortedDescendingCellStyle BackColor="#F6F0C0" />
    <SortedDescendingHeaderStyle BackColor="#7E0000" />
</asp:GridView>
</div>

Data Source

To bind GridView, I'm using dummy DataTable as a data source. Here BindEmployeeGrid() method will bind GridView when page is loaded. When GridView is populated, it will look like as shown below.

Bind dropdownlist when row in edit mode

When we will click on the edit button, GridView row will go into edit mode and dropdownlist will be binded in country column. Employee's current country will be selected default.

Set find by value of dropdownlist in edititemtemplate

In Code-Behind File

Include the below Namespace.

using System.Data;

Below is the complete C# code.

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        BindEmployeeGrid();
    }
}

private void BindEmployeeGrid()
{
    //Creating a DataTable
    DataTable dt = new DataTable();

    //adding Columns to DataTable
    dt.Columns.Add("EmpID", typeof(Int32));
    dt.Columns.Add("EmpName", typeof(string));
    dt.Columns.Add("EmpCountry", typeof(string));

    //adding Rows to DataTable
    dt.Rows.Add(1, "Rahul", "India");
    dt.Rows.Add(2, "John", "USA");
    dt.Rows.Add(3, "Mary", "UK");
    dt.Rows.Add(4, "Mathew", "Australia");

    // binding gridview
    gvEmployee.DataSource = dt;
    gvEmployee.DataBind();

}

private DataTable CountryList()
{
    //Creating DataTable for List of Subjects
    DataTable dt = new DataTable();

    //adding Column to DataTable
    dt.Columns.Add("CountryName", typeof(string));

    //adding Rows to DataTable
    dt.Rows.Add("--Select--");
    dt.Rows.Add("Australia");
    dt.Rows.Add("Canada");
    dt.Rows.Add("India");
    dt.Rows.Add("UK");
    dt.Rows.Add("USA");

    return dt;
}

protected void gvEmployee_RowEditing(object sender, GridViewEditEventArgs e)
{

    // finding the employee country before row editing

    Label Country = (Label)gvEmployee.Rows[e.NewEditIndex].FindControl("lblEmpCountry");

    // set the GridView to edit mode
    gvEmployee.EditIndex = e.NewEditIndex;
    BindEmployeeGrid();

    //find the Country DropDownList of EditItemTemplate
    DropDownList eddlEmpCountry = (DropDownList)gvEmployee.Rows[gvEmployee.EditIndex].FindControl(
    "eddlEmpCountry");

    // assigning the Country DataTable to DropDownList
    eddlEmpCountry.DataSource = CountryList();
    eddlEmpCountry.DataTextField = "CountryName";
    eddlEmpCountry.DataValueField = "CountryName";
    eddlEmpCountry.DataBind();

    // set the employees country dropdownlist selected as true using findbyvalue
    eddlEmpCountry.Items.FindByValue(Country.Text).Selected = true;

}

protected void gvEmployee_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e)
{
    //set GridView in initial mode
    gvEmployee.EditIndex = -1;
    BindEmployeeGrid();
}
Share:

0 comments:

Post a Comment

Email Subscription

Subscribe to our newsletter to get the latest articles directly into your inbox

Blog Archive

BUY FROM AMAZON