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?
ASP.NET GridView does not allow you to resize the columns by default. You need to extend the functionality programatically.
Take a look at the following links
ASP.NET GridView column resizing
Creating a GridView with Resizable Column Headers
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
</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.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.