column width is changing

[Dan Rowe]

I have a grid that resizes the column width after the page is rendered so there is a gray area (blank space) to the right of the last column.

It is wrapping the columns data. 

I would like the column width to fill in the grid width. its fine if it still wraps but I would like to get rid of the gray area. I do not see any column width settings?

[Pavlina]

Hello Dan,

I suggest that you review the online example below and see what is the difference in your case:
http://demos.telerik.com/aspnet-ajax/grid/examples/client/resizing/defaultcs.aspx

Greetings,
Pavlina
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.

[Dan Rowe]

  I am supposedly using the same skin (Outlook2007) on both grids in my application but they appear to be different. In particular they have different headers. THe one with a problem has a larger Gray header the other appears to be default and matches your examples. The one with the Gray header is not displaying correctly when the scrolling is on. 
I do not see any settings  that are accessible in the code behind for this grid and the grid is being cast to a placeholder so it is defined in code.

 I have attached a GIF so you can see what I am talking about.

I would have no problem letting both grids appear the same style if that would correct it But I do not see how to set this.
Also I have compared my css files from the radgrids skin folder and they are Identical.

[Pavlina]

Hi Dan,

We haven't experienced such issue before. Can you provide a sample project where this behavior can be observed? We will debug it locally and advise you further.

Regards,
Pavlina
the Telerik team

[Dan Rowe]

hi

What do you mean by a test project? 
The Project it is in is decalring all the grid settings in code including the binding.
Creating a test project would to duplicate the code would be pretty extensive.
I did attach a image file so you could see and I would be happy to allow access to the site if that would help.
if you need to see the code what portion of the grids code would you need to see and I can copy that for you.

[Pavlina]

Hello Dan,

If you could send us your page declaration (aspx file) this would be of help to get to the source of the issue and find a resolution.

All the best,
Pavlina
the Telerik team

[Dan Rowe]

there is no aspx page is this what your looking for? it was the ascx
but I cant upload the file even if I change the extension would you like it emailed? if so whats the address?

[Pavlina]

Hello Dan,

I need your grid declaration with the related code behind. Thus we will be able to gather more details about your scenario, so that we can see what happens exactly and explain.

Sincerely yours,
Pavlina
the Telerik team

[Dan Rowe]

Protected Sub CreateEmployeeGrid()
           Dim EmployeesGrid As RadGrid = New RadGrid

           AddHandler EmployeesGrid.ItemCommand, AddressOf EmployeesGrid_ItemCommand
           AddHandler EmployeesGrid.ItemDataBound, AddressOf EmployeesGrid_Itemdatabound

           ' Need to be sure we have a DataSourceId before running so grid is not empty
           If EmployeesGrid.DataSourceID = "" Or Session("EmployeesCheckedBox") = 1 Or Session("EmployeesCheckedBox") = 2 Then
               EmployeesGrid.DataSourceID = "EmployeesInactiveDataSource"
               If Session("EmployeesCheckedBox") = 2 Then
                   Session("GetActiveEmployees") = False
               Else
                   Session("GetActiveEmployees") = True
               End If

           Else
               EmployeesGrid.DataSourceID = "EmployeesDataSource"
           End If

               EmployeesGrid.ID = "EmployeesGrid"

               EmployeesGrid.Width = Unit.Pixel(265)
               EmployeesGrid.PageSize = 5
               EmployeesGrid.AutoGenerateColumns = False
               EmployeesGrid.AllowPaging = False
               EmployeesGrid.ClientSettings.Scrolling.AllowScroll = True
               EmployeesGrid.ClientSettings.Scrolling.ScrollHeight = 350
               EmployeesGrid.ClientSettings.Scrolling.UseStaticHeaders = True
               EmployeesGrid.ClientSettings.Scrolling.SaveScrollPosition = True

               Dim buttonColumn2 As GridButtonColumn = New GridButtonColumn
               Dim buttonColumn3 As GridButtonColumn = New GridButtonColumn
               Dim employeeNameLink As GridButtonColumn = New GridButtonColumn

               Dim boundColumn1 As GridBoundColumn = New GridBoundColumn
               Dim boundColumn2 As GridBoundColumn = New GridBoundColumn
               Dim boundColumn3 As GridBoundColumn = New GridBoundColumn
               Dim boundColumn4 As GridBoundColumn = New GridBoundColumn
               Dim boundColumn5 As GridBoundColumn = New GridBoundColumn
               Dim boundColumn6 As GridBoundColumn = New GridBoundColumn
               Dim boundColumn7 As GridBoundColumn = New GridBoundColumn
               Dim boundColumn8 As GridBoundColumn = New GridBoundColumn
               Dim boundColumn9 As GridBoundColumn = New GridBoundColumn
               Dim boundColumn10 As GridBoundColumn = New GridBoundColumn
               Dim boundColumn11 As GridBoundColumn = New GridBoundColumn

               'add columns (order determines order of grid columns display)
               EmployeesGrid.MasterTableView.Columns.Add(buttonColumn2)
               EmployeesGrid.MasterTableView.Columns.Add(buttonColumn3)

               EmployeesGrid.MasterTableView.Columns.Add(boundColumn10)
               EmployeesGrid.MasterTableView.Columns.Add(boundColumn1)
               EmployeesGrid.MasterTableView.Columns.Add(boundColumn5)
               EmployeesGrid.MasterTableView.Columns.Add(boundColumn11)
               EmployeesGrid.MasterTableView.Columns.Add(boundColumn2)
               EmployeesGrid.MasterTableView.Columns.Add(boundColumn3)
               EmployeesGrid.MasterTableView.Columns.Add(boundColumn4)

               EmployeesGrid.MasterTableView.Columns.Add(boundColumn6)
               EmployeesGrid.MasterTableView.Columns.Add(boundColumn7)
               EmployeesGrid.MasterTableView.Columns.Add(boundColumn8)
               EmployeesGrid.MasterTableView.Columns.Add(boundColumn9)

               EmployeesGrid.MasterTableView.Columns.Add(employeeNameLink)

               'assign column properties
               buttonColumn2.ButtonType = GridButtonColumnType.ImageButton
               buttonColumn2.ImageUrl = "~/DesktopModules/TTSTimeClock_Selection/RadControls/Grid/Skins/Outlook2007/Edit.gif"
               buttonColumn2.HeaderText = "E"
               buttonColumn2.Text = "Edit"
               buttonColumn2.CommandName = "EditEmployee"
               buttonColumn2.UniqueName = "editColumn"

               buttonColumn3.ButtonType = GridButtonColumnType.ImageButton
               buttonColumn3.ImageUrl = "~/DesktopModules/TTSTimeClock_Selection/RadControls/Grid/Skins/Outlook2007/Delete.gif"
               buttonColumn3.HeaderText = "D"
               buttonColumn3.Text = "Delete"
               buttonColumn3.CommandName = "DeleteEmployee"
               buttonColumn3.UniqueName = "deleteColumn"
               buttonColumn3.ConfirmText = "Delete selected employee?"

               employeeNameLink.ButtonType = GridButtonColumnType.LinkButton
               employeeNameLink.HeaderText = "Name"
               employeeNameLink.Text = ""
               employeeNameLink.CommandName = "ViewEmployee"
               employeeNameLink.UniqueName = "EmployeeName"

               boundColumn1.DataField = "EmployeeTypeID"
               boundColumn1.HeaderText = "ID"
               boundColumn1.UniqueName = "EmployeeIDColumn"

               boundColumn2.DataField = "PayType"
               boundColumn2.HeaderText = "Pay Type"
               boundColumn2.Visible = False

               boundColumn3.DataField = "Department"
               boundColumn3.HeaderText = "Dept #"
               boundColumn3.Visible = False
               boundColumn4.DataField = "HireDate"

               boundColumn4.DataFormatString = ("{0:M/dd/yyyy}")
               boundColumn4.HeaderText = "Hire Date"
               boundColumn4.Visible = False

               boundColumn5.DataField = "EmployeeLastName"
               boundColumn5.HeaderText = "Last Name"
               boundColumn5.Visible = False


               'hidden fields
               boundColumn6.DataField = "EmployeeFirstName"
               boundColumn6.UniqueName = "EmployeeFirstName"
               boundColumn6.Visible = False

               boundColumn7.DataField = "EmployeeLastName"
               boundColumn7.UniqueName = "EmployeeLastName"
               boundColumn7.Visible = False

               boundColumn8.DataField = "EmployeeID"
               boundColumn8.UniqueName = "EmployeeID"
               boundColumn8.Visible = False

               boundColumn9.DataField = "BureauID"
               boundColumn9.UniqueName = "BureauIDColumn"
               boundColumn9.Visible = False
               boundColumn9.HeaderText = "SB ID"

               boundColumn10.DataField = "CompanyID"
               boundColumn10.UniqueName = "CompanyIDColumn"
               boundColumn10.Visible = True
               boundColumn10.HeaderText = "Co ID"
               boundColumn10.Visible = False

               boundColumn11.DataField = "EmployeeFirstName"
               boundColumn11.HeaderText = "First Name"
               boundColumn11.Visible = False

               ' This will call Javascript to resize the hieght of grid when
               ' less then 350 PX so there is no blank area on the bottom of grid
               EmployeesGrid.ClientSettings.ClientEvents.OnGridCreated = "GridCreated"

               ' Add the RadGrid instance to the controls
               Me.PlaceHolder2.Controls.Add(EmployeesGrid)

       End Sub

[Dan Rowe]

I was hoping for some ideas on this issue. Is there anyone who can point me in the correct direction as to how I could fix this?
Thanks

[Pavlina]

Hi Dan,

Please note that grid columns should be added to the Controls collection of the MasterTableView after their attributes are set. Review this help article for more information about how to create the RadGrid control dynamically.

Additionally, you could use HeaderStyle-Width property to set fix width for your columns.

Give this suggestion a try and let me know about the result.

Best wishes,
Pavlina
the Telerik team

[Dan Rowe]

Are you saying that I should move the block of code that is actually adding the columns to the grid:

'add columns (order determines order of grid columns display)
          CompaniesGrid.MasterTableView.Columns.Add(buttonColumn2)
          CompaniesGrid.MasterTableView.Columns.Add(buttonColumn3)

          CompaniesGrid.MasterTableView.Columns.Add(boundColumn5)
          CompaniesGrid.MasterTableView.Columns.Add(boundColumn1)
          CompaniesGrid.MasterTableView.Columns.Add(boundColumn2)
          CompaniesGrid.MasterTableView.Columns.Add(boundColumn3)
          CompaniesGrid.MasterTableView.Columns.Add(boundColumn4)

          CompaniesGrid.MasterTableView.Columns.Add(companyNameLink)

          '' Working
          ''CompaniesGrid.MasterTableView.AllowFilteringByColumn = True

          'assign column properties

under the portion of the code that starts on the last line of the snipit above ('assign column properties)?

''CompaniesGrid.MasterTableView.AllowFilteringByColumn = True

 'assign column properties
 buttonColumn2.ButtonType = GridButtonColumnType.ImageButton
 buttonColumn2.ImageUrl = "~/DesktopModules/TTSTimeClock_Selection/RadControls/Grid/Skins/Outlook2007/Edit.gif"
 buttonColumn2.HeaderText = "E"
 buttonColumn2.Text = "Edit"
 buttonColumn2.CommandName = "EditCompany"
 buttonColumn2.UniqueName = "editColumn"

 buttonColumn3.ButtonType = GridButtonColumnType.ImageButton
 buttonColumn3.ImageUrl = "~/DesktopModules/TTSTimeClock_Selection/RadControls/Grid/Skins/Outlook2007/Delete.gif"
 buttonColumn3.HeaderText = "D"
 buttonColumn3.Text = "delete"
 buttonColumn3.CommandName = "DeleteCompany"
 buttonColumn3.UniqueName = "deleteColumn"
 buttonColumn3.ConfirmText = "Delete selected company?"

 boundColumn1.DataField = "CompanyID"
 boundColumn1.HeaderText = "ID"
 boundColumn1.UniqueName = "CompanyIDColumn"

 boundColumn2.DataField = "CompanyName"
 boundColumn2.HeaderText = "Co Name"
 boundColumn2.UniqueName = "CompanyNameColumn"
 boundColumn2.Visible = False

 boundColumn3.DataField = "CompanyPhone"
 boundColumn3.HeaderText = "Phone"
 boundColumn3.UniqueName = "CompanyPhoneColumn"
 boundColumn3.Visible = False

 boundColumn4.DataField = "CompanyContact"
 boundColumn4.HeaderText = "Co Contact"
 boundColumn4.UniqueName = "CompanyContactColumn"
 boundColumn4.Visible = False

 boundColumn5.DataField = "BureauID"
 boundColumn5.HeaderText = "Bureau ID"
 boundColumn5.UniqueName = "BureauIDColumn"
 boundColumn5.Visible = False

 companyNameLink.ButtonType = GridButtonColumnType.LinkButton
 companyNameLink.HeaderText = "Name"
 companyNameLink.Text = ""
 companyNameLink.CommandName = "ViewCompany"
 companyNameLink.UniqueName = "CompanyNameColumn2"

[Dan Rowe]

moving the blocks of code makes no difference.
If I turn the scrolling off on the grid and go back to paging I do not have this problem. However the customer want to be able to scroll the grid.

[Pavlina]

Hello Dan,

Can you please verify that you try setting pixel widths with HeaderStyle-Width to all columns (fixed table layout)?

Regards,
Pavlina
the Telerik team

[Dan Rowe]

I have these settings for the grid

This is in the  CreateCompanyGrid routine
CompaniesGrid.Width = Unit.Pixel(265)

These are in the Itemdatabound routine:

                dataitem("deleteColumn").Width = Unit.Pixel(10)

                dataitem("editColumn").Width = Unit.Pixel(10)

                dataitem("CompanyIDColumn").Width = Unit.Pixel(10)

[Pavlina]

Hello Dan,

Try setting columns width as shown below and see if it helps.:
VB.NET:

boundColumn1 = New GridBoundColumn()
boundColumn1.DataField = "CompanyID"
boundColumn1.HeaderText = "ID"
boundColumn1.HeaderStyle.Width = Unit.Pixel(10)
grid.MasterTableView.Columns.Add(boundColumn1)

I hope this helps.

Kind regards,
Pavlina
the Telerik team