Resize Gridview Control using JQuery

April 06, 2015 , 0 Comments

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

Jacob Lefore

Some say he’s half man half fish, others say he’s more of a seventy/thirty split. Either way he’s a fishy bastard. Google

0 comments: