Setting width of a item column

[Clarence Klopfstein]

I have a very basic column and trying to set the width is not working:

<telerik:GridTemplateColumn UniqueName="Delete" Display="true" HeaderText="&nbsp;" ItemStyle-Width="20px" HeaderStyle-Width="40px" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center">
                <ItemTemplate>
                    <asp:ImageButton  CssClass="test" ImageUrl="~/images/silk/cancel.png" ID="btnDeleteItem" runat="server" CommandArgument='<%# Eval("Id") %>' onclick="btnDeleteItem_Click" />
                </ItemTemplate>
            </telerik:GridTemplateColumn>

I set the width to be 20px for both, but the ItemTemplate is always doing a width of 40.  Which forced me to make the headerStyle-Width equal to 40.

How do I set the ItemTemplate width to make it take?  The image button included in the template is just 16x16 pixels in size.

[Dimo]

Hi Clarence,

RadGrid column widths should be set with HeaderStyle-Width only. Using ItemStyle-Width produces unexpected results.

In addition, you should be aware that the browser behavior with regard to column widths is different - Internet Explorer increases the column width by the amount of left and right cell padding, while the other browsers don't do that and the column is exactly as wide as specified. If you want to prevent this inconsistency, you should set HeaderStyle-CssClass and ItemStyle-Class for the template column and nullify the table cell paddings with CSS:

<telerik:GridTemplateColumn  HeaderStyle-CssClass="NoPadding"  ItemStyle-CssClass="NoPadding"  />

.NoPadding
{
       padding-left:  0  !important ;
       padding-right:  0  !important ;
}

Finally, table cells normally expand width-wise in order to enclose all their content, unless you set TableLayout="Fixed" to the MasterTableView.

Let us know if you need more information.

Sincerely yours,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Sompop]

Hi there,

I am having a problem with date column with radgrid when using autogeneratecolumn=true or by default I believe. I had this problem with autogeneratecolumn=false before and one of you suggested me to use Style="overflow: hidden" and it works. Please help me how I can fix this bug. See the screenshot for more details.

Thank you,

Sompop


.aspx
<telerik:RadGrid ID="rgExcelQuoteItems" runat="server" Height="540px" Style="overflow: hidden"
                        Skin="Gray" AllowPaging="true" AllowSorting="true" GridLines="none" AllowFilteringByColumn="true"
                        HeaderStyle-HorizontalAlign="center" OnNeedDataSource="rgExcelQuoteItems_NeedDataSource"
                        OnItemDataBound="rgExcelQuoteItems_ItemDataBound">
                        <PagerStyle Mode="NextPrevNumericAndAdvanced" />
                        <MasterTableView Width="100%">
                            <Columns>
                                <telerik:GridTemplateColumn AllowFiltering="false" ItemStyle-Width="20px">
                                    <ItemTemplate>
                                        <asp:CheckBox ID="chkSelect" runat="server" />
                                    </ItemTemplate>
                                </telerik:GridTemplateColumn>
                            </Columns>
                        </MasterTableView>
                        <GroupPanel Visible="True">
                        </GroupPanel>
                        <ClientSettings AllowColumnsReorder="True" AllowDragToGroup="True" ReorderColumnsOnClient="True"
                            ColumnsReorderMethod="reorder">
                            <Resizing AllowColumnResize="False"></Resizing>
                            <Scrolling AllowScroll="True" UseStaticHeaders="False" SaveScrollPosition="True" />
                        </ClientSettings>
                    </telerik:RadGrid>

.aspx.cs
protected void rgExcelQuoteItems_NeedDataSource(object source, GridNeedDataSourceEventArgs e)
        {
            rgExcelQuoteItems.DataSource = DATA TABLE;
        }

protected void rgExcelQuoteItems_ItemDataBound(object sender, GridItemEventArgs e)
        {
            if (e.Item is GridDataItem)
            {
                GridDataItem item = (GridDataItem)e.Item;
            }
        }

 

[Jayesh Goyani]

Hello,

<telerik:GridDateTimeColumn FilterControlWidth="200px"></telerik:GridDateTimeColumn>

Thanks,
Jayesh Goyani

[Shinu]

Hello Vincent,

Try the following code snippet to set width of a datecolumn in ItemCreated event.
C#:

protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
{
 if (e.Item is GridFilteringItem)
  {
    GridFilteringItem item = (GridFilteringItem)e.Item;
    RadDatePicker pkr = (RadDatePicker)item["ColUniqueName"].Controls[0];
    pkr.Width = Unit.Pixel(180);
  }
}

Thanks,
Shinu

[Sompop]

Hi Shinu,

The code sounds right. However, like I mentioned that the columns are autogenerated so there is no columnuniquename that I can put. Is there a way to dynamically assign columnuniquename for autogenerated columns when created? There are twelve columns at the moment.

Also, as you can see in the screenshot, I need only date part show in the column, how can I do dataformatstring with auto generated columns?

Thank you,

Sompop

[Sompop]

Hi Shinu,

I finally got it to work the way I want. There are two sections that I have to put. The dateformatstring has to be implemented in ItemDataBound and the width of the column need to be implemented in ItemCreated with FilterControl=True

Thank you,

Sompop

protected

void rgExcelQuoteItems_ItemDataBound(object sender, GridItemEventArgs e)

{

  if (e.Item is GridDataItem)

  {

    GridDataItem item = (GridDataItem)e.Item;

    int intNextCalColumnIndex = int.Parse(hfNextCalColumnIndex.Value);

    string nextCalUniqueName = rgExcelQuoteItems.MasterTableView.AutoGeneratedColumns[intNextCalColumnIndex].UniqueName;

    string strDueDate = item[nextCalUniqueName].Text.ToString().Substring(0, item[nextCalUniqueName].Text.ToString().IndexOf(" "));

    DateTime dtDueDate;

    if (DateTime.TryParse(strDueDate, out dtDueDate))

      item[nextCalUniqueName].Text = String.Format(hfDateFormatString.Value, dtDueDate);

  }

}

protected void rgExcelQuoteItems_ItemCreated(object sender, GridItemEventArgs e)

{

  if (e.Item is GridFilteringItem)

  {

    GridFilteringItem item = (GridFilteringItem)e.Item;

    int intNextCalColumnIndex = int.Parse(hfNextCalColumnIndex.Value);

    string nextCalUniqueName = rgExcelQuoteItems.MasterTableView.AutoGeneratedColumns[intNextCalColumnIndex].UniqueName;

    RadDatePicker pkr = (RadDatePicker)item[nextCalUniqueName].Controls[0];

    pkr.Width = Unit.Pixel(80);

  }

}