Loading
Using Jquery should be able to add name email-id in the GRID
 
after that add the $(gridView).show(); in $(document).on("click", ".classAdd", function ()
  1. "text/javascript" >  
  2.     $(document).ready(function () {    
  3.         $(document).on("click", ".classAdd", function() {    
  4.             $(gridView).show(); // add this line  
  5.                                 //on is used for getting click event for dynamically created buttons    
  6.         var rowCount = $('.data-contact-person').length + 1;  
  7.         var contactdiv = '' +  
  8.             ' + rowCount + '" class="f-name01">' + $("#textBox1").val() + '' +  
  9.             ' + rowCount + '" class="l-name01">' + $("#textBox2").val() + '' +  
  10.             ' + rowCount + '" class="email01">' + $("#textBox3").val() + '' +  
  11.             'Remove' +  
  12.             '';    
  13.             $('#maintable').append(contactdiv); // Adding these controls to Main table class    
  14.     });    
  15.     
  16.         $(document).on("click", ".deleteContact", function() {    
  17.             $(this).closest("tr").remove(); // closest used to remove the respective 'tr' in which I have my controls     
  18.     });  
  19. });    
  20.   
If it hepls you then mark as an answer.

  • MasPosted Jan 3, 2020, 7:15 AM

    Amit, 
     
    How to clear the Text boxes after adding the values when we are adding to grid

     
     
    I am trying to use this

    function clrCtrl()
    {
    document.getElementById('ctl00_ContentPlaceHolder1_TextBox1').value = "";
    document.getElementById('ctl00_ContentPlaceHolder1_TextBox2').value = "";
    }


    but it is no working... 

  • MasPosted Jan 3, 2020, 1:58 AM

    Hi Amit,

    Hope you are doing good today!!
     
    Thank you for your response, Initially the grid is not to be open..
    When we are click event then only the grid should display..
     
     
  • Amit Mohanty

    Amit MohantyPosted Jan 2, 2020, 4:17 AM

    Hey try this
    1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Home.aspx.cs" Inherits="Home" %>  
    2.   
    3.   
    4. "http://www.w3.org/1999/xhtml">  
    5. "server">  
    6.     Demo  
    7.     "utf-8" />  
    8.     "viewport" content="width=device-width, initial-scale=1" />  
    9.     "stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />  
    10.     "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">  
    11.     "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">  
    12.   
    13.   
    14.     "form1" runat="server">  
    15.         class="container">  
    16.             

      Basic Table

        
    17.               
    18.                 
      19.   
    19.                     
      20.   
    20.                 
      21.   
    21.                 
      22.   
    22.                     
      23.   
    23.                 
      24.   
    24.                 
      25.   
    25.                     
      26.   
    26.                 
      27.   
    27.                 
      28.   
    28.                     
      29.   
    29.                 
      30.   
    30.             
      31.   
    31.                         "textBox1" runat="server">  
    32.                     
      33.   
    33.                         "textBox2" runat="server">  
    34.                     
      35.   
    35.                         "textBox3" runat="server">  
    36.                     
      37.   
    37.                         "button" id="btnAdd" class="btn btn-xs btn-primary classAdd">Add More  
    38.                     
      39.   
    39.             class="table" id="maintable">  
    40.                   
    41.                       
    42.                         Firstname  
    43.                         Lastname  
    44.                         Email  
    45.                       
    46.                   
    47.                   
    48.                       
    49.                   
    50.               
    51.             "button" id="btnSubmit" class="btn btn-primary btn-md pull-right btn-sm">Submit  
    52.         
      
  •       
  •   
  •   
  • "text/javascript">  
  •     $(document).ready(function () {  
  •         $(document).on("click", ".classAdd", function () {  
  •             //on is used for getting click event for dynamically created buttons  
  •             var rowCount = $('.data-contact-person').length + 1;  
  •             var contactdiv = '' +  
  •                 ' + rowCount + '" class="f-name01">' + $("#textBox1").val() + '' +  
  •                 ' + rowCount + '" class="l-name01">' + $("#textBox2").val() + '' +  
  •                 ' + rowCount + '" class="email01">' + $("#textBox3").val() + '' +  
  •                 'Remove' +  
  •                 '';  
  •             $('#maintable').append(contactdiv); // Adding these controls to Main table class  
  •         });  
  •   
  •         $(document).on("click", ".deleteContact", function () {  
  •             $(this).closest("tr").remove(); // closest used to remove the respective 'tr' in which I have my controls   
  •         });  
  •     });  
  •   
  •