Search code examples
.netasp.netajaxgridviewtemplatefield

template field issue in the gridview


Q:

I have the following problem , and i don't know how to fix it really.

I have a grid view one of the columns is a template field as (text box). The grid view consists of 8 rows . What i do is every time the user enter data in the text box,I put the total in the last text box(which set enabled = false).I sum the data entry in the text boxes through some method and call it in the event text changed . But every time i enter a number in the text box and then click Tab in the keyboard or use the mouse cursor to move to the next box i lose the focus , and i have to put the mouse cursor again in the intended textbox.

I try the following methods to fix my problem but in vain .

 foreach (GridViewRow r in gv_Evaluation.Rows)
            {
                ((RadTextBox)r.Cells[3].FindControl("txt_evaluateWeights")).Attributes.Add("blur", "calc()");
            }

in my page load , this doesn't work at all.


protected void txt_evaluateWeights_TextChanged(object sender, EventArgs e)
{
    calc();
    ((TextBox)sender).Focus();
}

This way return the focus to the previous textbox (i mean the one which i already have done) not the text box i wanna the focus in, to enter the data.

EDIT:

My calc method:

private void calc()
        {
            float sum = 0;
            for (int i = 0; i < 7; i++)
            {
                RadTextBox txt1 = (RadTextBox)gv_Evaluation.Rows[i].Cells[3].FindControl("txt_evaluateWeights");
                int weight;
                bool result = Int32.TryParse(txt1.Text, out weight);
                if (result)
                {
                    sum += weight;
                }
            }

            double percentage;
            percentage = Math.Round((sum / 100) * 100, 2);
            RadTextBox txt3 = (RadTextBox)gv_Evaluation.Rows[7].Cells[3].FindControl("txt_evaluateWeights");
            txt3.Text = percentage.ToString();//string.Format("{0:0.0%}", percentage.ToString());

        }

Solution

  • Doing it using server side PostBack is a horrendous way of doing this.

    Use JavaScript instead. Here is a small example in jQuery

    The GridView

    <asp:GridView ID="DemoGrid" runat="server"
                AutoGenerateColumns="false"
                ShowFooter="true">
        <Columns>
            <asp:TemplateField HeaderText="index">
                <ItemTemplate><%# Container.DataItemIndex + 1 %></ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Item">
                <ItemTemplate>
                    <asp:Label ID="DemoLabel" runat="server" Text='<%# Container.DataItem %>' />
                </ItemTemplate>
                <FooterTemplate>Total</FooterTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Amount">
                <ItemTemplate>
                    <asp:TextBox ID="DemoText" runat="server" CssClass="quantity">
                    </asp:TextBox>
                </ItemTemplate>
                <FooterTemplate>
                    <asp:Label ID="TotalLabel" runat="server" CssClass="result"/>
                </FooterTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
    

    The Code Behind

    protected void Page_Load(object sender, EventArgs e){
        if (!IsPostBack)
        {
            string[] array = new string[] { "demo1", "demo2", "demo3", "demo4", "demo5" };
            DemoGrid.DataSource = array;
            DemoGrid.DataBind();
        }
    }
    

    The JavaScript (jQuery)

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".quantity").bind("blur", function () {
                var $quantity = $(this);
                var quantity = +$quantity.val(); //cast to number
                if (!isNaN(quantity)) {
                    var $sum = $quantity.closest("table").find("tr:last .result");
                    var sum = +$sum.html();
                    $sum.html(sum + quantity);
                }
            });
        });
    </script>
    

    Hope this helps