How to fill the text box with value of a column of a GridView row

Question

In the grid I have following columns

<Columns>
    <asp:TemplateField HeaderText="select to pay">
        <ItemTemplate>
            <asp:CheckBox ID="chkSelect" runat="server" OnCheckedChanged="chkSelect_OnCheckedChanged" AutoPostBack="true" />
        </ItemTemplate>            
    </asp:TemplateField>

    <asp:BoundField DataField="Reference" HeaderText="Invoice" HeaderStyle-HorizontalAlign="Center"
        ItemStyle-HorizontalAlign="Center">           
    </asp:BoundField>

    <asp:BoundField DataField="ChargedDate" HeaderText="Date of charge" HeaderStyle-HorizontalAlign="Center"
        ItemStyle-HorizontalAlign="Center" DataFormatString="{0:MM-dd-yyyy}">            
    </asp:BoundField>

     <asp:BoundField DataField="Amount" HeaderText="Amount" HeaderStyle-                      HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center"> 
       </asp:BoundField>    
    <asp:TemplateField HeaderText="Amount applied">
        <ItemTemplate>
            <asp:TextBox ID="txtPayAmount" Width="80px" runat="server" AutoPostBack="true"  />
        </ItemTemplate>
        <ItemStyle HorizontalAlign="Center" />

    </asp:TemplateField>
</Columns>

Please tell, In the grid if I chose a check box, the amount value should be displayed in the textbox of the same row. If I checked more than one check boxes the values should displayed in the text boxes of related check boxes/ Rows. the sum should be displayed in the textbox below the grid. What should I need to write under "OnSelect_CheckedChanged" event?

Answer 1

Please try with the below code snippet.

ASPX

 <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" DataKeyNames="TotalAmount" ShowFooter="true">
    <Columns>
        <asp:TemplateField HeaderText="select to pay">
            <ItemTemplate>
                <asp:CheckBox ID="chkSelect" runat="server" OnCheckedChanged="chkSelect_OnCheckedChanged"
                    AutoPostBack="true" />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Amount">
            <ItemTemplate>
                <%# Eval("TotalAmount", "{0:#,##0.00}")%>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Amount applied">
            <ItemTemplate>
                <asp:TextBox ID="txtPayAmount" Width="80px" runat="server" />
            </ItemTemplate>
            <FooterTemplate>
                <asp:TextBox ID="TextBox1" Width="80px" runat="server" />
            </FooterTemplate>
            <ItemStyle HorizontalAlign="Center" />
        </asp:TemplateField>
    </Columns>
</asp:GridView>

ASPX.CS

public partial class Forum : System.Web.UI.Page
{

    protected void Page_Init(object sender, System.EventArgs e)
    {
        GridView gv = new GridView();
        gv.ID = "GridView1";
        gv.AutoGenerateColumns = false;
        gv.ShowFooter = true;
        gv.DataKeyNames = new string[] { "TotalAmount" };

        TemplateField tf = new TemplateField();
        tf.ItemTemplate = new MyCustomTemplate();
        gv.Columns.Add(tf);

        BoundField bf = new BoundField();
        bf.DataField = "TotalAmount";
        gv.Columns.Add(bf);

        tf = new TemplateField();
        tf.ItemTemplate = new MyCustomTextTemplate();
        tf.FooterTemplate = new MyCustomFooterTextTemplate();
        gv.Columns.Add(tf);

        this.form1.Controls.Add(gv);
    }

    protected void Page_Load(object sender, System.EventArgs e)
    {
        GridView gv = form1.FindControl("GridView1") as GridView;
        if (!IsPostBack)
        {
            dynamic data = new[] {
        new { ID = 1, Name = "Name1",TotalAmount= 10},
        new { ID = 2, Name = "Name2",TotalAmount= 20},
        new { ID = 3, Name = "Name3",TotalAmount= 30},
        new { ID = 4, Name = "Name4",TotalAmount= 40},
        new { ID = 5, Name = "Name5",TotalAmount= 50}
    };

            gv.DataSource = data;
            gv.DataBind();
        }
    }

    protected void Page_PreRender(object sender, System.EventArgs e)
    {

    }


    protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
    {
        dynamic data = new[] {
               new { ID = 1, Name ="Name_1"},
               new { ID = 2, Name = "Name_2"},
               new { ID = 3, Name = "Name_3"},
               new { ID = 4, Name = "Name_4"},
               new { ID = 5, Name = "Name_5"}
           };


    }



}

public class MyCustomTemplate : ITemplate
{
    public void InstantiateIn(System.Web.UI.Control container)
    {
        CheckBox cb = new CheckBox();
        cb.ID = "chkSelect";
        cb.AutoPostBack = true;
        cb.CheckedChanged += new EventHandler(cb_CheckedChanged);
        container.Controls.Add(cb);
    }

    protected void cb_CheckedChanged(object sender, EventArgs e)
    {
        GridViewRow row = (sender as CheckBox).NamingContainer as GridViewRow;
        TextBox txtPayAmount = row.FindControl("txtPayAmount") as TextBox;

        if ((sender as CheckBox).Checked)
        {
            txtPayAmount.Text = Convert.ToString((row.Parent.Parent as GridView).DataKeys[row.RowIndex]["TotalAmount"]);
        }
        else
        {
            txtPayAmount.Text = string.Empty;
        }

        int TotalAmount = 0;

        foreach (GridViewRow rowv in (row.Parent.Parent as GridView).Rows)
        {
            CheckBox chk = rowv.FindControl("chkSelect") as CheckBox;
            if (chk.Checked)
            {
                TotalAmount += Convert.ToInt32((row.Parent.Parent as GridView).DataKeys[rowv.RowIndex]["TotalAmount"]);
            }
        }

        GridViewRow rowf = (row.Parent.Parent as GridView).FooterRow;

        ((TextBox)rowf.FindControl("TextBox1")).Text = TotalAmount.ToString();
    }
}

public class MyCustomTextTemplate : ITemplate
{
    public void InstantiateIn(System.Web.UI.Control container)
    {
        TextBox cb = new TextBox();
        cb.ID = "txtPayAmount";
        container.Controls.Add(cb);
    }


}

public class MyCustomFooterTextTemplate : ITemplate
{
    public void InstantiateIn(System.Web.UI.Control container)
    {
        TextBox cb = new TextBox();
        cb.ID = "TextBox1";
        container.Controls.Add(cb);
    }


}

Answer 2

At OnCheckedChanged event it should be

protected void chkSelect_OnCheckedChanged(object sender, EventArgs e)
{
    String czTemp = String.Empty;
    GridViewRow gr = (GridViewRow)((CheckBox)sender).Parent.Parent;
    GridViewRow footer = grdDues.FooterRow; 

    TextBox txtAmount = (TextBox)gr.Cells[3].FindControl("txtPayAmount");
    TextBox txtAmountPaid = (TextBox)footer.FindControl("txtAmountPaid");
    double dbTotalAmt = Convert.ToDouble(txtAmountPaid.Text.Replace("$","").ToString());
    if( ((CheckBox)sender).Checked )
    {
        txtAmount.Enabled = true;
        czTemp = grdDues.Rows[gr.RowIndex].Cells[3].Text.ToString();
        txtAmount.Text = czTemp.ToString();
        dbTotalAmt = dbTotalAmt + Convert.ToDouble(czTemp);
    }
    else
    {
        txtAmount.Enabled = false;
        czTemp = grdDues.Rows[gr.RowIndex].Cells[3].Text.ToString();
        dbTotalAmt = dbTotalAmt - Convert.ToDouble(czTemp);
        txtAmount.Text = "0.00";
    }
    txtAmountPaid.Text = dbTotalAmt.ToString("C");}

Answer 3

I you want to do it using javascript then please try this.

       $(function () {
        $('input:checkbox').click(function (e) {
            calculateSum(5); // sum of 5th column
        });

        function calculateSum(colidx) {
            total = 0.0;
            $("tr:has(:checkbox:checked) td:nth-child(" + colidx + ")").each(function () {
                var Tot = ($(this).text());
                Tot = parseFloat(Tot.replace(/,/g, ''));
                total += Tot;
            });
            $("#<%=txtTotalAmt.ClientID %>").val(total).toFixed(2);
        }
    });

Answer 4

You mean there are rows in the grid with one check box and a text box columns? Each row contain a checkbox and other columns values as mentioned in the code and a Text box? Please attach a image/ screenshot.