This is a migrated thread and some comments may be shown as answers.

Column Reorder Width does not move in FireFox

8 Answers 142 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Andrew
Top achievements
Rank 1
Andrew asked on 04 Feb 2009, 06:04 PM
Hi,

Using RadGrid 2008 Q3, DOT NET 3.5 FireFox browser.

  1. I don't yet know whether this problem occurs in other browsers, but with FireFox, if I have 2 columns of different widths, and AllowColumnsReorder=True, ReorderColumnsOnClient=True, ColumnReorderMethod=Reorder, then the columns move, but the widths don't!  What I mean is the column titles and content move around, but the width stays where it was, so now the narrow column is wide and vice versa.
  2. Whilst on the subject, there is also a further "cosmetic" problem. Dragging a column to the left gives the intuitive result, the orange "drop markers" appear to the left of the column which is going to be shifted right. But dragging to the right is less intuitive, the orange Drop Markers appear on the left of the column that is going to move left - I woudl have expected them to appear on the right!
  3. Further Using the HeaderContextMenu with a lot of columns (more than 10 or so) is incredibly slow (I presume javascript is building the column list), given that I am told that Safari javascript is even slower it is becoming unuseable in practice - though it is such a great feature, this is a shame. I am trying to build an alternative using the WindowManager with a pop-up an editor, but of course that is just adding to my development effort.

8 Answers, 1 is accepted

Sort by
0
Georgi Krustev
Telerik team
answered on 09 Feb 2009, 05:20 PM
Hi Andrew,

Straight onto your questions:

1. Unfortunately, I could not reproduce the problem described so far on IE and FF. In my attempt to replicate the problem I create a test application, which is attached to this forum thread. Please review it and tell me if I am missing something.

2. Thank you for pointing this behavior to us. I will forward your suggestion to my unit manager and developers in order to review it.

3. The performance is really, depending of the ability of the browser JS interpretation. We will consider your opinion and will look forward for more optimization of its work.

Greetings,
Georgi Krustev
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Andrew
Top achievements
Rank 1
answered on 10 Feb 2009, 02:15 PM
Hi,

Thanks for responding.

I note in your code you are setting the ItemStyle.Width. If you set the HeaderStyle.Width (only) the behavior appears - I had adopted this approach (of Setting Only HeaderItem) based on other code samples from your site. So of course the answer would appear to be "use the ItemStyle.Width"

But in fact that does not work in my case, I am building my grid in code (in the Init Event), in this case setting ItemStyle.Width does not seem to solve it.

I have made a (much) simplified version of the code which demonstrates the problem - presumably there is something I am setting which introduces the problem.

  1. When the Unit Price column is moved to the left (to come before Product Name), the UnitPrice column gets the width of the Product Name and v.v. You will also note that the HorizontalAlignment also seems to be left behind (my numbers now align on the right and the Product Name aligns to the left.
  2. You might also note the behavior of the FilterControl, particularly for the Date column there is a minimum column width imposed by the filter controls (the controls will not shrink below a certain width), this makes for either over large columns or nasty displays in the filter area.
  3. Could you also look at what happens when the column widths are modified (by drag and drop), there are some very strange effects (just try to make the Unit Price column narrower/wider.
  4. Also on my browser, the column header (widths) do not quite align with the Items. To see this, open the browser so that it is quite wide, when it loads the page (in my case I have a screen that is 2500 pxels wide so i can have a very wide browser window). Interestingly if I start with the browser window more reasonably sized, load the page and then make the browser larger it all behaves a lot better.
Please see below.

.aspx


<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="TestReportColumns.aspx.vb" Inherits="ZedonkReports.TestReportColumns" %> 


<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 


 


<!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 runat="server"


    <title>TestReportColumns</title> 


</head> 


<body> 


    <form id="form1" runat="server"


    <div> 


        <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server"


        </telerik:RadStyleSheetManager> 


         


        <telerik:RadScriptManager ID="RadScriptManager1" runat="server"


        </telerik:RadScriptManager> 


         


        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"


        </telerik:RadAjaxManager> 


         


    <asp:PlaceHolder ID="ReportPlaceHolder" runat="server"></asp:PlaceHolder> 


    </div> 


    </form> 


</body> 


</html> 


 

.vb
Imports System.Data 
Imports System.Data.OleDb 
Imports System.Data.SqlClient 
Imports Telerik.Web.UI 
 
Partial Public Class TestReportColumns 
    Inherits System.Web.UI.Page 
 
    ' Create a module level instance of a Rad Grid to be added to the page, have to do this so we can wire up event handlers 
    Dim WithEvents theGrid As New RadGrid 
 
    Private Sub TestReportColumns_Init(ByVal sender As ObjectByVal e As System.EventArgs) Handles Me.Init 
        SetupGridOnPage() 
    End Sub 
 
    Protected Sub Page_Load(ByVal sender As ObjectByVal e As System.EventArgs) Handles Me.Load 
        RadAjaxManager1.AjaxSettings.AddAjaxSetting(theGrid, theGrid) 
    End Sub 
 
    Protected Sub SetupGridOnPage() 
 
        AddHandler theGrid.NeedDataSource, AddressOf theGrid_NeedDataSource 
        With theGrid 
            .ID = "theGrid" 
            .EnableViewState = True 
            .Width = Unit.Percentage(99) 
            .Height = Unit.Pixel(1000) 
            .PageSize = 20 
            .BorderStyle = BorderStyle.None 
            .GridLines = GridLines.None 
            .ShowStatusBar = True 
            .EnableHeaderContextMenu = True 
            .ShowGroupPanel = True 
            .AllowSorting = True 
            .PagerStyle.Mode = GridPagerMode.NextPrevNumericAndAdvanced 
            .PagerStyle.Position = GridPagerPosition.Top 
            .AllowPaging = True 
            .AllowAutomaticDeletes = False 
            .AllowAutomaticInserts = False 
            .AllowAutomaticUpdates = False 
            .AllowMultiRowEdit = False 
            .AllowMultiRowSelection = True 
            .AllowFilteringByColumn = True 
            .Skin = "Default" 
            .EnableLinqExpressions = False 
            .GroupingSettings.CaseSensitive = False 
            .MasterTableView.AutoGenerateColumns = False 
            .MasterTableView.EnableColumnsViewState = True 
            .MasterTableView.GridLines = GridLines.None 
            .MasterTableView.Width = Unit.Percentage(100) 
            .MasterTableView.AllowMultiColumnSorting = True 
            .MasterTableView.CommandItemDisplay = GridCommandItemDisplay.Top 
            .MasterTableView.ShowFooter = True 
            .MasterTableView.ShowGroupFooter = True 
 
            .ClientSettings.AllowColumnsReorder = True 
            .ClientSettings.ReorderColumnsOnClient = True 
            .ClientSettings.ColumnsReorderMethod = GridClientSettings.GridColumnsReorderMethod.Reorder 
            .ClientSettings.AllowColumnHide = True 
            .ClientSettings.AllowDragToGroup = True 
            .ClientSettings.Scrolling.AllowScroll = True 
            .ClientSettings.Scrolling.UseStaticHeaders = True 
            .ClientSettings.Resizing.AllowColumnResize = True 
            .ClientSettings.Resizing.ClipCellContentOnResize = True 
            .ClientSettings.Resizing.EnableRealTimeResize = True 
            .ClientSettings.Resizing.ResizeGridOnColumnResize = False 
 
            ' Setup the report columns 
            Dim gbc As GridBoundColumn 
            Dim gnc As GridNumericColumn 
            Dim gcbc As GridCheckBoxColumn 
            Dim gdtc As GridDateTimeColumn 
 
            'Add ProductID 
            gbc = New GridBoundColumn 
            gbc.FilterControlWidth = Unit.Percentage(94) 
            gbc.HeaderText = "Product ID" 
            gbc.DataField = "ProductID" 
            gbc.UniqueName = "ProductID" 
            gbc.HeaderStyle.Width = Unit.Pixel(100) 
            gbc.ItemStyle.Width = Unit.Pixel(100) 
            gbc.FooterStyle.Width = Unit.Pixel(100) 
            gbc.ItemStyle.HorizontalAlign = HorizontalAlign.Left 
            gbc.FooterStyle.HorizontalAlign = HorizontalAlign.Left 
            gbc.ItemStyle.VerticalAlign = VerticalAlign.Top 
            gbc.FooterStyle.VerticalAlign = VerticalAlign.Top 
            gbc.DataFormatString = Nothing 
            gbc.FooterAggregateFormatString = Nothing 
            gbc.Aggregate = Nothing 
            gbc.Resizable = True 
            gbc.AutoPostBackOnFilter = True 
            .MasterTableView.Columns.Add(gbc) 
 
            'Add ProductName 
            gbc = New GridBoundColumn 
            gbc.FilterControlWidth = Unit.Percentage(94) 
            gbc.HeaderText = "Product Name" 
            gbc.DataField = "ProductName" 
            gbc.UniqueName = "ProductName" 
            gbc.HeaderStyle.Width = Unit.Pixel(500) 
            gbc.ItemStyle.Width = Unit.Pixel(500) 
            gbc.FooterStyle.Width = Unit.Pixel(500) 
            gbc.ItemStyle.HorizontalAlign = HorizontalAlign.Left 
            gbc.FooterStyle.HorizontalAlign = HorizontalAlign.Left 
            gbc.ItemStyle.VerticalAlign = VerticalAlign.Top 
            gbc.FooterStyle.VerticalAlign = VerticalAlign.Top 
            gbc.DataFormatString = Nothing 
            gbc.FooterAggregateFormatString = Nothing 
            gbc.Aggregate = Nothing 
            gbc.Resizable = True 
            gbc.AutoPostBackOnFilter = True 
            .MasterTableView.Columns.Add(gbc) 
 
 
            'Add UnitPrice 
            gnc = New GridNumericColumn 
            gnc.FilterControlWidth = Unit.Percentage(94) 
            gnc.HeaderText = "Unit Price" 
            gnc.DataField = "UnitPrice" 
            gnc.UniqueName = "UnitPrice" 
            gnc.HeaderStyle.Width = Unit.Pixel(100) 
            gnc.ItemStyle.Width = Unit.Pixel(100) 
            gnc.FooterStyle.Width = Unit.Pixel(100) 
            gnc.ItemStyle.HorizontalAlign = HorizontalAlign.Right 
            gnc.FooterStyle.HorizontalAlign = HorizontalAlign.Right 
            gnc.ItemStyle.VerticalAlign = VerticalAlign.Top 
            gnc.FooterStyle.VerticalAlign = VerticalAlign.Top 
            gnc.DataFormatString = "{0:N2}" 
            gnc.FooterAggregateFormatString = "{0:N2}" 
            gnc.Aggregate = GridAggregateFunction.Sum 
            gnc.Resizable = True 
            gnc.AutoPostBackOnFilter = True 
            .MasterTableView.Columns.Add(gnc) 
 
 
            'Add FromDate 
            gdtc = New GridDateTimeColumn 
            gdtc.FilterControlWidth = Unit.Percentage(94) 
            gdtc.HeaderText = "From Date" 
            gdtc.DataField = "FromDate" 
            gdtc.UniqueName = "FromDate" 
            gdtc.HeaderStyle.Width = Unit.Pixel(100) 
            gdtc.ItemStyle.Width = Unit.Pixel(100) 
            gdtc.FooterStyle.Width = Unit.Pixel(100) 
            gdtc.ItemStyle.HorizontalAlign = HorizontalAlign.Left 
            gdtc.FooterStyle.HorizontalAlign = HorizontalAlign.Left 
            gdtc.ItemStyle.VerticalAlign = VerticalAlign.Top 
            gdtc.FooterStyle.VerticalAlign = VerticalAlign.Top 
            gdtc.DataFormatString = "{0:d}" 
            gdtc.FooterAggregateFormatString = "{0:d}" 
            gdtc.Aggregate = Nothing 
            gdtc.Resizable = True 
            gdtc.AutoPostBackOnFilter = False               ' Allows use of the DatePicker (if true then no chance to set filter function) 
            .MasterTableView.Columns.Add(gdtc) 
 
 
            'Add Available 
            gcbc = New GridCheckBoxColumn 
            gcbc.FilterControlWidth = Unit.Percentage(94) 
            gcbc.HeaderText = "Available" 
            gcbc.DataField = "Available" 
            gcbc.UniqueName = "Available" 
            gcbc.HeaderStyle.Width = Unit.Pixel(100) 
            gcbc.ItemStyle.Width = Unit.Pixel(100) 
            gcbc.FooterStyle.Width = Unit.Pixel(100) 
            gcbc.ItemStyle.HorizontalAlign = HorizontalAlign.Left 
            gcbc.FooterStyle.HorizontalAlign = HorizontalAlign.Left 
            gcbc.ItemStyle.VerticalAlign = VerticalAlign.Top 
            gcbc.FooterStyle.VerticalAlign = VerticalAlign.Top 
            gcbc.AutoPostBackOnFilter = True 
            gcbc.Resizable = True 
            .MasterTableView.Columns.Add(gcbc) 
 
        End With 
        ' Get the grid onto the page by adding it to the palceholder. 
        ReportPlaceHolder.Controls.Add(theGrid) 
    End Sub 
 
    Protected Sub theGrid_NeedDataSource(ByVal source As ObjectByVal e As Telerik.Web.UI.GridNeedDataSourceEventArgs) Handles theGrid.NeedDataSource 
        Dim DT As DataTable = New DataTable("Products"
        DT.Columns.Add("ProductID", Type.GetType("System.String")) 
        DT.Columns.Add("ProductName", Type.GetType("System.String")) 
        DT.Columns.Add("UnitPrice", Type.GetType("System.Double")) 
        DT.Columns.Add("FromDate", Type.GetType("System.DateTime")) 
        DT.Columns.Add("Available", Type.GetType("System.Boolean")) 
 
        Dim DR As DataRow 
        Dim I As Integer 
        For I = 1 To 9 
            DR = DT.NewRow() 
            DR("ProductID") = "PID-" & CStr(I) 
            DR("ProductName") = "Name of " & CStr(I) 
            DR("UnitPrice") = Rnd() 
            DR("FromDate") = DateSerial(2009, 1, 1) 
            DR("Available") = (I > 4) 
            DT.Rows.Add(DR) 
        Next 
        theGrid.DataSource = DT 
    End Sub 
 
End Class 
0
Georgi Krustev
Telerik team
answered on 11 Feb 2009, 05:42 PM
Hi Andrew,

Here is a quote of my answer from the support thread opened on this matter:

Hello Sebastian,

Thank you for contacting us.

To accomplish your task you need to set header text of the columns when Page_Load event is raised. Thus the grid will be able to render the headers properly. OnColumnCreating event is fired only when  custom columns (which inherit from built-in columns) are created. So this is expected behavior. Please refer to this link for more information.

Here is a code snippet showing how to utilize the suggested approach:

    protected override void OnLoad(EventArgs e) 
    { 
        if (!IsPostBack) 
        { 
            CreateDetailTable(); 
            foreach (GridTableView table in RadGrid1.MasterTableView.DetailTables) 
            { 
                if (table.Name == "ChildsTable"
                { 
                    table.Columns[0].HeaderText = "CID Header"
                    table.Columns[1].HeaderText = "ChildName Header"
                } 
            } 
        } 
 
        base.OnLoad(e); 
    } 

Best regards,
Georgi Krustev
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Andrew
Top achievements
Rank 1
answered on 12 Feb 2009, 06:23 PM
Hi Georgi,

Thanks for your response. However i am now rather confused:

  1. I have followed the advice in the documentation to build my grid dynamically (no delcarative instance on the page)  entirely in the Page_Init event.

    Are you now saying that this approach is not a good one?

    Are there other important things which don't happen unless the grid is built later?

    Should you be considering a change to your documentation to reflect this new information?
  2. It is a bit awkward to split the grid building code into two (or more?) places.
  3. The suggestion does not really make sense, assigning the header text surely won't be triggering an event such as OnColumnCreating? The column already exists!
  4. I have tried making the change, and it does not seem to work.

    I tried it by simply assigning the header text to each column in the Page Load, that did not seem to do anything.

    I then modifeid my example code so that the whole grid runs from the Page_Load event. (adding the columns to the grid before assigning properties and adding the gird to the palce holder first). This didn't fix my problem.

    This is now what my code looks like:
Imports System.Data 
Imports System.Data.OleDb 
Imports System.Data.SqlClient 
Imports Telerik.Web.UI 
 
Partial Public Class TestReportColumns 
    Inherits System.Web.UI.Page 
 
    ' Create a module level instance of a Rad Grid to be added to the page, have to do this so we can wire up event handlers 
    Dim WithEvents theGrid As New RadGrid 
 
    Protected Sub Page_Load(ByVal sender As ObjectByVal e As System.EventArgs) Handles Me.Load 
 
        ' Get the grid onto the page by adding it to the placeholder. 
        ReportPlaceHolder.Controls.Add(theGrid) 
 
        If Not IsPostBack Then 
            SetupGridOnPageLoad() 
        End If 
 
        RadAjaxManager1.AjaxSettings.AddAjaxSetting(theGrid, theGrid) 
    End Sub 
 
    Protected Sub SetupGridOnPageLoad() 
 
        AddHandler theGrid.NeedDataSource, AddressOf theGrid_NeedDataSource 
        With theGrid 
            .ID = "theGrid" 
            .Width = Unit.Percentage(99) 
            .Height = Unit.Pixel(500) 
            .PageSize = 5 
            .BorderStyle = BorderStyle.None 
            .GridLines = GridLines.None 
            .ShowStatusBar = True 
            .EnableHeaderContextMenu = True 
            .ShowGroupPanel = True 
            .AllowSorting = True 
            .PagerStyle.Mode = GridPagerMode.NextPrevNumericAndAdvanced 
            .PagerStyle.Position = GridPagerPosition.Top 
            .AllowPaging = True 
            .AllowAutomaticDeletes = False 
            .AllowAutomaticInserts = False 
            .AllowAutomaticUpdates = False 
            .AllowMultiRowEdit = False 
            .AllowMultiRowSelection = True 
            .AllowFilteringByColumn = True 
            .Skin = "Default" 
            .EnableLinqExpressions = False 
            .GroupingSettings.CaseSensitive = False 
            .MasterTableView.AutoGenerateColumns = False 
            .MasterTableView.EnableColumnsViewState = True 
            .MasterTableView.GridLines = GridLines.None 
            .MasterTableView.Width = Unit.Percentage(100) 
            .MasterTableView.AllowMultiColumnSorting = True 
            .MasterTableView.CommandItemDisplay = GridCommandItemDisplay.Top 
            .MasterTableView.ShowFooter = True 
            .MasterTableView.ShowGroupFooter = True 
 
            .ClientSettings.AllowColumnsReorder = True 
            .ClientSettings.ReorderColumnsOnClient = True 
            .ClientSettings.ColumnsReorderMethod = GridClientSettings.GridColumnsReorderMethod.Reorder 
            .ClientSettings.AllowColumnHide = True 
            .ClientSettings.AllowDragToGroup = True 
            .ClientSettings.Scrolling.AllowScroll = True 
            .ClientSettings.Scrolling.UseStaticHeaders = True 
            .ClientSettings.Resizing.AllowColumnResize = True 
            .ClientSettings.Resizing.ClipCellContentOnResize = True 
            .ClientSettings.Resizing.EnableRealTimeResize = True 
            .ClientSettings.Resizing.ResizeGridOnColumnResize = False 
 
            ' Setup the report columns 
            Dim gbc As GridBoundColumn 
            Dim gnc As GridNumericColumn 
            Dim gcbc As GridCheckBoxColumn 
            Dim gdtc As GridDateTimeColumn 
 
            'Add ProductID 
            gbc = New GridBoundColumn 
            .MasterTableView.Columns.Add(gbc) 
            gbc.FilterControlWidth = Unit.Percentage(94) 
            gbc.HeaderText = "Product ID" 
            gbc.DataField = "ProductID" 
            gbc.UniqueName = "ProductID" 
            gbc.HeaderStyle.Width = Unit.Pixel(100) 
            gbc.ItemStyle.Width = Unit.Pixel(100) 
            gbc.FooterStyle.Width = Unit.Pixel(100) 
            gbc.ItemStyle.HorizontalAlign = HorizontalAlign.Left 
            gbc.FooterStyle.HorizontalAlign = HorizontalAlign.Left 
            gbc.ItemStyle.VerticalAlign = VerticalAlign.Top 
            gbc.FooterStyle.VerticalAlign = VerticalAlign.Top 
            gbc.DataFormatString = Nothing 
            gbc.FooterAggregateFormatString = Nothing 
            gbc.Aggregate = Nothing 
            gbc.Resizable = True 
            gbc.AutoPostBackOnFilter = True 
 
            'Add ProductName 
            gbc = New GridBoundColumn 
            .MasterTableView.Columns.Add(gbc) 
            gbc.FilterControlWidth = Unit.Percentage(94) 
            gbc.HeaderText = "Product Name" 
            gbc.DataField = "ProductName" 
            gbc.UniqueName = "ProductName" 
            gbc.HeaderStyle.Width = Unit.Pixel(500) 
            gbc.ItemStyle.Width = Unit.Pixel(500) 
            gbc.FooterStyle.Width = Unit.Pixel(500) 
            gbc.ItemStyle.HorizontalAlign = HorizontalAlign.Left 
            gbc.FooterStyle.HorizontalAlign = HorizontalAlign.Left 
            gbc.ItemStyle.VerticalAlign = VerticalAlign.Top 
            gbc.FooterStyle.VerticalAlign = VerticalAlign.Top 
            gbc.DataFormatString = Nothing 
            gbc.FooterAggregateFormatString = Nothing 
            gbc.Aggregate = Nothing 
            gbc.Resizable = True 
            gbc.AutoPostBackOnFilter = True 
 
 
            'Add UnitPrice 
            gnc = New GridNumericColumn 
            .MasterTableView.Columns.Add(gnc) 
            gnc.FilterControlWidth = Unit.Percentage(94) 
            gnc.HeaderText = "Unit Price" 
            gnc.DataField = "UnitPrice" 
            gnc.UniqueName = "UnitPrice" 
            gnc.HeaderStyle.Width = Unit.Pixel(100) 
            gnc.ItemStyle.Width = Unit.Pixel(100) 
            gnc.FooterStyle.Width = Unit.Pixel(100) 
            gnc.ItemStyle.HorizontalAlign = HorizontalAlign.Right 
            gnc.FooterStyle.HorizontalAlign = HorizontalAlign.Right 
            gnc.ItemStyle.VerticalAlign = VerticalAlign.Top 
            gnc.FooterStyle.VerticalAlign = VerticalAlign.Top 
            gnc.DataFormatString = "{0:N2}" 
            gnc.FooterAggregateFormatString = "{0:N2}" 
            gnc.Aggregate = GridAggregateFunction.Sum 
            gnc.Resizable = True 
            gnc.AutoPostBackOnFilter = True 
 
 
            'Add FromDate 
            gdtc = New GridDateTimeColumn 
            .MasterTableView.Columns.Add(gdtc) 
            gdtc.FilterControlWidth = Unit.Percentage(94) 
            gdtc.HeaderText = "From Date" 
            gdtc.DataField = "FromDate" 
            gdtc.UniqueName = "FromDate" 
            gdtc.HeaderStyle.Width = Unit.Pixel(100) 
            gdtc.ItemStyle.Width = Unit.Pixel(100) 
            gdtc.FooterStyle.Width = Unit.Pixel(100) 
            gdtc.ItemStyle.HorizontalAlign = HorizontalAlign.Left 
            gdtc.FooterStyle.HorizontalAlign = HorizontalAlign.Left 
            gdtc.ItemStyle.VerticalAlign = VerticalAlign.Top 
            gdtc.FooterStyle.VerticalAlign = VerticalAlign.Top 
            gdtc.DataFormatString = "{0:d}" 
            gdtc.FooterAggregateFormatString = "{0:d}" 
            gdtc.Aggregate = Nothing 
            gdtc.Resizable = True 
            gdtc.AutoPostBackOnFilter = False               ' Allows use of the DatePicker (if true then no chance to set filter function) 
 
 
            'Add Available 
            gcbc = New GridCheckBoxColumn 
            .MasterTableView.Columns.Add(gcbc) 
            gcbc.FilterControlWidth = Unit.Percentage(94) 
            gcbc.HeaderText = "Available" 
            gcbc.DataField = "Available" 
            gcbc.UniqueName = "Available" 
            gcbc.HeaderStyle.Width = Unit.Pixel(100) 
            gcbc.ItemStyle.Width = Unit.Pixel(100) 
            gcbc.FooterStyle.Width = Unit.Pixel(100) 
            gcbc.ItemStyle.HorizontalAlign = HorizontalAlign.Left 
            gcbc.FooterStyle.HorizontalAlign = HorizontalAlign.Left 
            gcbc.ItemStyle.VerticalAlign = VerticalAlign.Top 
            gcbc.FooterStyle.VerticalAlign = VerticalAlign.Top 
            gcbc.AutoPostBackOnFilter = True 
            gcbc.Resizable = True 
 
        End With 
    End Sub 
    Protected Sub theGrid_NeedDataSource(ByVal source As ObjectByVal e As Telerik.Web.UI.GridNeedDataSourceEventArgs) Handles theGrid.NeedDataSource 
        Dim DT As DataTable = New DataTable("Products"
        DT.Columns.Add("ProductID", Type.GetType("System.String")) 
        DT.Columns.Add("ProductName", Type.GetType("System.String")) 
        DT.Columns.Add("UnitPrice", Type.GetType("System.Double")) 
        DT.Columns.Add("FromDate", Type.GetType("System.DateTime")) 
        DT.Columns.Add("Available", Type.GetType("System.Boolean")) 
 
        Dim DR As DataRow 
        Dim I As Integer 
        For I = 1 To 9 
            DR = DT.NewRow() 
            DR("ProductID") = "PID-" & CStr(I) 
            DR("ProductName") = "Name of " & CStr(I) 
            DR("UnitPrice") = Rnd() 
            DR("FromDate") = DateSerial(2009, 1, 1) 
            DR("Available") = (I > 4) 
            DT.Rows.Add(DR) 
        Next 
        theGrid.DataSource = DT 
    End Sub 
End Class 



0
Andrew
Top achievements
Rank 1
answered on 12 Feb 2009, 11:27 PM
As a further issue about this.

I had been hoping that since my grid was being entirely built in code, it woudl be possible (later) for me to avoid the ViewState which is getting rather large.

The implicaiton of having to do things in the Page_Load is that I won't be able to do so, and will always be stuck with a significant viewstate.

Andrew
0
Accepted
Georgi Krustev
Telerik team
answered on 13 Feb 2009, 04:14 PM
Hi Andrew,

I'm sorry for the misunderstanding. Please do not take a notice of my last post - it was send by mistake and I apologize for the confusion.

Your code snippet is correct. As you noted, when you create the grid from scratch in the code-behind you should create it when OnInit event is raised.

The proper applying of the styles when resizing and column reorder is allowed are not supported in the present version of the grid. No changes will be persisted in the styles of the columns when they are reordered or swapped. This feature will be implemented in one of our next releases of RadGrid for ASP.NET AJAX.

If you want to apply width to the column the right place to set it is using HeaderStyle.Width. The width of the item will inherit it from header style.

The filter input will hide when you decrease the size of the column below the width of the input. The filter control is rendered as a table and when the width of the column is smaller than the filter's width, this table will be hidden. There is no way the pop up image of the RadDatePicker to fall down next to the filter expression icon. The image is part of table table (RadDatePicker), which wraps the textbox and the image.

Kind regards,
Georgi Krustev
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.
0
Andrew
Top achievements
Rank 1
answered on 13 Feb 2009, 05:27 PM
Hi Georgi,

Thanks for the reply. I will be waiting for the fix to this issue.

I have found one workaround, after swapping the column, a refresh of the display seems to sort out the column widths. This suggests to me that I could try arranging for a postback (non-client) column move, but that slows things down for the user.

Thanks also for the confirmation that only the column heading width need be set.

Regarding the filter item when the column width is small.

  1. I note that on Google Chrome the filter control (when the column is a date column) overflows into the adjacent column, the text box does not grow any smaller - this does not happen with FireFox or with Opera.
  2. As a general solution, would it be possible to arrange that the filter control occupied 2 rows when necessary?

Andrew
0
Georgi Krustev
Telerik team
answered on 16 Feb 2009, 10:40 AM
Hi Andrew,

I am happy that you were able to find a suitable workaround for you.

To attain the functionality you are after, you can try to get the TableCell which contains the RadDatePicker as a filter input and set RowSpan = 2 for it. To accomplish this task, you need to wire the OnItemCreated event and check whether the passed item is GridFilteringItem.

Here is a code snippet showing how to achieve this:
    protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e) 
    { 
        if (e.Item is GridFilteringItem)  
        { 
            TableCell datacell = (e.Item as GridFilteringItem)["DateColumn"]; 
            datacell.RowSpan = 2; 
        } 
    } 

Best regards,
Georgi Krustev
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.
Tags
Grid
Asked by
Andrew
Top achievements
Rank 1
Answers by
Georgi Krustev
Telerik team
Andrew
Top achievements
Rank 1
Share this question
or