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=GohilRajni;Integrated
Security=true;Initial Catalog=MySampleDB"/>
</connectionstrings>
|
filtering gridview rows in c#
ReplyDelete