Custom template for GridTemplateColumn

[Alexander]

Greetings.

I'd like to have some custom templates for my template column in addition to ItemTemplate, EditTemplate, etc.

So i inherited from GridTemplateColumn and addted ITemplate properties, for instance, ExportItemTemplate.

The question is HOW to use this in the code? For instance:

1.<MyGridTemplateColumn ...>
2.  <ExportItemTemplate>
3.    <asp:Label ID="Name" runat="server" />
4.  </ExportItemTemplate>
5.  <ItemTemplate>
6.    <asp:Label ID="Name" runat="server" />
7.  </ItemTemplate>
8.</MyGridTemplateColumn>

1.In c#:
2.[access controls in ItemTemplate only]
3.[access controls in ExportItemTemplate only]

And by the way! I want to use this templates in client-side binding!

[Alexander]

I gave up. I created additional control to put into ItemTemplate. Will be digging into the problem with "binding" now...

[Daniel]

Hello Alexander,

Please note that it is not possible to export RadGrid out-of-the-box when using client-side binding.
Export overview

Regards,
Daniel
the Telerik team

[Alexander]

Thanks! I will take this into account. But i can see that I still have problem with client-side binding itself.

So, currently the situation is:

custom grid with custom column types, including template column:

1.<B4Restore:DSGridTemplateColumn HeaderStyle-CssClass="GridHeaderGreen la" ItemStyle-CssClass="la" HeaderText="Name Template" SortExpression="Name" ExportFormats="excel,pdf">
2.<ItemTemplate>
3.    <B4Restore:ExportPlaceHolder runat="server" ExportFormats="pdf" ID="ExportPlaceHolderPdf"><asp:Label BindField="Name" runat="server" ID="labelPdfName" /><asp:Label BindField="LastName" runat="server" ID="labelPdfLastName" /></B4Restore:ExportPlaceHolder>
4.    <B4Restore:ExportPlaceHolder runat="server" ExportFormats="excel" ID="ExportPlaceHolderExcel"><asp:Label BindField="Name" runat="server" ID="labelExcelName" /></B4Restore:ExportPlaceHolder>
5.</ItemTemplate>
6.</B4Restore:DSGridTemplateColumn>

So the problem is only HOW in javascript rowbound event to get all controls inside ItemTemplate - it could be one or several labels, links, textboxs, whatever, in any combination, check their BindField attribute, if present, and evaluate their text, value, etc using args.get_dataItem()[BindField] ?

[Alexander]

Since nobody replies, I will go on. So I came up with such solution. In markup:

1.<Columns>
2.    <B4Restore:DSGridTemplateColumn HeaderStyle-CssClass="GridHeaderGreen la" ItemStyle-CssClass="la" HeaderText="Name Template" SortExpression="Name" ExportFormats="excel,pdf">
3.        <ItemTemplate>
4.            <B4Restore:ExportPlaceHolder runat="server" ExportFormats="pdf" ID="ExportPlaceHolderPdf"><asp:Label BindField="Name" runat="server" ID="labelPdfName" OnPreRender="labelPdfName_PreRender" /></B4Restore:ExportPlaceHolder>
5.            <B4Restore:ExportPlaceHolder runat="server" ExportFormats="excel" ID="ExportPlaceHolderExcel"><asp:HyperLink BindField="Name,Count" runat="server" ID="linkExcelName" OnPreRender="linkExcelName_PreRender" /></B4Restore:ExportPlaceHolder>
6.        </ItemTemplate>
7.    </B4Restore:DSGridTemplateColumn>
8.</Columns>

01.public void labelPdfName_PreRender(object sender, EventArgs e)
02.{
03.    var label = sender as Label;
04.    label.Text = "Hello, {name}!";
05.}
06.
07.public void linkExcelName_PreRender(object sender, EventArgs e)
08.{
09.    var hyperlink = sender as HyperLink;
10.    hyperlink.Text = "Hmm... let's have a look...";
11.    hyperlink.NavigateUrl = "http://www.google.com?name={name}&count={count}";
12.}

where {...} contains the field to bind (analog of Eval)

Then:

01.function DSGridView_RowDataBound(sender, args) {
02.    for (i = 0; i < args.get_item().get_element().cells.length; i++) {
03.        nestedElements = args.get_item().get_element().cells[i].getElementsByTagName('*');
04.        for (j = 0; j < nestedElements.length; j++) {
05.            if (nestedElements[j].getAttribute('BindField') == null) continue;
06.            bindFields = nestedElements[j].getAttribute('BindField').split(',');
07.            for (k = 0; k < bindFields.length; k++) {
08.                bindFieldPattern = new RegExp('\{' + bindFields[k] + '\}', 'gi');
09.                if (args.get_dataItem()[bindFields[k]] == null) continue;
10.                for (var attribute in nestedElements[j].attributes) {
11.                    attributeValue = nestedElements[j].getAttribute(attribute);
12.                    nestedElements[j].setAttribute(attribute, attributeValue.replace(bindFieldPattern, args.get_dataItem()[bindFields[k]]));
13.                }
14.            }
15.        }
16.    }
17.}

But suprisingly, I've discovered that

1.function DSGridView_RowCreated(sender, args) {
2.                    alert('in Created event : \n' + args.get_item().get_element().innerHTML);
3.}

returns what I want, i.e. SPAN and A html elements according to markup (label and hyperlink),

BUT the same alert in RowDataBound event returns   ! :-O

SO - something in your control spoils markup for the column... :(

[Alexander]

Corrected RowBound method. BUT it works only wtih telerik:GridTemplateColumn, when I inherit from this column - it does not because of mentioned above reason... :( However, I do have inherited telerik and I DO need inherited columns! I need custom attributes, etc...

01.function DSGridView_RowDataBound(sender, args) {
02.    for (i = 0; i < args.get_item().get_element().cells.length; i++) {
03.        nestedElements = args.get_item().get_element().cells[i].getElementsByTagName('*');
04.        for (j = 0; j < nestedElements.length; j++) {
05.            if (nestedElements[j].getAttribute('bindfield') == null) continue;
06.            bindFields = nestedElements[j].getAttribute('bindfield').split(',');
07.            for (k = 0; k < bindFields.length; k++) {
08.                bindFieldPattern = new RegExp('\{' + bindFields[k] + '\}', 'gi');
09.                if (args.get_dataItem()[bindFields[k]] == null) continue;
10.                for (l = 0; l < nestedElements[j].attributes.length; l++) {
11.                    if (nestedElements[j].attributes[l].name == 'bindfield') continue;
12.                    nestedElements[j].setAttribute(nestedElements[j].attributes[l].name, nestedElements[j].attributes[l].value.replace(bindFieldPattern, args.get_dataItem()[bindFields[k]]));
13.                }
14.                switch (nestedElements[j].tagName) {
15.                    case 'A':
16.                    case 'SPAN':
17.                    case 'DIV':
18.                    case 'LI':
19.                    case 'OPTION':
20.                    case 'P':
21.                    case 'PRE':
22.                    case 'TEXTAREA':
23.                    case 'TD':
24.                        nestedElements[j].innerHTML = nestedElements[j].innerHTML.replace(bindFieldPattern, args.get_dataItem()[bindFields[k]]);
25.                        break;
26.                }
27.            }
28.        }
29.    }
30.}

I also seem to discovere a bug!

If i use asp:label inside the column and I do have field with name 'Name' - no matter, which text I assign to it, it's rendered as a value of 'Name' data field from the corresponding row... When I replaced Name with Same - it looks ok 

[Alexander]

Discovered one more bug... When I am on next page (I use custom paging), itemtemplate content for get_item is from the first get_item on previous page :(

1.alert(args.get_item().get_element().innerHTML);

But get_dataItem is correct... How to fix this? What to do innerHTML be updated accordingly?

[Alexander]

Another bug. It turns that some other inherited columns are also not displayed properly. I've tried checkbox, button type... &nbsp is put in the cell instead of the correspoding control!

[Alexander]

Noticed: if i indicate "datafield" for template column - it IS displayed, but how it's displayed? It displays datafield value only, like a plain label, no matter what's actually inside the template... :(

The way is just to created additional field that would already aggregate everything I want to see... But it's so clumsy :(

As to other 'complex' column types - I did not manage to display them for now...
E.g.:

<telerik:GridButtonColumn ButtonType="PushButton" DataTextField="ClientName" CommandName="Show" UniqueName="ClientNameColumn" />

is displayed, but

<My:InheritedGridButtonColumn ButtonType="PushButton" DataTextField="ClientName" CommandName="Show" UniqueName="ClientNameColumn" />

- NOT.
Damn...

[Daniel]

Hello Alexander,

Since RadGrid transfers JSON data when bound on the client, if you have some kind of templates - GridTemplateColumn/ NestedViewTemplate - there is no proper way for populating the controls in these templates as they are templates. However, for the rows that are initially created on the server, RadGrid will manage to populate a control in GridTemplateColumn if the control in that ItemTemplate has ID set equal to the DataField property of that column.
Client-side binding help topic
Client-side binding specifics help topic

Best regards,
Daniel
the Telerik team

[Alexander]

Ok. But what i really don't understand - why it does not work for INHERITED template column?
I just inherited GridTemplateColumn, added some properties to it, that's it! But when I use it - there is no any template generated inside at all for ItemTemplate...Just nbsp. And the presence of ID=[DataField] in nested control does not help.

[Alexander]

Ok, I may workaround this. I can see, that innerHTML is still ok in RowCreated event, but is "spoiled" (set to nbsp) in RowDataBound event.
So what I want to do is to copy row data into array in RowCreated and restore it in RowDataBound. But i can't see any 'setter' methods, I could try changing innerHTML, but it will be slow for big amount of rows...

Addition: I really implemented this via storing innerHTML into my array in RowCreated event and changing innerHTML in RowDataBound event from it. I know it's not a robust and elegant solution. Please, provide me with a better way of doing this.

[Alexander]

Anybody there?

I was able to do this 'fix' with innerHTML, but in this case I have problems with server-side, for instance, when I do export.

Please provide me with information, how to make ItemTemplate work for CUSTOM template column, that is inherited from telerik:GridTemplateColumn, when working with client-side binding? Currently it does not work properly and I don't have idea why.

[Bruno]

Alex, i think you have to carefully examine this post. It will shed some light onto the usage of template columns when binding on the client.

http://www.telerik.com/community/forums/aspnet-ajax/grid/radgrid-client-side-binding-with-gridtemplatecolumn-and-labels.aspx