Custom template for GridTemplateColumn

14 posts, 0 answers
  1. Alexander
    Alexander avatar
    152 posts
    Member since:
    Jun 2012

    Posted 14 Nov 2010 Link to this post

    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!

  2. Alexander
    Alexander avatar
    152 posts
    Member since:
    Jun 2012

    Posted 17 Nov 2010 Link to this post

    I gave up. I created additional control to put into ItemTemplate. Will be digging into the problem with "binding" now...
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Daniel
    Admin
    Daniel avatar
    4943 posts

    Posted 18 Nov 2010 Link to this post

    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
    Browse the vast support resources we have to jumpstart your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  5. Alexander
    Alexander avatar
    152 posts
    Member since:
    Jun 2012

    Posted 22 Nov 2010 Link to this post

    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] ?
  6. Alexander
    Alexander avatar
    152 posts
    Member since:
    Jun 2012

    Posted 23 Nov 2010 Link to this post

    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 &nbsp; ! :-O

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

  7. Alexander
    Alexander avatar
    152 posts
    Member since:
    Jun 2012

    Posted 23 Nov 2010 Link to this post

    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 

  8. Alexander
    Alexander avatar
    152 posts
    Member since:
    Jun 2012

    Posted 23 Nov 2010 Link to this post

    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?

  9. Alexander
    Alexander avatar
    152 posts
    Member since:
    Jun 2012

    Posted 24 Nov 2010 Link to this post

    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!
  10. Alexander
    Alexander avatar
    152 posts
    Member since:
    Jun 2012

    Posted 24 Nov 2010 Link to this post

    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...
  11. Daniel
    Admin
    Daniel avatar
    4943 posts

    Posted 02 Dec 2010 Link to this post

    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
    Browse the vast support resources we have to jumpstart your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  12. Alexander
    Alexander avatar
    152 posts
    Member since:
    Jun 2012

    Posted 06 Dec 2010 Link to this post

    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.
  13. Alexander
    Alexander avatar
    152 posts
    Member since:
    Jun 2012

    Posted 07 Dec 2010 Link to this post

    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.
  14. Alexander
    Alexander avatar
    152 posts
    Member since:
    Jun 2012

    Posted 13 Dec 2010 Link to this post

    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.
  15. Bruno
    Bruno avatar
    105 posts
    Member since:
    Mar 2008

    Posted 14 Dec 2010 Link to this post

    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

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017