This article will show you how you can make a resizable
gridview using jQuery in asp.net.
Some of my previous articles are as follows: Draggable
GridView Using jQuery in Asp.Net, GridView
Bind By Using AccessDataSource in Asp.Net, GridView
Validation Of TextBox Using RequiredFieldValidator Control Asp.Net Using C#.Net,
Gridview
Export to XML in Asp.Net Using C#.Net, Gridview
Selected Row Value Pass to JavaScript Function On Hyperlink Click in Asp.net
Using C#.Net, Gridview
Row Highlighting in Condition Bases in Asp.net Using C#.Net, GridView
Find Control Value on RowDataBound In Asp.Net Using C#.Net and VB.Net, GridView
Export to HTML in Asp.Net Using C#.Net and VB.Net, GridView
- Delete Selected Row Record From DataBase On Button Click in Asp.net Using
C#.Net.
So for this article first we will create a new asp.net
application and add the bellow jQuery reference.
<link rel="stylesheet"
href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"/>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
|
Now add the below jQuery code into the header of the page.
<script>
$(function
() {
$("#resizableGridView").resizable();
});
</script>
|
After adding all the reference and code your page code will
look as shown below.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ProjectDemo_Asp.et.Default"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Resizable
Gridview Using jQuery in Asp.Net</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"/>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<style>
#resizableGridView
{
width:
400px;
padding:
0.5em;
}
#resizableGridView
h4
{
text-align:
center;
margin:
0;
}
</style>
<script>
$(function
() {
$("#resizableGridView").resizable();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="resizableGridView" class="ui-widget-content">
<h4 class="ui-widget-header">
Resizable GridView</h4>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" EmptyDataText="There are no data records to display."
Width="100%" BorderStyle="Solid" ShowFooter="True">
<Columns>
<asp:BoundField DataField="author_name" HeaderText="NAME" />
<asp:BoundField DataField="publisher_name" HeaderText="PUB. NAME" />
<asp:BoundField DataField="title" HeaderText="TITLE" />
<asp:BoundField DataField="publication_year" HeaderText="PUB.
YEAR" />
</Columns>
<HeaderStyle BackColor="#66CCFF" />
</asp:GridView>
</div>
</form>
</body>
</html>
|
In above code I have added the gridview inside the div
control. This div control will responsible for making re sizable gridview.
Now we have done. Run the application to check the output.
DOWNLOAD
About the Author
0 comments:
Please let me know your view