locked
Bind Gridivew Again and Again Base On Given Filter RRS feed

  • Question

  • User2033107836 posted
    Hello
    This is my MS SQL table 1 data
    GroupName Color ItemName Qty
    A Red Apple 1
    A Red Mango 2
    A Red Banana 6
    B Green Mango 2
    B Green Orange 1
    In aspx page I have dropdownlist 1 , dropdownlist2, textbox1
    dropdownlist 1 contain value A & B
    dropdownlist 2 contain value Red & Green
    textbox1 data will input by user
    now for example first I select B from dropdownlist1  and Green from dropdownlist2 and textbox1 10 then
    In Gridview I want to show like this
    Group Name : B    
    Color : Green  
    User Input : 10  
    Item Name Quantity Required Quantity
    Mango 2 20  
    Orange 1 10  
    * Now again user will select dropdownlist1 A & dropdownlist2 Red and textbox1 30 then
    In Gridview I want to show like this
    Group Name : B    
    Color : Green  
    User Input : 10  
    Item Name Quantity Required Quantity
    Mango 2 20  
    Orange 1 10  
       
    Group Name : A  
    Color : Red  
    User Input : 30  
    Item Name Quantity Required Quantity
    Apple 1 30  
    Mango 2 60  
    Banana 6 120  
    How to do so using asp.net 2.0 C#
    Thanks
    Thursday, December 21, 2017 6:45 PM

Answers

  • User-1838255255 posted

    Hi asp.ambur,

    According yo your description and error message, about the first issue, you could use datarow to replace var. About the second issue, you could use ajax to call data, then bind it through js, please check the following sample:

    Sample Code:

    <head runat="server">
        <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script>
            $(function () {
                debugger;
                // use ajax to get data
                // suppose get the data from the code behind
                var data = { "Drop1": "B", "Drop2": "Red", "TxtValue": "2", "Row1Cell1": "Apple", "Row1Cell2": "3" };
                // bind them to gridview
                var markup = "<tr style='font-weight:bold'><td colspan='3'>Group Name:" + data.Drop1 + "</td></tr><tr style='font-weight:bold'><td colspan='3'>Color:"
                    + data.Drop2 + "</td></tr><tr style='font-weight:bold'><td colspan='3'>User Input:"
                + data.TxtValue + "</td></tr><tr style='font-weight:bold'><td >ItemName</td><td>Quantity</td><td>RequiredQuantity</td></tr><tr><td>"
                + data.Row1Cell1 + "</td><td>"
                + data.Row1Cell2 + "</td><td>"
                + parseInt(data.Row1Cell2) * 10 + "</td></tr>"
                ;
                $("#GridView1").append(markup);
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                GroupName:<asp:DropDownList ID="DropDownList1" runat="server">
                    <asp:ListItem>A</asp:ListItem>
                    <asp:ListItem>B</asp:ListItem>
                </asp:DropDownList>
                Color:<asp:DropDownList ID="DropDownList2" runat="server">
                    <asp:ListItem>Red</asp:ListItem>
                    <asp:ListItem>Green</asp:ListItem>
                </asp:DropDownList>
                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                <asp:Button ID="Button1" runat="server" Text="Show" OnClick="Button1_Click" /><br />
                <div>
                    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" OnDataBound="GridView1_DataBound">
                        <Columns>
                            <asp:BoundField DataField="ItemName" HeaderText="ItemName" ItemStyle-Width="30" />
                            <asp:BoundField DataField="Qty" HeaderText="Quantity" ItemStyle-Width="150" />
                            <asp:BoundField DataField="RequiredQuantity" HeaderText="RequiredQuantity" ItemStyle-Width="150" />
                        </Columns>
                    </asp:GridView>
                </div>
            </div>
        </form>
    </body>
    
     protected void Button1_Click(object sender, EventArgs e)
            {
                DataTable table = new DataTable();
                table.Columns.Add("GroupName", typeof(string));
                table.Columns.Add("Color", typeof(string));
                table.Columns.Add("ItemName", typeof(string));
                table.Columns.Add("Qty", typeof(int));
    
                table.Rows.Add("A", "Red", "Apple", 1);
                table.Rows.Add("A", "Red", "Mango", 2);
                table.Rows.Add("A", "Red", "Banana", 6);
                table.Rows.Add("B", "Green", "Mango", 2);
                table.Rows.Add("B", "Green", "Orange", 1);
    
                DataRow[] result = table.Select("GroupName = '" + DropDownList1.SelectedValue + "' AND Color = '" + DropDownList2.SelectedValue + "'");
                DataTable newdt = new DataTable();
                newdt.Columns.Add("ItemName", typeof(string));
                newdt.Columns.Add("Qty", typeof(int));
                newdt.Columns.Add("RequiredQuantity", typeof(int));
    
                foreach (DataRow item in result)
                {
                    newdt.Rows.Add(item[2], item[3], Convert.ToInt32(item[3]) * 10);
                }
                GridView1.DataSource = newdt;
                GridView1.DataBind();
            }
    
            protected void GridView1_DataBound(object sender, EventArgs e)
            {
                GridViewRow newnewrow = new GridViewRow(0, 0, DataControlRowType.Header, DataControlRowState.Normal);
                TableHeaderCell newnewcell = new TableHeaderCell();
                newnewcell.Text = "User Input: " + TextBox1.Text;
                newnewcell.ColumnSpan = 3;
                newnewcell.HorizontalAlign = HorizontalAlign.Left;
                newnewrow.Controls.Add(newnewcell);
                GridView1.HeaderRow.Parent.Controls.AddAt(0, newnewrow);
    
                GridViewRow newrow = new GridViewRow(0, 0, DataControlRowType.Header, DataControlRowState.Normal);
                TableHeaderCell newcell = new TableHeaderCell();
                newcell.Text = "Color: " + DropDownList2.SelectedValue;
                newcell.ColumnSpan = 3;
                newcell.HorizontalAlign = HorizontalAlign.Left;
                newrow.Controls.Add(newcell);
                GridView1.HeaderRow.Parent.Controls.AddAt(0, newrow);
    
                GridViewRow row = new GridViewRow(0, 0, DataControlRowType.Header, DataControlRowState.Normal);
                TableHeaderCell cell = new TableHeaderCell();
                cell.Text = "Group Name: " + DropDownList1.SelectedValue;
                cell.ColumnSpan = 3;
                cell.HorizontalAlign = HorizontalAlign.Left;
                row.Controls.Add(cell);
                GridView1.HeaderRow.Parent.Controls.AddAt(0, row);
            }

    About how to use ajax to get data, please check this tutorial:

    Calling ASP.Net WebMethod using jQuery AJAX: 

    https://www.aspsnippets.com/Articles/Calling-ASPNet-WebMethod-using-jQuery-AJAX.aspx 

    Result:

    Best Regards,

    Eric Du 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, December 28, 2017 6:52 AM

All replies

  • User-1838255255 posted

    Hi asp.ambur,

    According to your description and needs, please check the following sample code:

    Sample Code: 

    <body>
        <form id="form1" runat="server">
            <div>
                GroupName:<asp:DropDownList ID="DropDownList1" runat="server">
                    <asp:ListItem>A</asp:ListItem>
                    <asp:ListItem>B</asp:ListItem>
                </asp:DropDownList>
                Color:<asp:DropDownList ID="DropDownList2" runat="server">
                    <asp:ListItem>Red</asp:ListItem>
                    <asp:ListItem>Green</asp:ListItem>
                </asp:DropDownList>
                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                <asp:Button ID="Button1" runat="server" Text="Show" OnClick="Button1_Click" /><br />
                <div>
                    Group Name:<asp:Label ID="Label1" runat="server" Text=""></asp:Label><br />
                    Color:<asp:Label ID="Label2" runat="server" Text=""></asp:Label><br />
                    User Input:<asp:Label ID="Label3" runat="server" Text=""></asp:Label><br />
                    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
                        <Columns>
                            <asp:BoundField DataField="ItemName" HeaderText="ItemName" ItemStyle-Width="30" />
                            <asp:BoundField DataField="Qty" HeaderText="Quantity" ItemStyle-Width="150" />
                            <asp:BoundField DataField="RequiredQuantity" HeaderText="RequiredQuantity" ItemStyle-Width="150" />
                        </Columns>
                    </asp:GridView>
                </div>
            </div>
        </form>
    </body>
    
    protected void Button1_Click(object sender, EventArgs e)
            {
                DataTable table = new DataTable();
                table.Columns.Add("GroupName", typeof(string));
                table.Columns.Add("Color", typeof(string));
                table.Columns.Add("ItemName", typeof(string));
                table.Columns.Add("Qty", typeof(int));
    
                table.Rows.Add("A", "Red", "Apple", 1);
                table.Rows.Add("A", "Red", "Mango", 2);
                table.Rows.Add("A", "Red", "Banana", 6);
                table.Rows.Add("B", "Green", "Mango", 2);
                table.Rows.Add("B", "Green", "Orange", 1);
    
                Label1.Text = DropDownList1.SelectedValue;
                Label2.Text = DropDownList2.SelectedValue;
                Label3.Text = TextBox1.Text;
    
                DataRow[] result = table.Select("GroupName = '" + DropDownList1.SelectedValue + "' AND Color = '" + DropDownList2.SelectedValue + "'");
                DataTable newdt = new DataTable();
                newdt.Columns.Add("ItemName", typeof(string));
                newdt.Columns.Add("Qty", typeof(int));
                newdt.Columns.Add("RequiredQuantity", typeof(int));
    
                foreach (var item in result)
                {
                    newdt.Rows.Add(item[2], item[3], Convert.ToInt32(item[3]) * 10);
                }
                GridView1.DataSource = newdt;
                GridView1.DataBind();
            }

    Result:

    Best Regards,

    Eric Du 

    Monday, December 25, 2017 2:41 AM
  • User2033107836 posted
    Hello Eric

    Can you give me this code in asp.net 2.0 C#

    Thank You
    Monday, December 25, 2017 8:43 AM
  • User-1838255255 posted

    Hi asp.ambur,

    I have tested it in .net 2.0, it works in my side, so i hope you could tested it in your side. If you meet any issue or exception, please share it for us. 

    Best Regards,

    Eric Du 

    Tuesday, December 26, 2017 8:08 AM
  • User2033107836 posted

    Hello

    Two Things

    1)

    Compilation Error

     Description: An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code appropriately.

    Compiler Error Message: CS0246: The type or namespace name 'var' could not be found (are you missing a using directive or an assembly reference?)

    Source Error:

    Line 40:         newdt.Columns.Add("RequiredQuantity", typeof(int));
    Line 41: 
    Line 42:         foreach (var item in result)
    Line 43:         {
    Line 44:             newdt.Rows.Add(item[2], item[3], Convert.ToInt32(item[3]) * 10);

    2) Result set should come like this

    now for example first I select B from dropdownlist1  and Green from dropdownlist2 and textbox1 10 then
                       
    In Gridview I want to show like this              
                       
    Group Name : B                
    Color : Green                  
    User Input : 10                  
    Item Name Quantity Required Quantity            
    Mango 2 20              
    Orange 1 10              
                       
    * Now again user will select dropdownlist1 A & dropdownlist2 Red and textbox1 30 then
                       
    In Gridview I want to show like this              
                       
    Group Name : B                
    Color : Green                  
    User Input : 10                  
    Item Name Quantity Required Quantity            
    Mango 2 20              
    Orange 1 10              
                       
    Group Name : A                
    Color : Red                  
    User Input : 30                  
    Item Name Quantity Required Quantity            
    Apple 1 30              
    Mango 2 60              
    Banana 6 120              

    First filter data should not loss if i filter again it has to come one by one on each filter

    Thanks

    Tuesday, December 26, 2017 10:17 AM
  • User-1838255255 posted

    Hi asp.ambur,

    According yo your description and error message, about the first issue, you could use datarow to replace var. About the second issue, you could use ajax to call data, then bind it through js, please check the following sample:

    Sample Code:

    <head runat="server">
        <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script>
            $(function () {
                debugger;
                // use ajax to get data
                // suppose get the data from the code behind
                var data = { "Drop1": "B", "Drop2": "Red", "TxtValue": "2", "Row1Cell1": "Apple", "Row1Cell2": "3" };
                // bind them to gridview
                var markup = "<tr style='font-weight:bold'><td colspan='3'>Group Name:" + data.Drop1 + "</td></tr><tr style='font-weight:bold'><td colspan='3'>Color:"
                    + data.Drop2 + "</td></tr><tr style='font-weight:bold'><td colspan='3'>User Input:"
                + data.TxtValue + "</td></tr><tr style='font-weight:bold'><td >ItemName</td><td>Quantity</td><td>RequiredQuantity</td></tr><tr><td>"
                + data.Row1Cell1 + "</td><td>"
                + data.Row1Cell2 + "</td><td>"
                + parseInt(data.Row1Cell2) * 10 + "</td></tr>"
                ;
                $("#GridView1").append(markup);
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                GroupName:<asp:DropDownList ID="DropDownList1" runat="server">
                    <asp:ListItem>A</asp:ListItem>
                    <asp:ListItem>B</asp:ListItem>
                </asp:DropDownList>
                Color:<asp:DropDownList ID="DropDownList2" runat="server">
                    <asp:ListItem>Red</asp:ListItem>
                    <asp:ListItem>Green</asp:ListItem>
                </asp:DropDownList>
                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                <asp:Button ID="Button1" runat="server" Text="Show" OnClick="Button1_Click" /><br />
                <div>
                    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" OnDataBound="GridView1_DataBound">
                        <Columns>
                            <asp:BoundField DataField="ItemName" HeaderText="ItemName" ItemStyle-Width="30" />
                            <asp:BoundField DataField="Qty" HeaderText="Quantity" ItemStyle-Width="150" />
                            <asp:BoundField DataField="RequiredQuantity" HeaderText="RequiredQuantity" ItemStyle-Width="150" />
                        </Columns>
                    </asp:GridView>
                </div>
            </div>
        </form>
    </body>
    
     protected void Button1_Click(object sender, EventArgs e)
            {
                DataTable table = new DataTable();
                table.Columns.Add("GroupName", typeof(string));
                table.Columns.Add("Color", typeof(string));
                table.Columns.Add("ItemName", typeof(string));
                table.Columns.Add("Qty", typeof(int));
    
                table.Rows.Add("A", "Red", "Apple", 1);
                table.Rows.Add("A", "Red", "Mango", 2);
                table.Rows.Add("A", "Red", "Banana", 6);
                table.Rows.Add("B", "Green", "Mango", 2);
                table.Rows.Add("B", "Green", "Orange", 1);
    
                DataRow[] result = table.Select("GroupName = '" + DropDownList1.SelectedValue + "' AND Color = '" + DropDownList2.SelectedValue + "'");
                DataTable newdt = new DataTable();
                newdt.Columns.Add("ItemName", typeof(string));
                newdt.Columns.Add("Qty", typeof(int));
                newdt.Columns.Add("RequiredQuantity", typeof(int));
    
                foreach (DataRow item in result)
                {
                    newdt.Rows.Add(item[2], item[3], Convert.ToInt32(item[3]) * 10);
                }
                GridView1.DataSource = newdt;
                GridView1.DataBind();
            }
    
            protected void GridView1_DataBound(object sender, EventArgs e)
            {
                GridViewRow newnewrow = new GridViewRow(0, 0, DataControlRowType.Header, DataControlRowState.Normal);
                TableHeaderCell newnewcell = new TableHeaderCell();
                newnewcell.Text = "User Input: " + TextBox1.Text;
                newnewcell.ColumnSpan = 3;
                newnewcell.HorizontalAlign = HorizontalAlign.Left;
                newnewrow.Controls.Add(newnewcell);
                GridView1.HeaderRow.Parent.Controls.AddAt(0, newnewrow);
    
                GridViewRow newrow = new GridViewRow(0, 0, DataControlRowType.Header, DataControlRowState.Normal);
                TableHeaderCell newcell = new TableHeaderCell();
                newcell.Text = "Color: " + DropDownList2.SelectedValue;
                newcell.ColumnSpan = 3;
                newcell.HorizontalAlign = HorizontalAlign.Left;
                newrow.Controls.Add(newcell);
                GridView1.HeaderRow.Parent.Controls.AddAt(0, newrow);
    
                GridViewRow row = new GridViewRow(0, 0, DataControlRowType.Header, DataControlRowState.Normal);
                TableHeaderCell cell = new TableHeaderCell();
                cell.Text = "Group Name: " + DropDownList1.SelectedValue;
                cell.ColumnSpan = 3;
                cell.HorizontalAlign = HorizontalAlign.Left;
                row.Controls.Add(cell);
                GridView1.HeaderRow.Parent.Controls.AddAt(0, row);
            }

    About how to use ajax to get data, please check this tutorial:

    Calling ASP.Net WebMethod using jQuery AJAX: 

    https://www.aspsnippets.com/Articles/Calling-ASPNet-WebMethod-using-jQuery-AJAX.aspx 

    Result:

    Best Regards,

    Eric Du 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, December 28, 2017 6:52 AM
  • User2033107836 posted

    Hello Eric

    Thanks for your code

    My scenario is different from your code

    Lets us consider first you filter your table with any paramter you will get output show that output in gridview

    now filter again another parameter and it should show new output

    I want old output and new output both should be in gridview

    Hope this clear

    Friday, December 29, 2017 12:54 PM
  • User-1838255255 posted

    Hi asp.ambur, 

    Please try the following steps to achieve your needs:

    1. Enter the parameters in the textbox, then through jQuery ajax to send the parameters to the webmethod. 
    2. In the webmethod, get the data from the database then return it. 
    3. In the success method, to accept data, then split joint it like my previous post. 

    This method could maintain the previous data when you add the new data, the previous data will not disappear. 

    Best Regards,

    Eric Du 

    Wednesday, January 3, 2018 10:07 AM