Programmatically Created Template Columns Have Contents Disappear On Detail Table Expand?

[Pete]

Hi,

I'm trying to build a RadGrid and I wanted to use Template columns programmatically, so I followed the tutorial here and everything worked brilliantly. I even got as far as beginning to create a template for the editing and adding of new records. The problem however has occurred that I've added a series of detail tables to my grid and now when I click to expand in to one of the detail tables the Bound columns that I've added to the Master Table still maintain their values but the Template columns completely lose their values.

I don't know if I'm missing something or I'm doing something in an incorrect way but the template columns display so perfectly and the fact that they disappear whenever you expand the grid is really disheartening.

Here's the code:

Protected Sub Page_Init(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Init
    RenderOrderGrid()
End Sub
Private Sub RenderOrderGrid()
    Dim myDataSet As DataSet
    Dim rgdOrders As RadGrid
    myDataSet = DataManager.OrderList
    '===Set values for RadGrid===
    rgdOrders = New RadGrid
    rgdOrders.AllowPaging = True
    rgdOrders.AutoGenerateColumns = False
    rgdOrders.GroupingEnabled = False
    rgdOrders.ShowGroupPanel = True
    rgdOrders.AllowSorting = False
    rgdOrders.PagerStyle.AlwaysVisible = True
    rgdOrders.PagerStyle.Mode = GridPagerMode.NextPrevAndNumeric
    rgdOrders.ClientSettings.AllowDragToGroup = False
    rgdOrders.MasterTableView.PageSize = 20
    rgdOrders.MasterTableView.Name = "OrdersMasterTable"
    rgdOrders.AutoGenerateEditColumn = True
    rgdOrders.AutoGenerateDeleteColumn = False
    rgdOrders.Skin = Session("TelerikSkin")
    rgdOrders.DataSource = myDataSet.Tables("OrderList")
    '===Set values for Master Table===
    rgdOrders.MasterTableView.CommandItemDisplay = GridCommandItemDisplay.Top
    rgdOrders.MasterTableView.CommandItemSettings.ShowAddNewRecordButton = False
    rgdOrders.MasterTableView.CommandItemSettings.ShowRefreshButton = True
    rgdOrders.MasterTableView.CommandItemSettings.RefreshImageUrl = "../img/Refresh.gif"
    rgdOrders.MasterTableView.CommandItemSettings.RefreshText = "Refresh Grid"
    '===Create Columns===
    RenderColumns(rgdOrders)
    '===Create a table view to use as detail table===
    Dim myDetailTable As Telerik.Web.UI.GridTableView
    myDetailTable = New GridTableView
    myDetailTable.Width = Unit.Percentage(100)
    myDetailTable.Name = "AdminOrdersOrderlinesDetailTable"
    rgdOrders.MasterTableView.DetailTables.Add(myDetailTable)
    myDetailTable = New GridTableView
    myDetailTable.Width = Unit.Percentage(100)
    myDetailTable.Name = "AdminOrdersNotesDetailTable"
    rgdOrders.MasterTableView.DetailTables.Add(myDetailTable)
    AddHandler rgdOrders.ColumnCreated, AddressOf rgdOrders_ColumnCreated
    AddHandler rgdOrders.DetailTableDataBind, AddressOf rgdOrders_DetailTableDataBind
    rgdOrders.MasterTableView.TableLayout = GridTableLayout.Fixed
    divOrders.Controls.Add(rgdOrders)
End Sub
Private Sub RenderColumns(ByRef rgdOrders As RadGrid)
    '===Create Columns===
    Dim orderIDColumn, statusColumn As GridBoundColumn
    Dim customerTemplateColumn, dateTemplateColumn, repCodeScanNoTemplateColumn, contactLettersTemplateColumn As GridTemplateColumn
    'Order ID Column
    orderIDColumn = New GridBoundColumn()
    orderIDColumn.HeaderText = "Order ID"
    orderIDColumn.UniqueName = "mkOrderId"
    orderIDColumn.DataField = "mkOrderId"
    orderIDColumn.HeaderStyle.CssClass = "gridFont"
    orderIDColumn.HeaderStyle.Width = 60
    orderIDColumn.ItemStyle.CssClass = "gridFont"
    'Customer Details Column
    customerTemplateColumn = New GridTemplateColumn()
    customerTemplateColumn.ItemTemplate = New CustomerTemplate("CustomerName")
    customerTemplateColumn.HeaderText = "Customer Details"
    customerTemplateColumn.UniqueName = "CustomerDetails"
    customerTemplateColumn.HeaderStyle.CssClass = "gridFont"
    customerTemplateColumn.ItemStyle.CssClass = "gridFont"
    'Dates Column
    dateTemplateColumn = New GridTemplateColumn()
    dateTemplateColumn.ItemTemplate = New DateTemplate("Dates")
    dateTemplateColumn.HeaderText = "Dates"
    dateTemplateColumn.UniqueName = "Dates"
    dateTemplateColumn.HeaderStyle.CssClass = "gridFont"
    dateTemplateColumn.HeaderStyle.Width = 150
    dateTemplateColumn.ItemStyle.CssClass = "gridFont"
    'Status Column
    statusColumn = New GridBoundColumn()
    statusColumn.DataField = "Status"
    statusColumn.HeaderText = "Status"
    statusColumn.UniqueName = "Status"
    statusColumn.HeaderStyle.CssClass = "gridFont"
    statusColumn.HeaderStyle.Width = 120
    statusColumn.ItemStyle.CssClass = "gridFont"
    'RepCode/ScanNo Column
    repCodeScanNoTemplateColumn = New GridTemplateColumn()
    repCodeScanNoTemplateColumn.ItemTemplate = New RepCodeScanNoTemplate("RepCodeScanNo")
    repCodeScanNoTemplateColumn.HeaderText = "Rep Code / Scan No"
    repCodeScanNoTemplateColumn.UniqueName = "RepCode"
    repCodeScanNoTemplateColumn.HeaderStyle.CssClass = "gridFont"
    repCodeScanNoTemplateColumn.HeaderStyle.Width = 150
    repCodeScanNoTemplateColumn.ItemStyle.CssClass = "gridFont"
    'Print Letters
    contactLettersTemplateColumn = New GridTemplateColumn()
    contactLettersTemplateColumn.ItemTemplate = New ContactLettersTemplate("PrintLetters")
    contactLettersTemplateColumn.HeaderText = "Print Letters"
    contactLettersTemplateColumn.UniqueName = "PrintLetters"
    contactLettersTemplateColumn.HeaderStyle.CssClass = "gridFont"
    contactLettersTemplateColumn.HeaderStyle.Width = 80
    contactLettersTemplateColumn.ItemStyle.CssClass = "gridFont"
    'Add Columns To Grid
    rgdOrders.MasterTableView.Columns.Add(orderIDColumn)
    rgdOrders.MasterTableView.Columns.Add(customerTemplateColumn)
    rgdOrders.MasterTableView.Columns.Add(dateTemplateColumn)
    rgdOrders.MasterTableView.Columns.Add(statusColumn)
    rgdOrders.MasterTableView.Columns.Add(repCodeScanNoTemplateColumn)
    rgdOrders.MasterTableView.Columns.Add(contactLettersTemplateColumn)
End Sub

Private Sub rgdOrders_DetailTableDataBind(ByVal source As Object, ByVal e As GridDetailTableDataBindEventArgs)
    Dim dataItem As GridDataItem = CType(e.DetailTableView.ParentItem, GridDataItem)
    Select Case e.DetailTableView.DetailTableIndex
        Case 0
            Dim myOrderId As Decimal = CDec(dataItem.Item("mkOrderId").Text)
            Dim myDataSet As New DataSet
            '===Get the DetailTable data===
            myDataSet = DataManager.OrderLinesGet(myOrderId)
            e.DetailTableView.DataSource = myDataSet.Tables("OrderLines")
            e.DetailTableView.AutoGenerateColumns = False
            e.DetailTableView.CommandItemDisplay = GridCommandItemDisplay.Top
            e.DetailTableView.CommandItemSettings.ShowAddNewRecordButton = False
            e.DetailTableView.CommandItemSettings.ShowRefreshButton = False
            e.DetailTableView.Name = "AdminOrdersOrderlinesDetailTable"
            e.DetailTableView.AllowPaging = True
            Dim boundColumn As GridBoundColumn
            'Product Name Column
            boundColumn = New GridBoundColumn()
            boundColumn.HeaderText = "Product Name"
            boundColumn.UniqueName = "ProductName"
            boundColumn.DataField = "ProductName"
            boundColumn.HeaderStyle.CssClass = "gridFont"
            boundColumn.ItemStyle.CssClass = "gridFont"
            e.DetailTableView.Columns.Add(boundColumn)
            'Quantity Column
            boundColumn = New GridBoundColumn()
            boundColumn.HeaderText = "Quantity"
            boundColumn.UniqueName = "Quantity"
            boundColumn.DataField = "Quantity"
            boundColumn.HeaderStyle.CssClass = "gridFont"
            boundColumn.HeaderStyle.Width = 120
            boundColumn.ItemStyle.CssClass = "gridFont"
            e.DetailTableView.Columns.Add(boundColumn)
            'Unit Price Column
            boundColumn = New GridBoundColumn()
            boundColumn.HeaderText = "Unit Price"
            boundColumn.UniqueName = "UnitPrice"
            boundColumn.DataField = "UnitPrice"
            boundColumn.HeaderStyle.CssClass = "gridFont"
            boundColumn.HeaderStyle.Width = 120
            boundColumn.ItemStyle.CssClass = "gridFont"
            e.DetailTableView.Columns.Add(boundColumn)
            'Line Total Column
            boundColumn = New GridBoundColumn()
            boundColumn.HeaderText = "Line Total"
            boundColumn.UniqueName = "LineTotal"
            boundColumn.DataField = "LineTotal"
            boundColumn.HeaderStyle.CssClass = "gridFont"
            boundColumn.HeaderStyle.Width = 120
            boundColumn.ItemStyle.CssClass = "gridFont"
            e.DetailTableView.Columns.Add(boundColumn)
        Case 1
            Dim myOrderId As Decimal = CDec(dataItem.Item("mkOrderId").Text)
            Dim myDataSet As New DataSet
            '===Get the DetailTable data===
            myDataSet = DataManager.OrderNotesGet(myOrderId)
            e.DetailTableView.DataSource = myDataSet.Tables("OrderNotesGet")
            e.DetailTableView.AutoGenerateColumns = False
            e.DetailTableView.CommandItemDisplay = GridCommandItemDisplay.Top
            e.DetailTableView.CommandItemSettings.AddNewRecordImageUrl = "../img/AddRecord.gif"
            e.DetailTableView.CommandItemSettings.AddNewRecordText = "Add New Record"
            e.DetailTableView.CommandItemSettings.ShowRefreshButton = False
            e.DetailTableView.Name = "AdminOrdersNotesDetailTable"
            e.DetailTableView.AllowPaging = True
            Dim boundColumn As GridBoundColumn
            'Date / Time Added Column
            boundColumn = New GridBoundColumn()
            boundColumn.HeaderText = "Date / Time Added"
            boundColumn.UniqueName = "DateTimeAdded"
            boundColumn.DataField = "DateTimeAdded"
            boundColumn.HeaderStyle.CssClass = "gridFont"
            boundColumn.HeaderStyle.Width = 120
            boundColumn.ItemStyle.CssClass = "gridFont"
            e.DetailTableView.Columns.Add(boundColumn)
            'Note Type Column
            boundColumn = New GridBoundColumn()
            boundColumn.HeaderText = "Note Type"
            boundColumn.UniqueName = "Type"
            boundColumn.DataField = "Type"
            boundColumn.HeaderStyle.CssClass = "gridFont"
            boundColumn.HeaderStyle.Width = 80
            boundColumn.ItemStyle.CssClass = "gridFont"
            e.DetailTableView.Columns.Add(boundColumn)
            'Note Column
            boundColumn = New GridBoundColumn()
            boundColumn.HeaderText = "Note"
            boundColumn.UniqueName = "Note"
            boundColumn.DataField = "Note"
            boundColumn.HeaderStyle.CssClass = "gridFont"
            boundColumn.ItemStyle.CssClass = "gridFont"
            e.DetailTableView.Columns.Add(boundColumn)
            'User Column
            boundColumn = New GridBoundColumn()
            boundColumn.HeaderText = "User"
            boundColumn.UniqueName = "UserName"
            boundColumn.DataField = "UserName"
            boundColumn.HeaderStyle.CssClass = "gridFont"
            boundColumn.HeaderStyle.Width = 80
            boundColumn.ItemStyle.CssClass = "gridFont"
            e.DetailTableView.Columns.Add(boundColumn)
    End Select
End Sub

Any help on this problem would be greatly appreciated.

[Pavlina]

Hi,

To create a template dynamically, you must define a custom class that implements the ITemplate interface. Then you can assign an instance of this class to the ItemTemplate or EditTemplateTemplate property of the GridTemplateColumn object. For a sample code you can refer to the  Programmatic creation (Creating Template columns programmatically section) help topic.

Kind regards,
Pavlina
the Telerik team

[Pete]

Hi Pavlina,

That's exactly what I've done, if you see the code above. The line "customerTemplateColumn.ItemTemplate = New CustomerTemplate("CustomerName")", for example, creates a new instance of my CustomerTemplate class that implements iTemplate and was pretty much copied and pasted from the exact link you sent me to, which I myself linked in the post.

My problem is despite doing that the template columns still become completely blank the moment I click to expand in to a detail table and I have absolutely no idea why. I've now included this code below.

Private Class CustomerTemplate
    Implements ITemplate
    Protected lControl As LiteralControl
    Private colname As String

    Public Sub New(ByVal cName As String)
        colname = cName
    End Sub

    Public Sub InstantiateIn(ByVal container As System.Web.UI.Control) Implements System.Web.UI.ITemplate.InstantiateIn
        lControl = New LiteralControl()
        lControl.ID = colname & "Control"
        AddHandler lControl.DataBinding, AddressOf lControl_DataBinding
        container.Controls.Add(lControl)
    End Sub

    Public Sub lControl_DataBinding(ByVal sender As Object, ByVal e As EventArgs)
        Dim l As LiteralControl = DirectCast(sender, LiteralControl)
        Dim container As GridDataItem = DirectCast(l.NamingContainer, GridDataItem)
        Dim myCustName, myAdd1, myAdd2, myTown, myCounty, myPostCode, myCountry As String
        Dim addressPresent As Boolean

        myCustName = (DirectCast(container.DataItem, DataRowView))("CustomerName").ToString()
        myAdd1 = (DirectCast(container.DataItem, DataRowView))("Address1").ToString()
        myAdd2 = (DirectCast(container.DataItem, DataRowView))("Address2").ToString()
        myTown = (DirectCast(container.DataItem, DataRowView))("Town").ToString()
        myCounty = (DirectCast(container.DataItem, DataRowView))("County").ToString()
        myPostCode = (DirectCast(container.DataItem, DataRowView))("PostCode").ToString()
        myCountry = (DirectCast(container.DataItem, DataRowView))("Country").ToString()

        l.Text = "<span class=""bold"">Customer Name: " & myCustName & "</span><br />"
        If Not myAdd1 = "" Then
            l.Text &= myAdd1 & ", "
            addressPresent = True
        End If

        If Not myAdd2 = "" Then
            l.Text &= myAdd2 & ", "
            addressPresent = True
        End If

        If Not myTown = "" Then
            l.Text &= myTown & ", "
            addressPresent = True
        End If

        If Not myCounty = "" Then
            l.Text &= myCounty & ", "
            addressPresent = True
        End If

        If Not myPostCode = "" Then
            l.Text &= myPostCode & ", "
            addressPresent = True
        End If

        If Not myCountry = "" Then
            l.Text &= myCountry & ", "
            addressPresent = True
        End If

        If addressPresent Then
            l.Text = l.Text.Substring(0, l.Text.Length - 2)
        End If
    End Sub

End Class

The problem remains that the contents of my template columns still completely disappear and I have no idea why.

[Pete]

I have, since my original post, changed the structure of the way I'm defining the elements on the page so that all of the columns, even in the detail tables, is now defined in Page.Init and yet clicking to expand out in to the detail table still completely removes all data from any columns definied as templatecolumns instead of boundcolumns. This is obviously causing significant display problems.

[Pavlina]

Hello,

In order to properly assist you, I would suggest that you open a formal support ticket, and send us a small working project, showing the issue that you described. We will advise you further, as soon as we review it.

Greetings,
Pavlina
the Telerik team

[Rahul]

Hey Guys,

I am also getting the same issue. When I expand the row for detail table, the bound column persist the value but the template column does not.

 

protected void Page_Init(object source, System.EventArgs e)
{

     RadGrid RadGrid1 = new RadGrid();
     RadGrid1.NeedDataSource += new GridNeedDataSourceEventHandler(NeedDataSource);
     RadGrid1.MasterTableView.DataKeyNames = new string[] { "CustomerID" };
    RadGrid1.MasterTableView.EditMode = GridEditMode.InPlace;
RadGrid1.Skin = "Default";
RadGrid1.Width = Unit.Percentage(100);
RadGrid1.PageSize = 15;
RadGrid1.AllowPaging = true;
RadGrid1.AutoGenerateColumns = false;
RadGrid1.DetailTableDataBind += new GridDetailTableDataBindEventHandler(DetailTableDataBind);
RadGrid1.ClientSettings.ClientEvents.OnRowDblClick = "rowDBClick";
//Add columns
GridEditCommandColumn column = new GridEditCommandColumn();
column.HeaderText = "edit";
RadGrid1.MasterTableView.Columns.Add(column);
GridBoundColumn boundColumn;
boundColumn = new GridBoundColumn();
boundColumn.DataField = "CustomerID";
boundColumn.HeaderText = "CustomerID";
RadGrid1.MasterTableView.Columns.Add(boundColumn);
boundColumn = new GridBoundColumn();
boundColumn.DataField = "CustomerName";
boundColumn.HeaderText = "Contact Name";
RadGrid1.MasterTableView.Columns.Add(boundColumn);

GridTemplateColumn templateColumn = new GridTemplateColumn();
templateColumn.ItemTemplate = new MyTemplate("label", "CustomerName");
templateColumn.HeaderText = "Template Column";
RadGrid1.MasterTableView.Columns.Add(templateColumn);
//Detail table - Orders (II in hierarchy level)
GridTableView tableViewOrders = new GridTableView(RadGrid1);
tableViewOrders.Name = "Level1";
tableViewOrders.DataKeyNames = new string[] { "OrderID" };
GridRelationFields relationFields = new GridRelationFields();
relationFields.MasterKeyField = "CustomerID";
relationFields.DetailKeyField = "CustomerID";
tableViewOrders.ParentTableRelation.Add(relationFields);
RadGrid1.MasterTableView.DetailTables.Add(tableViewOrders);
//Add columns
boundColumn = new GridBoundColumn();
boundColumn.DataField = "OrderID";
boundColumn.HeaderText = "OrderID";
tableViewOrders.Columns.Add(boundColumn);
boundColumn = new GridBoundColumn();
boundColumn.DataField = "OrderDate";
boundColumn.HeaderText = "Date Ordered";
tableViewOrders.Columns.Add(boundColumn);

this.PlaceHolder1.Controls.Add(RadGrid1);
}


protected void NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
(sender as RadGrid).DataSource = new Customer().GetList();
}

protected void DetailTableDataBind(object sender, GridDetailTableDataBindEventArgs e)
{
switch (e.DetailTableView.Name)
{
case "Level1":
e.DetailTableView.DataSource = new Order().GetList();
break;
}
}

 

public class MyTemplate : IBindableTemplate
{
protected string Code;
private string colname;
public MyTemplate(string cName, string code=null)
{
colname = cName;
Code=code;
}
public void InstantiateIn(System.Web.UI.Control container)
{
if(colname=="label")
{
var label = new LiteralControl();
//radcombobox.ID = colname;
label.DataBinding += new EventHandler(lControl_DataBinding);
container.Controls.Add(label);
}
}

public void lControl_DataBinding(object sender, EventArgs e)
{
LiteralControl l = (LiteralControl)sender;
GridDataItem container = (GridDataItem)l.NamingContainer;
if (Code != null && !(container is GridDataInsertItem))
{
//var temp = (container.DataItem as Customer).ContainsKey(Code);
//if(temp)
l.Text = (container.DataItem as Customer).CustomerName.ToString(); 
}
}

public IOrderedDictionary ExtractValues(Control container)
{
OrderedDictionary dick = new OrderedDictionary();
//dick.Add(colname, container.);

return dick;
}
}



public class Customer
{
public int CustomerID { get; set; }
public string CustomerName { get; set; }
public List<Customer> GetList()
{
var list = new List<Customer>();
list.Add(new Customer() { CustomerID = 123, CustomerName = "123" });
list.Add(new Customer() { CustomerID = 456, CustomerName = "456" });
list.Add(new Customer() { CustomerID = 789, CustomerName = "789" });
return list;
}
}

public class Order
{
public int CustomerID { get; set; }
public int OrderID { get; set; }
public DateTime OrderDate { get; set; }
public List<Order> GetList()
{
var list = new List<Order>();
list.Add(new Order() { CustomerID = 123, OrderID = 1231, OrderDate = DateTime.Now });
list.Add(new Order() { CustomerID = 123, OrderID = 1232, OrderDate = DateTime.Now });
list.Add(new Order() { CustomerID = 789, OrderID = 7891, OrderDate = DateTime.Now });
return list;
}
}


Any help on this problem would be greatly appreciated.

Thanks! 

[Attila Antal]

Hi Rahul,

Please check out the attached sample project and try to compare that to the one you are working on to see what is done differently.

Also, if you have AJAX enabled, disable that temporarily. In case there are exceptions generated on the server, they will show up immediately telling you the exact reason for this behavior.

Kind regards,
Attila Antal
Progress Telerik

[Rahul]

Hi Attila,

Thanks for demo, but it is not what I want to achieve.

I am facing the issue when I expand the grid for its detail table. The template columns that I had used in the grid loses their value when the row is expanded. Also, facing the same issue on when detail table row expanded. And data source of the grid is dynamic, I can not use Bound Columns instead of Template columns,

 

Can you help me out in this?

Thank You,
Rahul

 

 

[Rahul]

Hi All,

Any Update on this??

[Attila Antal]

Hi Rhaul,

The reason I shared that example was to let you compare your project to it and see if you're doing anything different. This sample does not replicate the same exact scenario you have, but if you add a DetailTable to it would still work and will not lose the ComboBox control or it's selected value when expanding a row.

I have tested the code you shared, I and I found that LiteralControl() does not respond to the DataBind() the same way the other controls do when the Grid is binding. Therefore, the DataBinding event did not fire at the time expanding the Row.

The solution to this issue would be to use a Label(), or a Literal() instead of LiteralControl()

public void InstantiateIn(System.Web.UI.Control container)
{
    if (colname == "label")
    {
        var label = new Label();
        //radcombobox.ID = colname;
        label.DataBinding += new EventHandler(lControl_DataBinding);
        container.Controls.Add(label);
    }
}

 

Kind regards,
Attila Antal
Progress Telerik

[Rahul]

Hi Attila,

Thanks for the solution, it works.