locked
calculation on the values of text boxes and display result in text box inside grid view RRS feed

  • Question

  • User364607740 posted

    I have a grid view with dynamic rows. They have 3 text box columns for input number of MALE, FEMALE and showing the total.

    <asp:GridView ID="gv_Population" runat="server" AutoGenerateColumns="false" DataKeyNames="ID">
        <Columns>       
            <asp:BoundField DataField="STATE" HeaderText="STATE"></asp:BoundField>  
            <asp:TemplateField HeaderText="Male Population">
                <ItemTemplate>
                    <asp:TextBox ID="txtMale" runat="server" />
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Female Population">
                <ItemTemplate>
                    <asp:TextBox ID="txtFemale" runat="server" onblur="Calculation()" />
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Total Population">
                <ItemTemplate>
                    <asp:TextBox ID="txtTotalPopulation" disabled="disabled" runat="server"/>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>

    User will input the male and female population and via javascript I have to show the total population in text box txtTotalPopulation using onblur="Calculation()" method. 

    In many posts I read that grid view text boxes can not be accessed directly, first we need to access the id of grid view. But I am not sure how to do this. How to access the id of the text boxes Please help.

    https://www.c-sharpcorner.com/blogs/how-to-get-textbox-value-from-gridview-using-javascript1
    https://stackoverflow.com/questions/21852729/how-to-get-the-gridview-textbox-control-id-in-javascript

    Most of the posts only saying how to access the value of the text box inside grid view but how to assign value to text box in grid view via javascript.

    Friday, March 13, 2020 8:20 AM

All replies

  • User-1330468790 posted

    Hi, scala_1988,

     

    Acording to your description, what you need is a way to access the value from male and female and then you need to assign the sum value to the total input.

     

    As you already knew, the id of the text box inside the grid view will be different from that one you write in the aspx page. 

    Therefore, the best way to fetch the data in each row will be assign the Calculation function with the current element and use Jquery/javascript to fetch the previous and next element to complete this addition. (Here I use Jquery while javascript can complete the same thing).

     

    More details, you can refer to below code:

    Script:

    <script type="text/javascript">
            function Calculation(input) {
                // female's number
                var femaleValue = $(input).val() == '' ? 0 : parseInt($(input).val());
                
    
                // Current <td> which contains input for female number
                var femaleCell = $(input).parent();
    
                // total <td> which contains input for total number
                var totalCell = femaleCell.next();
                // Male <td> which contains input for male number
                var maleCell = femaleCell.prev();
                // Get Male number from input
                var maleValue = maleCell.find('input').val() == '' ? 0 : parseInt(maleCell.find('input').val());
               
                // Do addtion 
                var total = maleValue + femaleValue;
                //Change the content of the total
                totalCell.find('input').val(total);
            }
        </script>

    .aspx Page:

    <asp:GridView ID="gv_Population" runat="server" AutoGenerateColumns="false" DataKeyNames="ID">
                    <Columns>
                        <asp:BoundField DataField="STATE" HeaderText="STATE"></asp:BoundField>
                        <asp:TemplateField HeaderText="Male Population">
                            <ItemTemplate>
                                <asp:TextBox ID="txtMale" runat="server" />
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Female Population">
                            <ItemTemplate>
                                <asp:TextBox ID="txtFemale" runat="server" onblur="Calculation(this)" />
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Total Population">
                            <ItemTemplate>
                                <asp:TextBox ID="txtTotalPopulation" disabled="disabled" runat="server" />
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                </asp:GridView>

    Code behind: Simulation of the data, not important.

    private static DataTable _gridviewDT;
            public static DataTable GridViewDT
            {
                get
                {
                    if (_gridviewDT is null)
                    {
                        _gridviewDT = new DataTable();
    
                        _gridviewDT.Columns.Add("ID", typeof(int));
                        _gridviewDT.Columns.Add("STATE", typeof(string));
    
    
                        _gridviewDT.Rows.Add(1,"STATE1");
                        _gridviewDT.Rows.Add(2,"STATE2");
                        _gridviewDT.Rows.Add(3,"STATE3");
                        _gridviewDT.Rows.Add(4,"STATE4");
                        _gridviewDT.Rows.Add(5,"STATE5");
                    }
    
                    return _gridviewDT;
                }
                set
                {
                    _gridviewDT = value;
                }
            }
    
    
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack)
                {
                    BindGridView();
                }
            }
    
            private void BindGridView()
            {
                gv_Population.DataSource = GridViewDT;
                gv_Population.DataBind();
            }

    Demo:

    There might be a better way to trigger the Calculation instead of on blur. However, it would be another topic.

     

    Hope this can help you.

    Best regards,

    Sean

    Friday, March 13, 2020 11:05 AM