Grid Column Resizing

[Liji Jose]

Hi,

    How to Resize Columns when ShowHeader Property is Set to "False" .

 

 

 

<telerik:RadGrid

 

ID="PMGrdPhone" runat="server" CellPadding="0" AutoGenerateColumns="False"

 

 

GridLines="None" ShowHeader="False" AllowMultiRowEdit="True" CellSpacing="0"

 

 

TabIndex="19" Skin="Simple">

 

 

<HeaderContextMenu EnableAutoScroll="True">

 

 

</HeaderContextMenu>

 

 

<MasterTableView EditMode="InPlace">

 

 

<RowIndicatorColumn Visible="True">

 

 

</RowIndicatorColumn>

 

 

<Columns>

 

 

<telerik:GridTemplateColumn ItemStyle-Width="155px">

 

 

<ItemTemplate>

 

 

<telerik:RadComboBox ID="tcbNumberType" runat="server" Height="13px"

 

 

Width="153px">

 

 

</telerik:RadComboBox>

 

 

</ItemTemplate>

 

 

<ItemStyle Width="155px" />

 

 

</telerik:GridTemplateColumn>

 

 

<telerik:GridTemplateColumn ItemStyle-Width="30px">

 

 

<ItemTemplate>

 

 

<telerik:RadTextBox ID="txtAreacode" runat="server" Height="13px" Width="27px">

 

 

</telerik:RadTextBox>

 

 

</ItemTemplate>

 

 

<ItemStyle Width="30px" />

 

 

</telerik:GridTemplateColumn>

 

 

<telerik:GridTemplateColumn ItemStyle-Width="58px">

 

 

<ItemTemplate>

 

 

<telerik:RadTextBox ID="ttxtPhoneNo" runat="server" Height="13px" Width="56px">

 

 

</telerik:RadTextBox>

 

 

</ItemTemplate>

 

 

<ItemStyle Width="58px" />

 

 

</telerik:GridTemplateColumn>

 

 

<telerik:GridTemplateColumn ItemStyle-Width="10px">

 

 

<ItemTemplate>

 

 

<asp:Label ID="lblExt" runat="server" Text="x" Width="7px"></asp:Label>

 

 

</ItemTemplate>

 

 

<ItemStyle Width="10px" />

 

 

</telerik:GridTemplateColumn>

 

 

<telerik:GridTemplateColumn ItemStyle-Width="46px">

 

 

<ItemTemplate>

 

 

<telerik:RadTextBox ID="ttxtExtension" runat="server" Height="13px"

 

 

Width="44px">

 

 

</telerik:RadTextBox>

 

 

</ItemTemplate>

 

 

<ItemStyle Width="46px" />

 

 

</telerik:GridTemplateColumn>

 

 

<telerik:GridTemplateColumn HeaderStyle-Width="45px" ItemStyle-Width="45px">

 

 

<ItemTemplate>

 

 

<asp:Label ID="lblEmail" runat="server" Text="E-mail :" Width="55px"></asp:Label>

 

 

</ItemTemplate>

 

 

<HeaderStyle Width="45px" />

 

 

<ItemStyle Width="45px" />

 

 

</telerik:GridTemplateColumn>

 

 

<telerik:GridTemplateColumn ItemStyle-Width="235px">

 

 

<ItemTemplate>

 

 

<telerik:RadTextBox ID="ttxtEmailAddress" runat="server" Height="13px"

 

 

Width="233px">

 

 

</telerik:RadTextBox>

 

 

</ItemTemplate>

 

 

<ItemStyle Width="235px" />

 

 

</telerik:GridTemplateColumn>

 

 

</Columns>

 

 

</MasterTableView>

 

 

<ClientSettings AllowColumnsReorder="true" ReorderColumnsOnClient="true">

 

 

<Resizing AllowColumnResize="True" AllowRowResize="True"

 

 

EnableRealTimeResize="True" ResizeGridOnColumnResize="True" />

 

 

</ClientSettings>

 

 

 

 

</telerik:RadGrid>

 

 

 

 

 

 

Protected

 

Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

 

 

Dim dtContact As DataTable = New DataTable("Contact")

 

 

Dim row As DataRow = Nothing

 

 

' add columns

 

dtContact.Columns.Add(

"id", Type.GetType("System.Int32"))

 

dtContact.Columns.Add(

"NumberType", Type.GetType("System.String"))

 

dtContact.Columns.Add(

"AreaCode", Type.GetType("System.String"))

 

dtContact.Columns.Add(

"PhoneNumber", Type.GetType("System.String"))

 

dtContact.Columns.Add(

"Extension", Type.GetType("System.String"))

 

dtContact.Columns.Add(

"EmailAddress", Type.GetType("System.String"))

 

 

' set PrimaryKey

 

dtContact.Columns(

"id").Unique = True

 

dtContact.Rows.Add(1,

"", "", "", "", "")

 

dtContact.Rows.Add(2,

"", "", "", "", "")

 

PMGrdPhone.DataSource = dtContact

PMGrdPhone.DataBind()

 

End Sub

 

 

Protected Sub Page_PreRender1(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreRender

 

 

If Not Page.IsPostBack Then

 

 

For Each item As GridDataItem In PMGrdPhone.Items

 

item.Edit =

True

 

 

Next

 

PMGrdPhone.Rebind()

 

End If

 

 

End Sub




Thanks & Regards
LijiJose

 

[Dimo]

Hello Liji Jose,

When there is no header, you can resize columns only via the client API.

<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<script runat="server">

    protected void RadGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
    {
        DataTable dt = new DataTable();
        DataRow dr;
        int colsNum = 4;
        int rowsNum = 5;
        string colName = "Column";

        for (int j = 1; j <= colsNum; j++)
        {
            dt.Columns.Add(String.Format("{0}{1}", colName, j));
        }

        for (int i = 1; i <= rowsNum; i++)
        {
            dr = dt.NewRow();

            for (int k = 1; k <= colsNum; k++)
            {
                dr[String.Format("{0}{1}", colName, k)] = String.Format("{0}{1} Row{2}", colName, k, i);
            }
            dt.Rows.Add(dr);
        }

        (sender as RadGrid).DataSource = dt;
    }

</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>RadControls</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />

<telerik:RadGrid
    ID="RadGrid1"
    runat="server"
    Width="800px"
    Skin="Office2007"
    ShowHeader="false"
    OnNeedDataSource="RadGrid_NeedDataSource">
    <ClientSettings>
        <Resizing AllowColumnResize="true" />
    </ClientSettings>
</telerik:RadGrid>

<br /><br />

<telerik:RadNumericTextBox ID="RadNumericTextBox2" runat="server"
    MinValue="0" MaxValue="3" Label="column index" NumberFormat-DecimalDigits="0" />

<telerik:RadNumericTextBox ID="RadNumericTextBox1" runat="server"
    MinValue="30" MaxValue="400" Label="new width" NumberFormat-DecimalDigits="0" />

<asp:Button ID="Button1" runat="server" Text="resize" OnClientClick="return resizeCol()" />

<script type="text/javascript">

function resizeCol()
{
    var index = $find("<%= RadNumericTextBox2.ClientID %>").get_value();
    var newWidth = $find("<%= RadNumericTextBox1.ClientID %>").get_value();
    if (index && newWidth)
        $find("<%= RadGrid1.ClientID %>").get_masterTableView().resizeColumn(index, newWidth);

    return false;
}

</script>

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

Sincerely yours,
Dimo
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.