Dear friends,

Could somebody please help me make a gridview that can be resized with a mouse?

Thank you in advance,
Dmitriy

Do you want to resize the columns of a GridView?

First of all, I want to be able to resize my grid itself.

I use the following code, but it doesn't work: I can resize the panel containing the grid, but not the grid itself:

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="GridViewRecizable.aspx.cs" Inherits="GridViewRecizable" %>  
    <%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="ajaxToolkit" %>  
      
    <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">  
    </asp:Content>  
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">  
       <style type="text/css">  
            .handle  
           {  
               width: 16px;  
               height: 16px;  
               background-image: url(image/HandleGrip.png);  
               overflow: hidden;  
               cursor: se-resize;  
           }  
       </style>  
   <div>  
       <asp:ScriptManager ID="ScriptManager1" runat="server">  
   </asp:ScriptManager>  
    
   <script type="text/javascript">  
   function onResize(sender, eventArgs)  
   {  
       var e = sender.get_element();  
       alert("Current height and width of Resizable Panel:\n\nwidth: " + e.scrollWidth + ", height: " + e.scrollHeight);  
   }  
   </script>  
   <ajaxToolkit:ResizableControlExtender  
        ID="ResizableControlExtender2"  
        runat="server"  
        TargetControlID="Panel1"  
        MinimumHeight="20"  
        MinimumWidth="20"  
        HandleCssClass="handle"  
        HandleOffsetX="10"   
        HandleOffsetY="10"   
        OnClientResize="onResize">  
   </ajaxToolkit:ResizableControlExtender>  
     
   <asp:Panel ID="Panel1" runat="server">  
       <asp:GridView ID="grdResizable" runat="server"  
           DataSourceID="SqlDataSource1" AllowPaging="True" Width="100%" Height="100%"  
           AutoGenerateColumns="False">  
           <Columns>  
               <asp:BoundField DataField="BookStem" HeaderText="BookStem" ReadOnly="True"   
                   SortExpression="BookStem" />  
               <asp:BoundField DataField="Updated" HeaderText="Updated" ReadOnly="True"   
                   SortExpression="Updated" />  
               <asp:BoundField DataField="Released" HeaderText="Released" ReadOnly="True"   
                   SortExpression="Released" />  
               <asp:BoundField DataField="Title" HeaderText="Title" ReadOnly="True"   
                   SortExpression="Title" />  
               <asp:BoundField DataField="Subtitle" HeaderText="Subtitle" ReadOnly="True"   
                   SortExpression="Subtitle" />  
           </Columns>  
       </asp:GridView>  
   </asp:Panel>  
   </div>  
       <asp:SqlDataSource ID="SqlDataSource1" runat="server"   
           ConnectionString="<%$ ConnectionStrings:BookList %>"   
           ProviderName="<%$ ConnectionStrings:BookList.ProviderName %>"   
           SelectCommand="SELECT ' ' AS BookStem, ' ' AS Updated, ' ' AS Released, ' ' AS Title, ' ' AS Subtitle FROM booklist ORDER BY BookStem;"></asp:SqlDataSource>  
   </asp:Content>

It seems like my code interferes with code in master page:

<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
                </asp:ContentPlaceHolder>
                </div>
            </td>
        </tr>
        <tr>
            <td colspan = "2" >
                <div>
                Copyright 2008 - MyCompany&nbsp;
                </div>
            </td>
        </tr>
    </table>
    </form>

When I am trying to grasp and drag my grid, it starts correctly, but immediately starts dragging the "Copyright 2008 - MyCompany" part of the masterpage instead.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.