Purvi's Blog: Asp.net filter gridview records with dropdownlist selection | Gridview Filter Expression with dropdownlist using asp.net

Friday, 29 March 2013

Asp.net filter gridview records with dropdownlist selection | Gridview Filter Expression with dropdownlist using asp.net | Beautiful style for Gridview using css

Introduction:

In this article I will explain how to change the appearance of gridview and how to filter gridview records with dropdownlist selection using asp.net.

Description:

In Previous posts I explained lot of articles regarding Gridview. Now I will explain how to implement beautiful looking gridview and filter gridview records with dropdownlist selection using asp.net. To implement this first design the table in database and give name UserInfomation

ColumnName	DataType
UserId	Int(set identity property=true)
UserName	varchar(50)
LastName	varchar(50)
Location	varchar(50)

After completion table creation write some of css classes to change the appearance of gridview and design aspx page like this

<title> Beautiful Gridview theme with Filtering option</title>

<%--Styles to Change the appearance of Girdview --%>

.GridviewDiv {font-size: 100%; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Arial,Helevetica, sans-serif; color: #303933;}

Table.Gridview{border:solid 1px #df5015;}

.GridviewTable{border:none}

.GridviewTable td{margin-top:0;padding: 0; vertical-align:middle }

.GridviewTable tr{color: White; background-color: #df5015; height: 30px; text-align:center}

.Gridview th{color:#FFFFFF;border-right-color:#abb079;border-bottom-color:#abb079;padding:0.5em0.5em 0.5em 0.5em;text-align:center}

.Gridview td{border-bottom-color:#f0f2da;border-right-color:#f0f2da;padding:0.5em 0.5em 0.5em0.5em;}

.Gridview tr{color: Black; background-color: White; text-align:left}

:link,:visited { color: #DF4F13; text-decoration:none }

</style>

</head>

<body>

<tr >

UserId

</td>

LastName

</td>

UserName

</td>

Location

</td>

</tr>

<tr >

</td>

</td>

<asp:DropDownList ID="ddlUserName" runat="server" DataSourceID="dsUserName"DataValueField="UserName" AutoPostBack="true" Width="120px" Font-Size="11px"AppendDataBoundItems="true">

<asp:ListItem Text="All" Value="%"/>

</asp:DropDownList>

</td>

<asp:DropDownList ID="ddlLocation" runat="server" DataSourceID="dsLocation" DataValueField="Location"AutoPostBack="true" Width="120px" Font-Size="11px" AppendDataBoundItems="true">

<asp:ListItem Text="All" Value="%"/>

</asp:DropDownList>

</td>

</tr>

<tr>

<asp:GridView runat="server" ID="gvdetails" ShowHeader="false" AllowPaging="true" PageSize="10"DataSourceID="dsdetails" AutoGenerateColumns="false" Width="420px" CssClass="Gridview">

<asp:BoundField DataField="UserId" HeaderText="UserId" ItemStyle-Width="40px" />

<asp:BoundField DataField="LastName" HeaderText="LastName" ItemStyle-Width="120px" />

<asp:BoundField DataField="UserName" HeaderText="UserName" ItemStyle-Width="130px"/>

<asp:BoundField DataField="Location" HeaderText="Location" ItemStyle-Width="130px"/>

</Columns>

</asp:GridView>

</td>

</tr>

</table>

</div>

<asp:SqlDataSource ID="dsUserName" runat="server"ConnectionString="<%$ConnectionStrings:dbconnection %>" SelectCommand="Select Distinct UserName from UserInformation"></asp:SqlDataSource>

<asp:SqlDataSource ID="dsLocation" runat="server"ConnectionString="<%$ConnectionStrings:dbconnection %>" SelectCommand="Select Distinct Location from UserInformation"></asp:SqlDataSource>

<asp:SqlDataSource ID="dsdetails" runat="server"ConnectionString="<%$ConnectionStrings:dbconnection %>" SelectCommand="select * from UserInformation" FilterExpression=" UserName Like '{0}%' and Location Like '{1}%'">

<asp:ControlParameter Name="UserName" ControlID="ddlUserName" PropertyName="SelectedValue" />

<asp:ControlParameter Name="Location" ControlID="ddlLocation" PropertyName="SelectedValue" />

</FilterParameters>

</asp:SqlDataSource>

</form>

</body>

</html>

If you observe above code in header section I written css classes by using those we can change the appearance of gridview and written code to bind dropdownlists, gridview and bind the gridview records based on dropdownlists selection.

Here don’t forgot to set the connection string in web.config file here I am getting database connection from web.config file for that reason you need to set the connectionstring in web.config file like this