Search

Monday, April 6, 2015
0 comments

Resize Gridview Control using JQuery

8:40 AMMonday, April 6, 2015
Resizable() is the method, through which we can resize our asp.net control. Actually here we resize division tag using jquery and css, that is already available on this path.

<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

Through the jquery-ui.css, we can create a outer box around the controls. This css file contain a single class that is ui-widget-content, in which define some properrties, Check this snapshot.

 jquery-ui.css-ui-widget-content

And the jquery-ui.js file contain resizable() method, check this snap.

jquery-ui.js file contain resizable()


How to take some steps for doing this 

1. Add a one link and two script file in the head tag.
2. Add this script tag , in which call resizable() method by the id of div tag.
3. Add a <div> tag with ui-widget-content class and id proerty
4. Take controls inside the <div>Controls</div> tag.
5. Bound the controls from data source.
6. Run this application

Full code

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="aspnetcontrolresize.aspx.cs" Inherits="aspnetcontrolresize" %>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Resizable ASP.NET Control</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

    <script type="text/javascript">
        $(function () {
            $("#divresize").resizable();
        })
</script>
</head>
<body>
<form id="form1" runat="server">
  <div id="divresize" class="ui-widget-content" style="width:200px;padding:0.2em">

      <asp:GridView ID="GridView1" runat="server" Width="100%">
          <HeaderStyle ForeColor="Orange" BackColor ="Green"
/>
      </asp:GridView>

  </div> 

</form>
</body>
</html>

Code generate the following output

Resize Controls at run time using JQuery-1

Resize Controls at run time using JQuery
Protected by Copyscape Online Copyright Protection Software

0 comments :

Post a Comment

 
Toggle Footer
Top