Hi My Dear Friends, here i am going to
explain how to use JQuery GridView in WebForm.
By Default this Jquery Grid supports
Sorting, Pagging and Searching the data within the Grid with good
look and feel.
To Start this...
File -> New -> Website ->
Name it as "YourWebSiteName" (Here I used as Jgrid).
In the Default.aspx page add the
following Script files in the <head> tag.
<link
href="css/jquery-ui.css"
rel="stylesheet"
type="text/css"
/>
<link
href="css/jquery.dataTables_themeroller.css"
rel="stylesheet"
type="text/css"
/>
<script
src="css/jquery.js"
type="text/javascript"></script>
<script
src="css/jquery.dataTables.min.js"
type="text/javascript"></script>
<script
src="css/jquery-ui-1.9.2.custom.min.js"
type="text/javascript"></script>
In the following project add the
following script files in the css folder.
Jquery-ui.css
jquery.dataTables_themeroller.css
jquery.js
jquery.dataTables.min.js
jquery-ui-1.9.2.custom.min.js
Add the Following JavaScript code which
applies the Jquery Grid Styles to our Normal GridView.
<script
type="text/javascript">
var
oTable;
$(document).ready(function()
{
$('#GridView1').dataTable({
"aLengthMenu":
[[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
"iDisplayLength":
10,
"aaSorting":
[[0, "asc"]],
"bJQueryUI":
true,
"bAutoWidth":
false,
"bProcessing":
true,
"sDom":
'<"top"i><"title">lt<"bottom"pf>',
"sPaginationType":
"full_numbers",
"bRetrieve":
true,
//----Scrolling----
"sScrollY":
"275px",
"sScrollX":
"100%",
"sScrollXInner":
"100%",
"bScrollCollapse":
true,
//
---- Print_Export_Copy ----
"sDom":
'T<"clear"><"H"lfr>t<"F"ip>',
"oLanguage":
{
"sZeroRecords":
"There are
no Records that match your search critera",
"sLengthMenu":
"Display
_MENU_ records per page ",
"sInfo":
"Displaying
_START_ to _END_ of _TOTAL_ records",
"sInfoEmpty":
"Showing 0
to 0 of 0 records",
"sInfoFiltered":
"(filtered
from _MAX_ total records)",
"sEmptyTable":
'No Rows to
Display.....!',
"sSearch":
"Search all
columns:"
},
"oSearch":
{
"sSearch":
"",
"bRegex":
false,
"bSmart":
true
},
});
$('#GridView1
tbody td').click(function()
{
var
aPos = oTable.fnGetPosition(this);
var
aData = oTable.fnGetData(aPos[0]);
});
/*
Init the table */
oTable =
$('#GridView1').dataTable();
});
</script>
In
Code Behind.....
In
Page_load bind the data to the gridview1.
string
strConnect = "server=xxxxxxxxx;
user id=xxxx; pwd=xxxxxxx; database=xxxxxxxxxxxxx;";
DataSet
dataset = new
DataSet();
SqlDataAdapter
da = new
SqlDataAdapter("select
DEPARTMENTID,DEPARTMENTNAME,DEPARTMENTHEAD,VCHSTATUS,VCHCREATEDBY
from TABDEPARTMENT",
strConnect);
da.Fill(dataset, "polls");
GridView1.DataSource = dataset;
GridView1.DataBind();
Add
the following events to the GridView Control...
OnPreRender="GridView1_PreRender"
OnRowDataBound="GridView1_RowDataBound"
protected
void
GridView1_PreRender(object
sender, EventArgs
e)
{
GridView1.HeaderRow.TableSection
= TableRowSection.TableHeader;
GridView1.FooterRow.TableSection
= TableRowSection.TableFooter;
GridView1.FooterRow.Cells.Clear();
}
protected
void
GridView1_RowDataBound(object
sender, GridViewRowEventArgs
e)
{
e.Row.Attributes.Add("onmouseover",
"this.style.cursor='pointer';
tempColour = this.style.backgroundColor;
this.style.backgroundColor='#2187AF';");
e.Row.Attributes.Add("onmouseout",
"this.style.backgroundColor=tempColour;");
}
For
Further Details
No comments:
Post a Comment