Filter the gridview on the basis of dropdown list ID. [Outside Gridview]

Question

I have a dropdown list which is outside the gridview. The dropdown list values are coming from master table. I want on the basis of the selected value of the dropdownlist the data in the gridview should get filtered. Please help me achieve this as I am new to this and haven't did it before. See my dropdownlist code:-

<asp:DropDownList ID="ddlPagesNgo" runat="server" CssClass="selectpicker form-control-drp wd" Style="width: 100%" AutoPostBack="false"></asp:DropDownList>

Cs code:-

 private void Binddropdownlist()
    {
        SqlCommand cmd = new SqlCommand("Select * from tbl_ngoname", conn);
        SqlDataAdapter da = new SqlDataAdapter(cmd);
        DataSet ds = new DataSet();
        da.Fill(ds);
        ddlPagesNgo.DataTextField = ds.Tables[0].Columns["ngo_name"].ToString();
        ddlPagesNgo.DataSource = ds.Tables[0];
        ddlPagesNgo.DataBind();
        ddlPagesNgo.Items.Insert(0, new ListItem("--Select NGO--", "0"));
    }

Also see the gridview code

<asp:GridView ID="grdCSRPageData" runat="server" Width="100%" border="1" Style="border: 1px solid #E5E5E5;" CellPadding="3"
                AutoGenerateColumns="False" OnDataBound="grdCSRPageData_DataBound" AllowPaging="true" CssClass="hoverTable"
                OnPageIndexChanging="grdCSRPageData_PageIndexChanging" DataKeyNames="Id" OnRowDeleting="grdCSRPageData_RowDeleting" 
                PageSize="5" ShowFooter="true" OnRowEditing="grdCSRPageData_RowEditing" OnRowUpdating="grdCSRPageData_RowUpdating" 
                OnRowCancelingEdit="grdCSRPageData_RowCancelingEdit">
                <AlternatingRowStyle CssClass="k-alt" BackColor="#f5f5f5"/>
                <Columns>
                    <asp:TemplateField HeaderText="Action" HeaderStyle-Width="5%" HeaderStyle-CssClass="k-grid td" >
                        <ItemTemplate>
                            <asp:Checkbox ID="chkSelect" runat="server" AutoPostBack="false" />
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:BoundField DataField="page_title"  HeaderText="Page Title" ItemStyle-Width="30" HeaderStyle-CssClass="k-grid td"  />
                    <asp:BoundField DataField="page_description" HeaderText="Page Description" ItemStyle-Width="30" HeaderStyle-CssClass="k-grid td" />
                    <asp:BoundField DataField="meta_title" HeaderText="Meta Title" ItemStyle-Width="30" HeaderStyle-CssClass="k-grid td" />
                    <asp:BoundField DataField="meta_keywords" HeaderText="Meta Keywords" ItemStyle-Width="30" HeaderStyle-CssClass="k-grid td" />
                    <asp:BoundField DataField="meta_description" HeaderText="Meta Description" ItemStyle-Width="30" HeaderStyle-CssClass="k-grid td" />
                    <asp:BoundField DataField="Active" HeaderText="Active" ItemStyle-Width="30" HeaderStyle-CssClass="k-grid td" />
                    <asp:TemplateField HeaderText="Action" HeaderStyle-Width="15%" HeaderStyle-CssClass="k-grid td" >
                        <ItemTemplate>
                            <asp:ImageButton ID="btnDelete" AlternateText="Delete" ImageUrl="~/images/delete.png" runat="server" Width="15" Height="15" CommandName="Delete" CommandArgument='<%# Eval("Id") %>' CausesValidation="false" OnClientClick="return confirm('Are you sure you want to delete this record?')" />
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:CommandField ButtonType="Image" ItemStyle-Width="15" EditImageUrl="~/images/edit.png" ShowEditButton="True" ControlStyle-Width="15" ControlStyle-Height="15" CancelImageUrl="~/images/close.png" UpdateImageUrl="~/images/update.png">
                        <ControlStyle Height="20px" Width="20px"></ControlStyle>
                    </asp:CommandField>
                </Columns>
            </asp:GridView>

Do let me know if you need anything else.

Get data function code:-

  private DataTable GetData(SqlCommand cmd)
    {
        DataTable dt = new DataTable();
        SqlConnection conn = new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["DefaultCSRConnection"].ConnectionString);
        SqlDataAdapter sda = new SqlDataAdapter();
        cmd.CommandType = CommandType.Text;
        cmd.Connection = conn;
        try
        {
            conn.Open();
            sda.SelectCommand = cmd;
            sda.Fill(dt);
            return dt;
        }
        catch (Exception ex)
        {
            throw ex;
        }
        finally
        {
            conn.Close();
            sda.Dispose();
            conn.Dispose();
        }
    }

Mudassir Hasan Mudassir Hasan · Accepted Answer · 2014-12-11T09:32:40

Get selected value on selected index changed event of dropdown and pass this value to query genearting datasource to be bound to gridview

protected void ddlPagesNgo_SelectedIndexChanged(object sender, EventArgs e)
{
   BindGrid(ddlPagesNgo.SelectedValue);


}

Your dropdowlist should now be

<asp:DropDownList ID="ddlPagesNgo" runat="server" CssClass="selectpicker form-control-drp wd" Style="width: 100%" AutoPostBack="True" OnSelectedIndexChanged="ddlPagesNgo_SelectedIndexChanged"></asp:DropDownList>

Changes to gridview binding function

    public void BindGrid(int selectedID) 
    { 
    string strQuery = "select Id,page_title,page_description,meta_title,meta_keywords,meta_description,Active from tbl_Pages";
    strQuery +=" WHERE Id = "+selectedID; 
    strQuery +=" ORDER By Id DESC"; 
    SqlCommand cmd = new SqlCommand(strQuery); 
    DataTable dt = GetData(cmd); 
    grdCSRPageData.DataSource = dt; 
    grdCSRPageData.DataBind(); 
    }

Also have a look at parameterized queries to prevent SQL Injection attack.

Filter the gridview on the basis of dropdown list ID. [Outside Gridview]

3 Answers