Saturday 1 December 2012

NO CODING : Filter Gridview with Cascade Dropdownlist and Textbox

Technique filter gridview without any CODE.
I like simple way, dont like to write code too much. I am not typist, so generally using the design mode to create aspx page. I'm not so concerned with control ID, i think its not important in design mode.
Simply pick .. pick ..pick ...



Sorry if my sample have dropdownlist databound event. Only want insert "Show All" item in dropdown. I cannotd do it directly to the ddl html tag by enableappend, because result problem.

The sample using Music table with GENRE, ALBUM and TITLE fields

Table Name : Music
Table Fields : Genre, Album., Title

To use this code simply create table like above and create connection string in web.config called "TESTConnectionString" and copy-paste code below to your aspx page.

This is the sample
ASPX

<form id="form1" runat="server">
  <div>
        <table>
            <tr>
                <td class="style1">
                    Genre</td>
                <td>
        <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" 
                        DataSourceID="SqlDataSource1" DataTextField="Genre" DataValueField="Genre" 
                        ondatabound="DropDownList1_DataBound">
            <asp:ListItem Value="%">All Genre</asp:ListItem>
        </asp:DropDownList>

                    <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
                        ConnectionString="<%$ ConnectionStrings:TESTConnectionString %>" 
                        SelectCommand="SELECT DISTINCT [Genre] FROM [Music] WHERE ([Genre] IS NOT NULL)">
                    </asp:SqlDataSource>
                </td>
            </tr>
            <tr>
                <td class="style1">
                    Album</td>
                <td>
        <asp:DropDownList ID="DropDownList2" runat="server" AutoPostBack="True" 
                        DataSourceID="SqlDataSource2" DataTextField="Album" DataValueField="Album" 
                        ondatabound="DropDownList2_DataBound">
            <asp:ListItem Value="%">All Album</asp:ListItem>
        </asp:DropDownList>

                    <asp:SqlDataSource ID="SqlDataSource2" runat="server" 
                        ConnectionString="<%$ ConnectionStrings:TESTConnectionString %>" 
                        SelectCommand="SELECT DISTINCT [Album] FROM [Music] 
                        WHERE (([Album] IS NOT NULL) AND ([Genre] LIKE @Genre))">
                        <SelectParameters>
                            <asp:ControlParameter ControlID="DropDownList1" Name="Genre" 
                                PropertyName="SelectedValue" Type="String" />
                        </SelectParameters>
                    </asp:SqlDataSource>
                </td>
            </tr>
            <tr>
                <td class="style1">
                    Title</td>
                <td>
                    <asp:TextBox ID="TextBox1" runat="server" AutoPostBack="True"></asp:TextBox>
                </td>
            </tr>
        </table>
        <asp:GridView ID="GridView1" runat="server" AllowPaging="True" 
            AllowSorting="True" AutoGenerateColumns="False" CellPadding="4" 
            DataSourceID="SqlDataSource3" ForeColor="#333333" GridLines="None" Width="100%">
            <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
            <Columns>
                <asp:BoundField DataField="Genre" HeaderText="Genre" SortExpression="Genre" />
                <asp:BoundField DataField="Album" HeaderText="Album" SortExpression="Album" />
                <asp:BoundField DataField="Title" HeaderText="Title" SortExpression="Title" />
            </Columns>
            <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
            <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
            <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
            <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
            <EditRowStyle BackColor="#999999" />
            <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
        </asp:GridView>
        <asp:SqlDataSource ID="SqlDataSource3" runat="server" 
            ConnectionString="<%$ ConnectionStrings:TESTConnectionString %>" 
            SelectCommand="SELECT Genre, Album, Title FROM Music WHERE (Album LIKE '%' + @Album + '%') 
            AND (Genre LIKE '%' + @Genre + '%') AND (Title LIKE '%' + @Title + '%')">
            <SelectParameters>
                <asp:ControlParameter ControlID="DropDownList1" Name="Genre" 
                    PropertyName="SelectedValue" Type="String" />
                <asp:ControlParameter ControlID="DropDownList2" Name="Album" 
                    PropertyName="SelectedValue" Type="String" />
                <asp:ControlParameter ControlID="TextBox1" DefaultValue="%" Name="Title" 
                    PropertyName="Text" Type="String" />
            </SelectParameters>
        </asp:SqlDataSource>

     </div>
    </form>
C#

protected void DropDownList1_DataBound(object sender, EventArgs e)
    {
        DropDownList1.Items.Insert(0, new ListItem("All Genre", "%"));
    }
protected void DropDownList2_DataBound(object sender, EventArgs e)
    {
        DropDownList2.Items.Insert(0, new ListItem("All Album", "%"));
    }

No comments:

Post a Comment