locked
Show Data In Gridview Without postback RRS feed

  • Question

  • User-807418713 posted

    Hello

    I have two textbox and 1 dropdownlist

    User select from dropdownlist and enter value in two textbox after tab it should shows in gridview without postback using jquery or javascript

    like this grdiview

    ItemName Rate Quantity
    AA 10 2
    BB 20 3
    CC 30 4

    how to do so

    Friday, May 24, 2019 9:56 AM

Answers

  • User288213138 posted

    Hi  Gopi.MCA,

    I have run my code again and found that it is ok. What error have you encountered?

    Do you have padding data in your Gridview?if not, the GridView will not render in the foreground.
     
    This is all my code:

    <script src="../Scripts/jquery-3.3.1.js"></script>
        <script type="text/javascript">
    
            $(document).ready(function () {
                $('#txtQuantity').blur(function (e) {
                    var ItemName = $('#txtName').val();
                    var Rate = $('#txtRate').val();
                    var Quantity = $('#txtQuantity').val();   
                     $("#GridView1 tbody").append("<tr><td>"+$('#txtName').val()+"</td><td>"+$('#txtRate').val()+"</td><td>"+$('#txtQuantity').val()+"</td></tr>")
                   
                });
            });
        </script>
     <div>
        
       
           <asp:DropDownList ID="txtName" runat="server" ClientIDMode="Static">
                    <asp:ListItem>AA</asp:ListItem>
                    <asp:ListItem>BB</asp:ListItem>
                    <asp:ListItem>CC</asp:ListItem>
                </asp:DropDownList>
                <asp:TextBox ID="txtRate" runat="server" ClientIDMode="Static"> </asp:TextBox>
                <asp:TextBox ID="txtQuantity" runat="server" ClientIDMode="Static"> </asp:TextBox>
    
                <hr />
               
         <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
                    <Columns>
                        <asp:BoundField DataField="ItemName" HeaderText="ItemName" SortExpression="ItemName" />
                        <asp:BoundField DataField="Rete" HeaderText="Rete" SortExpression="Rete" />
                        <asp:BoundField DataField="Quantity" HeaderText="Quantity" SortExpression="Quantity" />
                    </Columns>
    
                </asp:GridView>
        </div>
    
    Aspx.cs:
     protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack)
                {
                    DataTable dt = new DataTable();
                    dt.Columns.AddRange(new DataColumn[3] { new DataColumn("ItemName"), new DataColumn("Rete"), new DataColumn("Quantity") });
                    dt.Rows.Add("AA", "1", "2");
                    GridView1.DataSource = dt;
                    GridView1.DataBind();
                }
            }
    

    Best regards,

    Sam

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, May 28, 2019 6:25 AM
  • User288213138 posted

    Hi  Gopi.MCA,
     
    Reset the textvalue after you append the data to GridView.
     
    The code:

    <script type="text/javascript">
    
            $(document).ready(function () {
                $('#txtQuantity').blur(function (e) {
                    var ItemName = $('#txtName').val();
                    var Rate = $('#txtRate').val();
                    var Quantity = $('#txtQuantity').val
                     $("#GridView1 tbody").append("<tr><td>"+$('#txtName').val()+"</td><td>"+$('#txtRate').val()+"</td><td>"+$('#txtQuantity').val()+"</td></tr>")
                    
                    $('#txtName option:first').prop("selected",true);
                    $('#txtRate').val("");
                    $('#txtQuantity').val("");
                });
            });
        </script>
    
    
    <div>
                <asp:DropDownList ID="txtName" runat="server" ClientIDMode="Static">
                    <asp:ListItem>--select item--</asp:ListItem>
                    <asp:ListItem>AA</asp:ListItem>
                    <asp:ListItem>BB</asp:ListItem>
                    <asp:ListItem>CC</asp:ListItem>
                </asp:DropDownList>
                <asp:TextBox ID="txtRate" runat="server" ClientIDMode="Static"> </asp:TextBox>
                <asp:TextBox ID="txtQuantity" runat="server" ClientIDMode="Static"> </asp:TextBox>
    
                <hr />
                <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" >
                    <Columns>
                        <asp:BoundField DataField="ItemName" HeaderText="ItemName" SortExpression="ItemName" />
                        <asp:BoundField DataField="Rete" HeaderText="Rete" SortExpression="Rete" />
                        <asp:BoundField DataField="Quantity" HeaderText="Quantity" SortExpression="Quantity" />
                    </Columns>              
                </asp:GridView>              
            </div>

    The result:

    Best regards,

    Sam

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, May 29, 2019 2:08 AM

All replies

  • User753101303 posted

    Hi,

    You have multiple options and a forum is perhaps not the best place to start from 0. If not familiar with Ajax yet you could perhaps start with :
    http://deebujacob.blogspot.com/2013/03/aspnet-updatepanel-and-gridview.html

    Friday, May 24, 2019 10:49 AM
  • User-807418713 posted

    Hello

    I want to achieve this using jquery or javascript without postback

    Thanks

    Friday, May 24, 2019 10:53 AM
  • User475983607 posted

    My best guess is you have a list of records shown on a web page and want to filter those records using jQuery/JavaScript. 

    Is there anyway you can post the code you've tried so we can get an idea of what you are trying to do?

    Friday, May 24, 2019 11:01 AM
  • User-807418713 posted

    Hello

    My Requirement Is Simple Let us consider i have two textbox and 1 dropdownlist 

    User select from dropdownlist then enter data in Textbox1 and Textbox2 on keypress Textbox2 i want to show the data in gridview so on insert row in gridview one by one

    Thanks

    Sunday, May 26, 2019 9:52 AM
  • User288213138 posted

    Hi  Gopi.MCA,
     
    According to your description, I wrote a demo you can use as a reference.

    I used blur in my code. if you want to use tab, you can reference this link: 

    https://stackoverflow.com/questions/18020098/keyup-event-behavior-on-tab

     
    The code:

    <form id="form1" runat="server">
            <div>
                <asp:DropDownList ID="txtName" runat="server" ClientIDMode="Static">
                    <asp:ListItem>AA</asp:ListItem>
                    <asp:ListItem>BB</asp:ListItem>
                    <asp:ListItem>CC</asp:ListItem>
                </asp:DropDownList>
                <asp:TextBox ID="txtRate" runat="server" ClientIDMode="Static"> </asp:TextBox>
                <asp:TextBox ID="txtQuantity" runat="server" ClientIDMode="Static"> </asp:TextBox>
    
                <hr />
                <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1">
                    <Columns>
                        <asp:BoundField DataField="ItemName" HeaderText="ItemName" SortExpression="ItemName" />
                        <asp:BoundField DataField="Rete" HeaderText="Rete" SortExpression="Rete" />
                        <asp:BoundField DataField="Quantity" HeaderText="Quantity" SortExpression="Quantity" />
                    </Columns>
    
                </asp:GridView>
                <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:CaseTestConnectionString %>" SelectCommand="SELECT [ItemName], [Rete], [Quantity] FROM [Personal_Details]"></asp:SqlDataSource>
            </div>
        </form>
    <script type="text/javascript">
            $(document).ready(function () {
                $('#txtQuantity').blur(function (e) {
                    var ItemName = $('#txtName').val();
                    var Rate = $('#txtRate').val();
                    var Quantity = $('#txtQuantity').val();              
                    $.ajax({ 
                        type: 'POST',
                        contentType: "application/json; charset=utf-8",
                        url: 'WebForm555.aspx/Insert_Data',
                        data: "{'ItemName':'" + ItemName + "','Rate':'" + Rate + "','Quantity':'" + Quantity + "'}",
                        async: false,
                        success: function (response) {
                             $("#GridView1 tbody").append("<tr><td>"+$('#txtName').val()+"</td><td>"+$('#txtRate').val()+"</td><td>"+$('#txtQuantity').val()+"</td></tr>")
                   
                        },
                        error: function () { 
                            alert("Error");
                        }
                    }); 
                });
            });
    
        </script>
    Aspx.cs:
    [WebMethod]
    
            public static void Insert_Data(string ItemName, string Rate, string Quantity)
            {
                SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["constr527"].ConnectionString);           
                    conn.Open();
                    SqlCommand cmd = new SqlCommand("Insert into Personal_Details (ItemName,Rete,Quantity) values(@ItemName,@Rate,@Quantity)", conn);
                    cmd.Parameters.AddWithValue("@ItemName", ItemName);
    
                    cmd.Parameters.AddWithValue("@Rate", Rate);
    
                    cmd.Parameters.AddWithValue("@Quantity", Quantity);
    
                    cmd.ExecuteNonQuery();
    
                    conn.Close();
    
            }
    

    The result:

    Best regards,

    Sam

    Monday, May 27, 2019 8:59 AM
  • User-807418713 posted

    Hello Samwu

    Thanks for your code

    This what i need but i dont want to insert this enter data to sql table

    just want to show only in gridview 

    how to do so

    Monday, May 27, 2019 9:39 AM
  • User288213138 posted

    Hi  Gopi.MCA,
     
    Just remove Ajax can meet your needs.
     
    The code:

    <script type="text/javascript">
    
            $(document).ready(function () {
                $('#txtQuantity').blur(function (e) {
                    var ItemName = $('#txtName').val();
                    var Rate = $('#txtRate').val();
                    var Quantity = $('#txtQuantity').val();   
                     $("#GridView1 tbody").append("<tr><td>"+$('#txtName').val()+"</td><td>"+$('#txtRate').val()+"</td><td>"+$('#txtQuantity').val()+"</td></tr>")
                   
                });
            });
        </script>

    Best Regards,

    Sam

    Tuesday, May 28, 2019 2:49 AM
  • User-807418713 posted

    Hello

    I tried your code not working

    here is my aspx page

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>Untitled Page</title>
          <script type="text/javascript">
    
            $(document).ready(function () {
                $('#txtQuantity').blur(function (e) {
                    var ItemName = $('#txtName').val();
                    var Rate = $('#txtRate').val();
                    var Quantity = $('#txtQuantity').val();   
                     $("#GridView1 tbody").append("<tr><td>"+$('#txtName').val()+"</td><td>"+$('#txtRate').val()+"</td><td>"+$('#txtQuantity').val()+"</td></tr>")
                   
                });
            });
        </script>
        
    </head>
    <body>
    
        <form id="form1" runat="server">
        <div>
        
       
           <asp:DropDownList ID="txtName" runat="server" ClientIDMode="Static">
                    <asp:ListItem>AA</asp:ListItem>
                    <asp:ListItem>BB</asp:ListItem>
                    <asp:ListItem>CC</asp:ListItem>
                </asp:DropDownList>
                <asp:TextBox ID="txtRate" runat="server" ClientIDMode="Static"> </asp:TextBox>
                <asp:TextBox ID="txtQuantity" runat="server" ClientIDMode="Static"> </asp:TextBox>
    
                <hr />
               
         <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
                    <Columns>
                        <asp:BoundField DataField="ItemName" HeaderText="ItemName" SortExpression="ItemName" />
                        <asp:BoundField DataField="Rete" HeaderText="Rete" SortExpression="Rete" />
                        <asp:BoundField DataField="Quantity" HeaderText="Quantity" SortExpression="Quantity" />
                    </Columns>
    
                </asp:GridView>
        </div>
        </form>
        
         
    </body>
    </html>
    

    Tuesday, May 28, 2019 4:30 AM
  • User288213138 posted

    Hi  Gopi.MCA,

    I have run my code again and found that it is ok. What error have you encountered?

    Do you have padding data in your Gridview?if not, the GridView will not render in the foreground.
     
    This is all my code:

    <script src="../Scripts/jquery-3.3.1.js"></script>
        <script type="text/javascript">
    
            $(document).ready(function () {
                $('#txtQuantity').blur(function (e) {
                    var ItemName = $('#txtName').val();
                    var Rate = $('#txtRate').val();
                    var Quantity = $('#txtQuantity').val();   
                     $("#GridView1 tbody").append("<tr><td>"+$('#txtName').val()+"</td><td>"+$('#txtRate').val()+"</td><td>"+$('#txtQuantity').val()+"</td></tr>")
                   
                });
            });
        </script>
     <div>
        
       
           <asp:DropDownList ID="txtName" runat="server" ClientIDMode="Static">
                    <asp:ListItem>AA</asp:ListItem>
                    <asp:ListItem>BB</asp:ListItem>
                    <asp:ListItem>CC</asp:ListItem>
                </asp:DropDownList>
                <asp:TextBox ID="txtRate" runat="server" ClientIDMode="Static"> </asp:TextBox>
                <asp:TextBox ID="txtQuantity" runat="server" ClientIDMode="Static"> </asp:TextBox>
    
                <hr />
               
         <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
                    <Columns>
                        <asp:BoundField DataField="ItemName" HeaderText="ItemName" SortExpression="ItemName" />
                        <asp:BoundField DataField="Rete" HeaderText="Rete" SortExpression="Rete" />
                        <asp:BoundField DataField="Quantity" HeaderText="Quantity" SortExpression="Quantity" />
                    </Columns>
    
                </asp:GridView>
        </div>
    
    Aspx.cs:
     protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack)
                {
                    DataTable dt = new DataTable();
                    dt.Columns.AddRange(new DataColumn[3] { new DataColumn("ItemName"), new DataColumn("Rete"), new DataColumn("Quantity") });
                    dt.Rows.Add("AA", "1", "2");
                    GridView1.DataSource = dt;
                    GridView1.DataBind();
                }
            }
    

    Best regards,

    Sam

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, May 28, 2019 6:25 AM
  • User-807418713 posted

    Hello Samwu

    Thank you for your code

    It works perfect on txtquantity after blur i want to make empty to txtrate,txtquantity, txtname to --select item--

    How to do so

    Tuesday, May 28, 2019 10:26 AM
  • User288213138 posted

    Hi  Gopi.MCA,
     
    Reset the textvalue after you append the data to GridView.
     
    The code:

    <script type="text/javascript">
    
            $(document).ready(function () {
                $('#txtQuantity').blur(function (e) {
                    var ItemName = $('#txtName').val();
                    var Rate = $('#txtRate').val();
                    var Quantity = $('#txtQuantity').val
                     $("#GridView1 tbody").append("<tr><td>"+$('#txtName').val()+"</td><td>"+$('#txtRate').val()+"</td><td>"+$('#txtQuantity').val()+"</td></tr>")
                    
                    $('#txtName option:first').prop("selected",true);
                    $('#txtRate').val("");
                    $('#txtQuantity').val("");
                });
            });
        </script>
    
    
    <div>
                <asp:DropDownList ID="txtName" runat="server" ClientIDMode="Static">
                    <asp:ListItem>--select item--</asp:ListItem>
                    <asp:ListItem>AA</asp:ListItem>
                    <asp:ListItem>BB</asp:ListItem>
                    <asp:ListItem>CC</asp:ListItem>
                </asp:DropDownList>
                <asp:TextBox ID="txtRate" runat="server" ClientIDMode="Static"> </asp:TextBox>
                <asp:TextBox ID="txtQuantity" runat="server" ClientIDMode="Static"> </asp:TextBox>
    
                <hr />
                <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" >
                    <Columns>
                        <asp:BoundField DataField="ItemName" HeaderText="ItemName" SortExpression="ItemName" />
                        <asp:BoundField DataField="Rete" HeaderText="Rete" SortExpression="Rete" />
                        <asp:BoundField DataField="Quantity" HeaderText="Quantity" SortExpression="Quantity" />
                    </Columns>              
                </asp:GridView>              
            </div>

    The result:

    Best regards,

    Sam

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, May 29, 2019 2:08 AM
  • User-807418713 posted

    Hello

    Thanks for your code

    Thank You

    Wednesday, May 29, 2019 5:44 AM