Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

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

Nov 12, 2011
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
 

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title> Beautiful Gridview theme with Filtering option</title>
<%--Styles to Change the appearance of Girdview --%>
<style type="text/css">
.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.5em 0.5em 0.5em 0.5em;text-align:center
.Gridview td{border-bottom-color:#f0f2da;border-right-color:#f0f2da;padding:0.5em 0.5em 0.5em 0.5em;}
.Gridview tr{color: Black; background-color: White; text-align:left}
:link,:visited { color: #DF4F13; text-decoration:none }
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="GridviewDiv">
<table style="width: 420px" border="0" cellpadding="0" cellspacing="1" class="GridviewTable">
<tr >
<td style="width: 40px;">
UserId
</td>
<td style="width: 120px;" >
LastName
</td>
<td style="width: 130px;">
UserName
</td>
<td style="width: 130px;">
Location
</td>
</tr>
<tr >
<td style="width: 40px;">
</td>
<td style="width: 120px;">
</td>
<td style="width: 130px;">
<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>
<td style="width: 130px;">
<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>
<td colspan="4">
<asp:GridView runat="server" ID="gvdetails" ShowHeader="false" AllowPaging="true" PageSize="10" DataSourceID="dsdetails" AutoGenerateColumns="false" Width="420px"  CssClass="Gridview">
<Columns>
<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}%'">
<FilterParameters>
<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

<connectionStrings>
<add name="dbconnection" connectionString="Data Source=SureshDasari;Integrated Security=true;Initial Catalog=MySampleDB"/>
</connectionStrings>
Demo

Download sample code attached


If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

21 comments :

Anonymous said...
This comment has been removed by a blog administrator.
Sunil said...

nice 1 suresh!!

Anonymous said...

how can we edit and delete record in thistype of gridview

SapnaArunesh said...

Good Article

Anonymous said...

u really provide good eco system dude how can i contact u ??

Anonymous said...

Hi ..................

Anonymous said...

kjhkjhkjhkjhkjhkjhkjh

Anonymous said...

Really i am your fan.....i am from chennai dude if u r in chennai pls reply me

Anonymous said...

hhfjerg

Anonymous said...

Give some updated examples and tricks Sir.

Anees Hussain said...

Excellent Man..Please keep it up the Good Work...

Anonymous said...

Hi suresh,

i have a debug in aspgrdview.
i am inserting data into gridview to datasource with using of template fields, while inserting into grid how can i find duplicate values in gridview.

Anonymous said...

where is the demo dude :p

Unknown said...

really i am your fan .............

Anonymous said...

nice!

Anonymous said...

what a karvad.............

Anonymous said...

well, very usefull to the upcoming Engineers

Manish said...

Seems like not working. :(

Manish said...

I am really sorry for the above comment, it is working absolutely fine! Awesome article.

Anonymous said...

No need to write anycode for this in view code... is it enough if we do like this

Anonymous said...

Where is the view code?? it dint work for me

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.