Accessing text boxes and dropdown list of each row in asp.net GridView separately

Question

I have a grid view as below

<asp:GridView ID="grid_flats_allflatslist" OnRowDeleting="grid_flats_allflatslist_RowDeleting" runat="server" Width="95%" CssClass="gridview" ShowFooter="true" AllowPaging="true" PageSize="8" BackColor="Black" BorderColor="#E7E7FF" BorderStyle="None" BorderWidth="1px" CellPadding="1" CellSpacing="1" frame="below" DataKeyNames="BlockID" AutoGenerateColumns="false">
    <Columns>
        <asp:BoundField DataField="BlockID" HeaderText="Block ID" Visible="false" />
        <asp:BoundField DataField="BlockName" HeaderText="Block Name" />
        <asp:TemplateField HeaderText="Flat Number">
            <ItemTemplate>
                <asp:TextBox ID="text_flats_listflatnumber" CssClass="textbox" onkeypress="return numeric(this);" MaxLength="5" runat="server"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Flat Number">
            <ItemTemplate>
                <asp:DropDownList ID="list_flats_listflattype" CssClass="droplist" runat="server" AutoPostBack="true" OnSelectedIndexChanged="list_flats_listflattype_SelectedIndexChanged">
                    <asp:ListItem Text="Bachelor" Value="Bachelor"></asp:ListItem>
                    <asp:ListItem Text="Family" Value="Family"></asp:ListItem>
                </asp:DropDownList>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Max Vacancy">
            <ItemTemplate>
                <asp:TextBox ID="text_flats_listmaxvacancy" onkeypress="return numeric(this);" MaxLength="2" CssClass="textbox" runat="server"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:CommandField ShowDeleteButton="true" DeleteText="Delete" />
    </Columns>
    <FooterStyle BackColor="#9e4900" ForeColor="#fff1e5" Font-Bold="false" Font-Underline="false" HorizontalAlign="Center" />
    <HeaderStyle BackColor="#9e4900" ForeColor="#fff1e5" HorizontalAlign="Center" />
    <PagerStyle BackColor="#ff8080" ForeColor="#660000" HorizontalAlign="Right" />
    <RowStyle BackColor="#ffe7d6" ForeColor="#660000" HorizontalAlign="Center" />
    <AlternatingRowStyle BackColor="#ffd6ba" ForeColor="#660000" HorizontalAlign="Center" />
    <SelectedRowStyle BackColor="#fff9f4" HorizontalAlign="Center" ForeColor="Black" />
</asp:GridView>

<asp:Button ID="button_flats_flatplus" CssClass="button" Height="30px" Width="25%" runat="server" Text="Add Flat" OnClick="button_flats_flatplus_Click" />

Initially, this is empty and when I click on the button_flats_flatsplus button then a row will be added to the grid view with the field as above. It will also have 2 text boxes and a drop-down list. The button click event is as below.

protected void button_flats_flatplus_Click(object sender, EventArgs e)
{
    DataTable dt;
    DataRow dr = null;
    if (ViewState["CurrentTable"] == null)
    {
        dt = new DataTable();
        dt.Columns.Add(new DataColumn("BlockID", typeof(string)));
        dt.Columns.Add(new DataColumn("BlockName", typeof(string)));
        dt.Columns.Add(new DataColumn("Column1", typeof(string)));
        dt.Columns.Add(new DataColumn("Column2", typeof(string)));
        dt.Columns.Add(new DataColumn("Column3", typeof(string)));
        dr = dt.NewRow();
        dr["BlockID"] = list_flats_blocklist.SelectedValue; // I get this value from a different list
        dr["BlockName"] = list_flats_blocklist.SelectedItem.Text; // I get this value from a different list
        dr["Column1"] = string.Empty;
        dr["Column2"] = string.Empty;
        dr["Column3"] = string.Empty;
        dt.Rows.Add(dr);
        ViewState["CurrentTable"] = dt;
        grid_flats_allflatslist.DataSource = dt;
        grid_flats_allflatslist.DataBind();
    }
    else
    {
        dt = (DataTable) ViewState["CurrentTable"];
        dr = dt.NewRow();
        dr["BlockID"] = list_flats_blocklist.SelectedValue; // I get this value from a different list
        dr["BlockName"] = list_flats_blocklist.SelectedItem.Text; // I get this value from a different list
        dr["Column1"] = string.Empty;
        dr["Column2"] = string.Empty;
        dr["Column3"] = string.Empty;
        dt.Rows.Add(dr);
        ViewState["CurrentTable"] = dt;
        grid_flats_allflatslist.DataSource = dt;
        grid_flats_allflatslist.DataBind();
    }
}

After I add many rows the grid view will look as below,

If I press delete here then it is getting deleted successfully. Now I will enter the values in text boxes. But when I select on Family from row 1 then the Max Vacancy text box of row 1 should be disabled and text content is made to --. If I select Bachelor from row 1 then the Max Vacancy text box from row 1 should be enabled and text cleared to me to enter a value. The same should be done for whatever row I work on. But I am not sure how I can do this because I only have one ID for the textbox within the grid view and I am not sure how to access each row elements separately.

After entering all the values I will click on a save button and that should insert all values in entered into database row by row as in grid view. This also I'm not sure how to do because I can't access each row textbox separately. Is there any way I can do this?

My row deleting code is as below,

protected void grid_flats_allflatslist_RowDeleting(object sender, GridViewDeleteEventArgs e)
{
    int index = Convert.ToInt32(e.RowIndex);
    DataTable dt = ViewState["CurrentTable"] as DataTable;
    dt.Rows[index].Delete();
    ViewState["CurrentTable"] = dt;
    grid_flats_allflatslist.DataSource = dt;
    grid_flats_allflatslist.DataBind();
}

The first bound field of the grid view BlockID should be the primary key when inserting the values into the database. For good visibility, I have made that hidden.

score 1 · Accepted Answer · edited Jan 05 '17 at 12:00

1

Try this to add validation for Flat Number and Max Vacancy

$(document).on('change', '.droplist', function(){
     var parentRow=$(this).parents("tr:eq(0)");
     var text_flats_listmaxvacancy=$(parentRow).find('[id*="text_flats_listmaxvacancy"]');

     var _value=$(this).val();
     if(_value=="Family"){
         $(text_flats_listmaxvacancy).val("--");             
         $(text_flats_listmaxvacancy).attr("readonly",true);
     }
     else if(_value=="Bachelor"){
         $(text_flats_listmaxvacancy).val("");
         $(text_flats_listmaxvacancy).attr("readonly",false);
     }
});

//Code for save button to find each row and controls
foreach(GridViewRow row in grid_flats_allflatslist.Rows)
{
    TextBox text_flats_listflatnumber=(TextBox)row.FindControl("text_flats_listflatnumber"); 
    DropDownList list_flats_listflattype=(DropDownList)row.FindControl("list_flats_listflattype");
    TextBox text_flats_listmaxvacancy=(TextBox)row.FindControl("text_flats_listmaxvacancy");
}

Remove AutoPostBack and OnSelectedIndexChanged from the drop-down list and make it as below,

<asp:DropDownList ID="list_flats_listflattype" CssClass="droplist" runat="server">
    <asp:ListItem Text="Bachelor" Value="Bachelor"></asp:ListItem
    <asp:ListItem Text="Family" Value="Family"></asp:ListItem>
</asp:DropDownList>

edited Jan 05 '17 at 12:00

Mano Prathibhan C

488
1
11
38

answered Jan 05 '17 at 11:21

Bharatsing Parmar

2,435
1
9
18

Nice, The text `--` is getting changed when I click family and it clear when I select bachelor. But the enabled and disabled is not happening – Mano Prathibhan C Jan 05 '17 at 11:27
I have updated code and add readonly attribute. Try with this if it works. – Bharatsing Parmar Jan 05 '17 at 11:31
No still not working, same as before enabled/disabled not working – Mano Prathibhan C Jan 05 '17 at 11:35
1

Try this `$('#text_flats_listmaxvacancy').attr('readonly', true);` Insted of this `$(text_flats_listmaxvacancy).attr("readonly","readonly");` – Null Jan 05 '17 at 11:36
And `false` in the else block. @ManoPrathibhanC – Null Jan 05 '17 at 11:37
@ManoPrathibhanC Which version of jquery are you using? – Bharatsing Parmar Jan 05 '17 at 11:44
im using the 1.4.1 version..readonly true and false is also not working – Mano Prathibhan C Jan 05 '17 at 11:45
You can check this http://stackoverflow.com/questions/1306708/add-readonly-to-input-jquery – Bharatsing Parmar Jan 05 '17 at 11:46
1

Ok now it's working :) I removed the `AutoPostBack` and `OnSelectedIndexChanged` from the drop-down list and now its working. Thank you – Mano Prathibhan C Jan 05 '17 at 11:56
In case i want to use `RequiredFieldValidator` for all the text boxes in the grid view when i click on final submit to save to database, how can i do that? – Mano Prathibhan C Jan 05 '17 at 12:15
You can refer this http://www.aspsnippets.com/Articles/Using-ASPNet-RequiredFieldValidator-for-TextBox-inside-GridView-TemplateField-ItemTemplate.aspx – Bharatsing Parmar Jan 05 '17 at 12:53

Accessing text boxes and dropdown list of each row in asp.net GridView separately

1 Answers1