Javascript calculating total in gridview

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • parshupooja
    New Member
    • Jun 2007
    • 159

    Javascript calculating total in gridview

    Hi
    I am using asp.net C# and javascript.
    I have a gridview with 5 columns and 14 row
    column1--column2--column3--column4--column5

    Column1 to column4 is textboxes wheresa column5 is label
    I am trying to calculate column 5 which is (column2-column1)+(colum n4-column3)
    Here is javascript i am using. When i use this it just calculates for first row of gridview.
    Code:
    <script language =javascript type="text/javascript">
                           function Total()
                                   {
                                  
                                    var int1=parseInt(document.getElementById("ctl00_contentPlaceHolder_GridView1_ctl02_TextBox1").value);
                                    var int2 = parseInt(document.getElementById("ctl00_contentPlaceHolder_GridView1_ctl02_TextBox2").value);
                                    var int3 = parseInt(document.getElementById("ctl00_contentPlaceHolder_GridView1_ctl02_TextBox3").value);
                                    var int4 = parseInt(document.getElementById("ctl00_contentPlaceHolder_GridView1_ctl02_TextBox4").value);
                                    var int5 = (int2-int1+int4-int3);
                                    document.getElementById("ctl00_contentPlaceHolder_GridView1_ctl02_lblTotalHr").innerText = int5;
     }
    </script>
    i have tried using document.getEle mentById("<%=Te xtBox1.ClientID %>") and

    document.getEle mentById("<%=Gr idView1.TextBox 1.ClientID%>") but throws error

    plz help
  • gits
    Recognized Expert Moderator Expert
    • May 2007
    • 5388

    #2
    hi ...

    as far as can see your script is doing what you want from it :) ... in case you have 14 rows you have to loop through you rows and call the function for every row you have ... and then you have to add all row-totals?

    kind regards

    Comment

    • parshupooja
      New Member
      • Jun 2007
      • 159

      #3
      your are right i need to loop thr it,but since only bolded part is changing for each control, i don't know how to do it. could show me little snippet or refer meto the article

      ctl00_contentPl aceHolder_GridV iew1_ctl02_TextBox1
      Originally posted by gits
      hi ...

      as far as can see your script is doing what you want from it :) ... in case you have 14 rows you have to loop through you rows and call the function for every row you have ... and then you have to add all row-totals?

      kind regards

      Comment

      • gits
        Recognized Expert Moderator Expert
        • May 2007
        • 5388

        #4
        that is a little bit tricky and depends on how this changes ... you may use something like this:

        [CODE=javascript]var prefix = 'ctl00_contentP laceHolder_Grid View1_';

        // you may pass this as a param to your function
        // here i use: cp = 'ctl02'
        var changing_part = cp;

        var suffix = '_TextBox1';

        var id = prefix + changing_part + suffix;

        var node = document.getEle mentById(id);[/CODE]

        i assume that you know how to loop through your lines ... so you call your function with the cp-param each time with a new row.

        kind regards

        Comment

        • parshupooja
          New Member
          • Jun 2007
          • 159

          #5
          Hello
          Thank You for help but when i just test it and it shows msg null object. any clue?
          [CODE=javascript]
          var msg = "";
          for (var x = 1; x <= 10; x++)
          {
          var prefix = "ctl00_contentP laceHolder_Grid View1_ctl0";
          var changing_part = x;
          var suffix = "_TextBox1" ;
          var id = prefix + changing_part + suffix;
          var node = document.getEle mentById(id);
          javascript:wind ow.alert(node);

          [/code]

          Originally posted by gits
          that is a little bit tricky and depends on how this changes ... you may use something like this:

          [CODE=javascript]var prefix = 'ctl00_contentP laceHolder_Grid View1_';

          // you may pass this as a param to your function
          // here i use: cp = 'ctl02'
          var changing_part = cp;

          var suffix = '_TextBox1';

          var id = prefix + changing_part + suffix;

          var node = document.getEle mentById(id);[/CODE]

          i assume that you know how to loop through your lines ... so you call your function with the cp-param each time with a new row.

          kind regards

          Comment

          • gits
            Recognized Expert Moderator Expert
            • May 2007
            • 5388

            #6
            i think your prefix is wrong .... it seems to contain the variable part?

            kind regards

            Comment

            • parshupooja
              New Member
              • Jun 2007
              • 159

              #7
              actually only value after ctl0 is increasing by one. so i am considering it as a part of prefix

              so i thought x would be 1,2,........... .n and so on

              string should be
              ctl00_contentPl aceHolder_GridV iew1_ctlx_TextBox1


              Thanks
              Originally posted by gits
              i think your prefix is wrong .... it seems to contain the variable part?

              kind regards

              Comment

              • gits
                Recognized Expert Moderator Expert
                • May 2007
                • 5388

                #8
                hmmm ... i see ... when do you call the loop? ... it has to be after! the page is fully loaded so that the dom is ready to use ...

                kind regards

                Comment

                • parshupooja
                  New Member
                  • Jun 2007
                  • 159

                  #9
                  Loop is in the script tag of of aspx page and i am calling this function at
                  Onchange event of Textboxes, thats means page is fully loaded already , it triggers only when I change value on Textboxes
                  [code=javascript]
                  <script language =javascript type="text/javascript">
                  function Total(){
                  for (var x = 1; x <= 10; x++)
                  {
                  var prefix = "ctl00_contentP laceHolder_Grid View1_ctl0";
                  var changing_part = x;
                  var suffix = "_TextBox1" ;
                  var id = prefix + changing_part + suffix;
                  var node = document.getEle mentById(id);
                  }
                  }
                  </script>
                  [/code]
                  gridview
                  Code:
                   <asp:TemplateField HeaderText="Out">
                                      <ItemTemplate>
                                          <asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("MorningOut") %>' Width="50px" onChange="Total()"></asp:TextBox>
                                      </ItemTemplate>
                                  </asp:TemplateField>
                  Originally posted by gits
                  hmmm ... i see ... when do you call the loop? ... it has to be after! the page is fully loaded so that the dom is ready to use ...

                  kind regards

                  Comment

                  • gits
                    Recognized Expert Moderator Expert
                    • May 2007
                    • 5388

                    #10
                    hi ...

                    hmmm ... could you please post the html-code? ... when the page is rendered by the browser goto view source and post the html that relates to our problem ... so that we may have a closer look ...

                    kind regards

                    Comment

                    Working...