Hi
Friends, here i am going to explain how to use JQuery GridView in
WebForms.
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"
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
To download the above files click on the link below.
https://drive.google.com/file/d/0B9hDwZfSCCC5Tm1qc1NFc3B6a1k/edit?usp=sharing
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
column1,column2,column3 from tableName",
strConnect);
da.Fill(dataset,
"TableName");
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';
tempColor= this.style.backgroundColor;
this.style.backgroundColor='#2187AF';");
e.Row.Attributes.Add("onmouseout",
"this.style.backgroundColor=tempColour;");
}
For
Further Details
Hi
Friends, here i am going to explain how to use JQuery GridView in
WebForms.
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"
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
To download the above files click on the link below.
https://drive.google.com/file/d/0B9hDwZfSCCC5Tm1qc1NFc3B6a1k/edit?usp=sharing
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"]],
"iDisplayLength": 10,
"aaSorting": [[0, "asc"]],
"bJQueryUI":
true,"bAutoWidth":
false,"bProcessing":
true,
"sDom": '<"top"i><"title">lt<"bottom"pf>',
"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
column1,column2,column3 from tableName",
strConnect);
da.Fill(dataset,
"TableName");
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';
tempColor= this.style.backgroundColor;
this.style.backgroundColor='#2187AF';");
e.Row.Attributes.Add("onmouseout",
"this.style.backgroundColor=tempColour;");
}
For
Further Details
No comments:
Post a Comment