How to add a GridTemplateColumn to a DetailTable with auto generated columns?

[Stephen]

I've hit a road block trying to figure this out. Here's how my rad grid is setup:

<maui:RadGrid ID="grdBeast" runat="server" OnNeedDataSource="grdBeast_OnNeedDataSource" OnDetailTableDataBind="grdBeast_OnDetailTableDataBind"
      OnDataBound="grdBeast_OnDataBound" OnColumnCreated="grdBeast_ColumnCreated" OnPreRender="grdBeast_OnPreRender" OnItemDataBound="grdBeast_ItemDataBound">
  <MasterTableView DataKeyNames="Combined1" TableLayout="Auto" AllowPaging="True" PageSize="25" AutoGenerateColumns="True" ShowFooter="True">
    <DetailTables>
      <maui:GridTableView runat="server" DataKeyNames="Combined2" Name="Combined2" AutoGenerateColumns="True" BorderWidth="0" >
        <DetailTables>
          <maui:GridTableView runat="server" Name="Combined3" DataKeyNames="Combined3" AutoGenerateColumns="True" BorderWidth="0">
            <DetailTables>
              <maui:GridTableView runat="server" Name="Combined4" DataKeyNames="Combined4" AutoGenerateColumns="True" BorderWidth="0">
                <DetailTables>
                  <maui:GridTableView runat="server" Name="Combined5" DataKeyNames="Combined5" AutoGenerateColumns="True" BorderWidth="0">
                    <DetailTables>
                      <maui:GridTableView runat="server" Name="Combined6" DataKeyNames="Combined5" AutoGenerateColumns="True" BorderWidth="0">
                        <DetailTables>
                          <maui:GridTableView runat="server" Name="Combined7" DataKeyNames="Combined5" AutoGenerateColumns="True" BorderWidth="0">
                            <DetailTables>
                              <maui:GridTableView runat="server" Name="Combined8" DataKeyNames="Combined5" AutoGenerateColumns="True" BorderWidth="0">
                              </maui:GridTableView>
                            </DetailTables>
                          </maui:GridTableView>
                        </DetailTables>
                      </maui:GridTableView>
                    </DetailTables>
                  </maui:GridTableView>
                </DetailTables>
              </maui:GridTableView>
            </DetailTables>
          </maui:GridTableView>
        </DetailTables>
      </maui:GridTableView>
    </DetailTables>
  </MasterTableView>
</maui:RadGrid>

DetailTables are bound with the OnDetailTableDataBind event:

protected void grdBeast_OnDetailTableDataBind(object sender, GridDetailTableDataBindEventArgs e )
    {
      var keyVal = e.DetailTableView.ParentItem.KeyValues;
      var keyPath = new List<string> ();
      TraverseUpGridViewParents ( e.DetailTableView, ref keyPath );
      keyPath.Insert ( 0, keyval );

      if (Cntrl.ViewModel.IsTableATransactionDetailTable(e.DetailTableView.Name))
        e.DetailTableView.DataKeyNames = new string[] { "TranType" };

      e.DetailTableView.DataSource = Cntrl.ViewModel.GetReportDataSource ( GetCollectionSummaryConfigIndex (), keyPath, e.DetailTableView.Name );
    }

For the most part, all of the detail tables including the master table display the same columns.  At some point I supply a different datasource that has 3 different columns for what I call a transaction detail table. One of the columns needs to be a GridTemplateColumn containing a link button that has a click event. So far I've tried modifying the OnDetailTableDataBind event to the code shown below.

protected void grdBeast_OnDetailTableDataBind(object sender, GridDetailTableDataBindEventArgs e )
    {
      var keyval = e.DetailTableView.ParentItem.KeyValues;
      var keyPath = new List<string> ();
      TraverseUpGridViewParents ( e.DetailTableView, ref keyPath );
      keyPath.Insert ( 0, keyval );

      if (Cntrl.ViewModel.IsTableATransactionDetailTable(e.DetailTableView.Name))
      {
        e.DetailTableView.DataKeyNames = new string[] { "TranType" };

        var receiptColumn = new GridTemplateColumn();
        receiptColumn.HeaderText = "Receipt Column";
        receiptColumn.UniqueName = "ReceiptColumn";
        receiptColumn.DataField = "ReceiptColumn";
        receiptColumn.ItemTemplate = new ReceiptColumnTemplate();
        e.DetailTableView.Columns.Add(receiptColumn);
      }

      e.DetailTableView.DataSource = Cntrl.ViewModel.GetReportDataSource (
        GetCollectionSummaryConfigIndex (), keyPath, e.DetailTableView.Name );
    }

private class ReceiptColumnTemplate : ITemplate
    {
      private LinkButton receiptButton;

      public void InstantiateIn(System.Web.UI.Control container)
      {
        receiptButton = new LinkButton ();
        container.Controls.Add(receiptButton);
        receiptButton.DataBinding += new EventHandler(receiptButton_DataBinding);
        receiptButton.ID = "receiptLink";
      }

      void receiptButton_DataBinding(object sender, EventArgs e)
      {
        var receiptButton = ( LinkButton ) sender;
        var container = ( GridDataItem ) receiptButton.NamingContainer;
        receiptButton.Text = ( ( DataRowView ) container.DataItem ) [ "ReceiptNumber" ].ToString ();
      }
    }

protected void grdBeast_ItemDataBound(object sender, GridItemEventArgs e)
    {
      if (e.Item is GridDataItem)
      {
        if (Cntrl.ViewModel.IsTableATransactionDetailTable(e.Item.OwnerTableView.Name))
        {
          var item = ( GridDataItem ) e.Item;
          var linkButton = (LinkButton)item.FindControl ( "receiptLink" );
          if (linkButton != null)
          {
            linkButton.Click += new EventHandler(linkButton_Click);
          }
        }
      }
    }

The changes display the new column correctly but when I click on the link button, the click event is never reached and then the column disappears and the rest are mismatched from their corresponding data. So then I tried not using the ItemDatabound event to assign the link button a click handler and assigned it in the template class.  Clicking the link button in that setup also never reached the link button click event.
 
Anyone know how I can fix this or have a better method for adding a template column to a detail table that has auto generated columns?

[Shinu]

Hi,

Try attaching the click event in ItemCreated event.
C#:

protected void grdBeast_ItemCreated(object sender, GridItemEventArgs e)
{
 if (e.Item is GridDataItem)
 {
  if (Cntrl.ViewModel.IsTableATransactionDetailTable(e.Item.OwnerTableView.Name))
  {
    var item = ( GridDataItem ) e.Item;
    var linkButton = (LinkButton)item.FindControl ( "receiptLink" );
    if (linkButton != null)
    {
       linkButton.Click += new EventHandler(linkButton_Click);
    }
  }
 }
}

Thanks,
Shinu.

[Stephen]

Hi Shinu,

Thanks for the reply.  I tried your suggestion and was getting the same results.  I set a break point in Page_Load just to make sure the link button was hitting the server, which it was, but it's still not reaching the linkButton_Click event.  After clicking, the column disappears and all of the remaining columns shift over 1 column.

[Stephen]

Anyone have any other ideas here...?

[Pavlina]

Hi,

Please keep in mind that column templates must be added in the Page_Init event handler, so that the template controls can be added to the ViewState. For more information about programmatic creation you can refer to the help article below:
http://www.telerik.com/help/aspnet-ajax/grid-programmatic-creation.html#Section4

All the best,
Pavlina
the Telerik team

[Stephen]

Pavlina,

I have taken into consideration the documentation on the programmatic creation of template columns in the link you've posted. The difference between my code and the code in the documentation is that I have my grid created in the markup while the example code in the link creates the entire grid in the page init event.  When I try adding a new template column in my page init I lose visibility of the grid the first time I try to expand a detail table. 

Is there any documentation that details how to add a template column to a detail table where your grid is defined in the markup?

[Pavlina]

Hello,

The following demo illustrates how to create RadGrid programmatically on Page.Init(when you have template column you should create your RadGrid on Page.Init)
Grid / On PageInit

Greetings,
Pavlina
the Telerik team