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.
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
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 Email
|
|||
21 comments :
nice 1 suresh!!
how can we edit and delete record in thistype of gridview
Good Article
u really provide good eco system dude how can i contact u ??
Hi ..................
kjhkjhkjhkjhkjhkjhkjh
Really i am your fan.....i am from chennai dude if u r in chennai pls reply me
hhfjerg
Give some updated examples and tricks Sir.
Excellent Man..Please keep it up the Good Work...
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.
where is the demo dude :p
really i am your fan .............
nice!
what a karvad.............
well, very usefull to the upcoming Engineers
Seems like not working. :(
I am really sorry for the above comment, it is working absolutely fine! Awesome article.
No need to write anycode for this in view code... is it enough if we do like this
Where is the view code?? it dint work for me
Note: Only a member of this blog may post a comment.