Josh Meyer
Top achievements
Rank 1
Rank 1
Josh Meyer
asked on 22 Jun 2009, 09:18 PM
I have a grid that uses a single template column for display data in each row. It contains a few labels and linkbuttons, nothing fancy. Whenever anything in the grid causes a postback, a <td> element is added to the row, causing the linkbuttons to move to the left. They have their style set to float:right so that they'll line up against the right side of the column. Every time I click a row or do anything causing a postback (I'm using ajax, so it's not a full postback), a blank <td> gets added to the row. What could be causing this? The first <td> contains my template column controls, and then all the other <td> elements are blank, one for each time the page has performed an ajax postback.
5 Answers, 1 is accepted
0
Hello Josh,
This is indeed an odd issue and without inspecting your code it would be hard to determine the exact reason for it.
Can you please post the markup and code-behind of the problematic page using the 'Format Code Block' dialog at the top right corner of the forum editor? You may also check whether utilizing the global item template feature of RadGrid for ASP.NET AJAX for the same purpose (flexible layout) makes a difference.
Kind regards,
Sebastian
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.
This is indeed an odd issue and without inspecting your code it would be hard to determine the exact reason for it.
Can you please post the markup and code-behind of the problematic page using the 'Format Code Block' dialog at the top right corner of the forum editor? You may also check whether utilizing the global item template feature of RadGrid for ASP.NET AJAX for the same purpose (flexible layout) makes a difference.
Kind regards,
Sebastian
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
Josh Meyer
Top achievements
Rank 1
Rank 1
answered on 30 Jun 2009, 06:55 PM
Here's the markup...
and the codebehind...
thanks!
| <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> |
| <%@ Register Assembly="Telerik.Web.UI, Version=2008.2.1001.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4" |
| 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></title> |
| <style type="text/css"> |
| div.container |
| { |
| width: 100%; |
| margin: 0px; |
| } |
| div.fullwidth |
| { |
| width: 100%; |
| } |
| .FloatRight |
| { |
| float: right; |
| } |
| .FullWidth |
| { |
| width: 100%; |
| } |
| </style> |
| </head> |
| <body> |
| <form id="form1" runat="server"> |
| <div> |
| <telerik:RadScriptManager ID="RadScriptManager1" Runat="server"> |
| </telerik:RadScriptManager> |
| <div id="container" class="container"> |
| <table style="width: 100%"> |
| <tr> |
| <td> |
| <asp:Panel ID="pnl" runat="server"> |
| </asp:Panel> |
| </td> |
| </tr> |
| </table> |
| </div> |
| </div> |
| </form> |
| </body> |
| </html> |
and the codebehind...
| using System; |
| using System.Collections; |
| using System.Data; |
| using System.Data.SqlClient; |
| using System.Text.RegularExpressions; |
| using System.Web.UI; |
| using System.Web.UI.WebControls; |
| using Telerik.Web.UI; |
| using System.Reflection; |
| using System.Threading; |
| public partial class _Default : System.Web.UI.Page |
| { |
| #region "Initialize Variables" |
| //Controls |
| protected RadGrid gridTest; |
| #endregion |
| #region Initialization |
| public _Default() |
| { |
| this.Init += new EventHandler(Page_Init); |
| } |
| void Page_Init(object sender, EventArgs e) |
| { |
| BuildGrid(); |
| } |
| #endregion |
| #region Grid |
| protected void BuildGrid() |
| { |
| //Instantiate grid |
| gridTest = new RadGrid(); |
| gridTest.ID = "gridTest"; |
| //Add gridTest Event Handlers |
| gridTest.NeedDataSource += new GridNeedDataSourceEventHandler(gridCurrentWorkflows_NeedDataSource); |
| gridTest.ItemCommand += new GridCommandEventHandler(gridCurrentWorkflows_ItemCommand); |
| gridTest.DetailTableDataBind += new GridDetailTableDataBindEventHandler(gridCurrentWorkflows_DetailTableDataBind); |
| //Configure gridTest |
| gridTest.Width = Unit.Percentage(100); |
| gridTest.EnableViewState = true; |
| gridTest.Skin = "Default"; |
| gridTest.MasterTableView.CommandItemDisplay = GridCommandItemDisplay.Top; |
| gridTest.MasterTableView.Name = "MasterTable"; |
| gridTest.AllowMultiRowSelection = false; |
| gridTest.AutoGenerateColumns = false; |
| gridTest.MasterTableView.HierarchyDefaultExpanded = true; |
| gridTest.MasterTableView.HierarchyLoadMode = GridChildLoadMode.ServerBind; |
| gridTest.MasterTableView.ExpandCollapseColumn.Display = false; |
| gridTest.ClientSettings.Selecting.AllowCellSelect = false; |
| gridTest.ClientSettings.Selecting.AllowColumnSelect = false; |
| gridTest.ClientSettings.Selecting.AllowRowSelect = true; |
| gridTest.MasterTableView.CommandItemDisplay = GridCommandItemDisplay.None; |
| gridTest.GroupingEnabled = false; |
| gridTest.ClientSettings.Resizing.AllowRowResize = false; |
| gridTest.ClientSettings.EnablePostBackOnRowClick = true; |
| GridTableView gtSC = new GridTableView(gridTest, true); |
| gtSC.Width = Unit.Percentage(100); |
| gtSC.ShowHeader = false; |
| gtSC.GridLines = GridLines.None; |
| gtSC.HorizontalAlign = HorizontalAlign.Left; |
| gtSC.Name = "DetailTable"; |
| gridTest.MasterTableView.DetailTables.Add(gtSC); |
| GridBoundColumn c1 = new GridBoundColumn(); |
| c1.DataField = "Field1"; |
| c1.UniqueName = "Field1"; |
| c1.HeaderText = "Field1"; |
| gridTest.MasterTableView.Columns.Add(c1); |
| GridBoundColumn c2 = new GridBoundColumn(); |
| c2.DataField = "Field2"; |
| c2.UniqueName = "Field2"; |
| c2.HeaderText = "Field2"; |
| gridTest.MasterTableView.Columns.Add(c2); |
| GridBoundColumn c3 = new GridBoundColumn(); |
| c3.DataField = "Field3"; |
| c3.UniqueName = "Field3"; |
| c3.HeaderText = "Field3"; |
| gridTest.MasterTableView.Columns.Add(c3); |
| //Single Template column to disply all values for SC row |
| GridTemplateColumn colTemplate = new GridTemplateColumn(); |
| colTemplate.ItemTemplate = new DetailColumnTemplate(); |
| colTemplate.EditFormHeaderTextFormat = ""; |
| gridTest.MasterTableView.DetailTables[0].Columns.Add(colTemplate); |
| pnl.Controls.Add(gridTest); |
| } |
| void gridCurrentWorkflows_DetailTableDataBind(object source, GridDetailTableDataBindEventArgs e) |
| { |
| DataTable dt = new DataTable(); |
| dt.Columns.Add("Col1"); |
| DataRow rw = dt.NewRow(); |
| rw["Col1"] = ""; |
| dt.Rows.Add(rw); |
| e.DetailTableView.DataSource = dt; |
| } |
| void gridCurrentWorkflows_ItemCommand(object source, GridCommandEventArgs e) |
| { |
| switch (e.CommandName) |
| { |
| case "Button1": |
| case "Button2": |
| { |
| gridTest.Rebind(); |
| break; |
| } |
| } |
| } |
| void gridCurrentWorkflows_NeedDataSource(object source, GridNeedDataSourceEventArgs e) |
| { |
| if (!e.IsFromDetailTable) |
| { |
| DataTable dt = new DataTable(); |
| DataColumn dc1 = new DataColumn("Field1"); |
| DataColumn dc2 = new DataColumn("Field2"); |
| DataColumn dc3 = new DataColumn("Field3"); |
| dt.Columns.Add(dc1); |
| dt.Columns.Add(dc2); |
| dt.Columns.Add(dc3); |
| DataRow dr1 = dt.NewRow(); |
| dr1["Field1"] = "Value1"; |
| dr1["Field2"] = "Value2"; |
| dr1["Field3"] = "Value3"; |
| dt.Rows.Add(dr1); |
| DataRow dr2 = dt.NewRow(); |
| dr2["Field1"] = "Value1"; |
| dr2["Field2"] = "Value2"; |
| dr2["Field3"] = "Value3"; |
| dt.Rows.Add(dr2); |
| DataRow dr3 = dt.NewRow(); |
| dr3["Field1"] = "Value1"; |
| dr3["Field2"] = "Value2"; |
| dr3["Field3"] = "Value3"; |
| dt.Rows.Add(dr3); |
| gridTest.DataSource = dt; |
| } |
| } |
| #endregion |
| } |
| //Detail Column template |
| class DetailColumnTemplate : ITemplate |
| { |
| protected LinkButton btn1; |
| protected LinkButton btn2; |
| public DetailColumnTemplate() |
| { |
| } |
| public void InstantiateIn(Control container) |
| { |
| GridDataItem itm = (GridDataItem)container.NamingContainer; |
| Panel pnlOuter = new Panel(); |
| pnlOuter.ID = "pnlOuter"; |
| pnlOuter.Width = Unit.Percentage(100); |
| btn2 = new LinkButton(); |
| pnlOuter.Controls.Add(btn2); |
| btn2.CssClass = "FloatRight"; |
| btn2.Text = "Button2"; |
| btn2.CommandName = "Button2"; |
| Label lbl = new Label(); |
| pnlOuter.Controls.Add(lbl); |
| lbl.CssClass = "FloatRight"; |
| lbl.Text = " - "; |
| btn1 = new LinkButton(); |
| pnlOuter.Controls.Add(btn1); |
| btn1.CssClass = "FloatRight"; |
| btn1.Text = "Button1"; |
| btn1.CommandName = "Button1"; |
| container.Controls.Add(pnlOuter); |
| } |
| } |
thanks!
0
Hello Josh,
Your code implementation seems correct and I am not able to determine the exact reason for the extra td added on postback inside the template column. Is it possible for you to provide a live url where the discrepancy can be seen? Thus I will do my best to advice you further.
Furthermore, does disabling the ajax temporary alleviates the abnormality?
Kind regards,
Sebastianthe 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
Josh Meyer
Top achievements
Rank 1
Rank 1
answered on 07 Jul 2009, 04:09 PM
Disabling Ajax doesn't fix the problem. I don't have a live example, but if you create a new web application and put the above code in a page you'll see the problem. Or I can attach the sample project I created.
0
Hello Josh,
Indeed I was able to observe the issue you described. The reason for it is that you use a constructor for the detail table which automatically turns on the viewstate tracking for the nested table and add the template column to it after adding the detail table to the DetailTables collection, namely:
Thus an empty column is added to the child table each time on postback operation. The following code modification addressed the issue when tested locally:
I am attaching my test project to this forum thread for further reference.
Best regards,
Sebastian
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.
Indeed I was able to observe the issue you described. The reason for it is that you use a constructor for the detail table which automatically turns on the viewstate tracking for the nested table and add the template column to it after adding the detail table to the DetailTables collection, namely:
| GridTableView gtSC = new GridTableView(gridTest, true); |
| gtSC.Width = Unit.Percentage(100); |
| gtSC.ShowHeader = false; |
| gtSC.GridLines = GridLines.None; |
| gtSC.HorizontalAlign = HorizontalAlign.Left; |
| gtSC.Name = "DetailTable"; |
| gridTest.MasterTableView.DetailTables.Add(gtSC); |
Thus an empty column is added to the child table each time on postback operation. The following code modification addressed the issue when tested locally:
| GridTableView gtSC = new GridTableView(); |
| gtSC.Width = Unit.Percentage(100); |
| gtSC.ShowHeader = false; |
| gtSC.GridLines = GridLines.None; |
| gtSC.HorizontalAlign = HorizontalAlign.Left; |
| gtSC.Name = "DetailTable"; |
| //Single Template column to disply all values for SC row |
| GridTemplateColumn colTemplate = new GridTemplateColumn(); |
| colTemplate.ItemTemplate = new DetailColumnTemplate(); |
| colTemplate.EditFormHeaderTextFormat = ""; |
| gtSC.Columns.Add(colTemplate); |
| gridTest.MasterTableView.DetailTables.Add(gtSC); |
I am attaching my test project to this forum thread for further reference.
Best regards,
Sebastian
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.