ClientItemTemplate with Server-side Controls

[Jeff]

Hello, I have a RadGrid (2012.2.607) that is data bound client-side (wcf) and built programmatically (server-side). I am using the following GridTemplateColumn which is not displaying the asp:image control. If I replace the asp:image control with an img control then the image correctly displays:

GridTemplateColumn templateColumn = new GridTemplateColumn();
templateColumn.ClientItemTemplate = "<a id='atemplateImage' onclick='templateImage_Click(); return false;' runat='server'><asp:Image ID='templateImg' ImageUrl='/SalesPortal/Images/Templates/TemplateSample1_Thumbnail.png' Height='150px' Width='160px' AlternateText='Template Image' runat='server' /></a><br /><span>click image for more samples</span>";
templateColumn.UniqueName = "ImageTemplate";
templateColumn.HeaderText = "";
templateColumn.AllowFiltering = false;
templateColumn.HeaderStyle.Width = Unit.Pixel(160);
grid.MasterTableView.Columns.Add(templateColumn);

I am creating the grid from within the Page_Init. I also noticed that I can not display any asp control within the ClientItemTemplate e.g. asp:checkbox. If I cannot display asp controls then how can I include and bind to an asp:checkbox control for example?
Thank you!

[Kostadin]

Hi Jeff,

Please examine the last section of  the following help article which describes how to create a TemplateColumns programmatically.

Regards,
Kostadin
Telerik

[Jeff]

Thank you, given I am using clientside binding, can I use the Kendo binding with asp controls (example below) or will I need to set values in the client side RowDataBound handler?

public void InstantiateIn(System.Web.UI.Control container)
{
    CheckBox cb = new CheckBox();
    cb.Text = "#=ContactTitle #";
    container.Controls.Add(cb);
}

Thank you!

[Kostadin]

Hello Jeff,

In order to bind controls in ItemTemplate you should set ID of the control as the DataField. This way RadGrid will manage to populate your control in ItemTemplate. For instance.

//DataField Name
<telerik:GridTemplateColumn ..>
         <asp:Label id="Name" runat="server" />
</telerik:GridTemplateColumn>

For more advanced scenarios you have to use RowDataBound event handler.

Regards,
Kostadin
Telerik

[Jeff]

Thank you. Given I am programmatically creating the grid (see sample code above), how would I accomplish?

[Kostadin]

Hello Jeff,

You could examine the last section of the previously provided help article about how to create a TemplateColumn programmatically. All you have to do is to set ID of the control as the DataField. For instance if you have Label control into the ItemTemaplte and you have a data field "Name" you have to set the ID of the label to match the name of the data field. In this case the ID of the Label should be "Name".

Regards,
Kostadin
Telerik

[Jeff]

Hello, unfortunately you and I are not communicating very well here. Please allow me to explain. I created my grid server-side i.e. programmatically. My grid binds client-side. I would like to use asp controls. I completely agree with your directions IF I were not creating my grid programmatically I could simply follow the code sample you first provided, make the asp control name equal to the datafield name and I know this works. But my question is how do I do this in my server-side created grid? Do I still need to reference an ITemplate and in the ITemplate definition I assign the DataField as the control name...I tried this and it does not seem to work? Here is an example of how I create a template column, where in the below code sample would I put my asp control?

GridTemplateColumn templateColumn = new GridTemplateColumn();
templateColumn.ClientItemTemplate = "<a id='atemplateImage' onclick='templateImage_Click(); return false;' runat='server'><img id='templateImg' height='150' width='160' src='#=Url_Body#' alt='#=Url_Header#' runat='server' /></a><br /><span>click image for more samples</span>";
templateColumn.UniqueName = "ImageTemplate";
templateColumn.HeaderText = "";
templateColumn.AllowFiltering = false;
templateColumn.HeaderStyle.Width = Unit.Pixel(160);
grid.MasterTableView.Columns.Add(templateColumn);

[Kostadin]

Hi,

I prepared a small sample and on my side seems to work correctly. Nevertheless I noticed that you are trying to display images in the template column. For this purpose you have to create an image handler which inherits IHttpHandler  as it is demonstrated in the following live example. Please check out the attached project and let me know about the result.

Regards,
Kostadin
Telerik