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

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

10 Answers 201 Views

Grid

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

Pete asked on 10 Jan 2012, 01:36 PM

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.

10 Answers, 1 is accepted

answered on 11 Jan 2012, 09:10 AM

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

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now

answered on 11 Jan 2012, 10:12 AM

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.

answered on 13 May 2020, 04:37 PM

home-page---my-asp-net-application.gif

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!

answered on 18 May 2020, 09:28 AM

RadGrid-Programmatic.zip

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.

answered on 21 May 2020, 03:00 PM

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