Resize Gridview Control using JQuery

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

Comments

Popular posts from this blog

difference between structure and union in C Language

Difference between Linear search and Binary Search in c language

Difference between static and dynamic websites