Binding to webservice client side, GridTemplateColumn not binding

[Arni Gunnar Ragnarsson]

I am using the new awesome feature of the RadGrid to be able to bind to a webservice using ASP.NET AJAX + WS + RadGrid.

This is the definition of my grid:

    <telerik:RadGrid ID="RoundList" AutoGenerateColumns="false" Skin="Gray" runat="server">

        <MasterTableView TableLayout="Fixed" DataKeyNames="ID">

            <Columns>

                <telerik:GridBoundColumn DataField="ID" HeaderText="#" />

                <telerik:GridTemplateColumn HeaderText="Delete">

                    <ItemTemplate>

                        <a href="#" onclick="DeleteRow(<%#Eval("ID")%>);return false;">Delete</a>

                    </ItemTemplate>

                </telerik:GridTemplateColumn>

            </Columns>

        </MasterTableView>

        <ClientSettings>

            <ClientEvents OnCommand="function(){}" />

        </ClientSettings>

    </telerik:RadGrid>

The GridBoundColumn works fine, the ID shows up there, but in the GridTemplateColumn, the ID is blank.

Anyone know what I am doing wrong ??

[Vlad]

Hello,

Currently we don't have binding expressions for client-side data-binding and you can use OnRowDataBound event to populate controls client-side. Please check these examples:

http://www.telerik.com/DEMOS/ASPNET/Prometheus/Grid/Examples/Client/DataBinding/DefaultCS.aspx
the second column in this example is template column. You can use findControl() client-side method to find an ASP.NET AJAX Control:

function RadGrid1_RowDataBound(sender, args)
{
 var radTextBox1 = args.get_item().findControl("RadTextBox1");
 radTextBox1.set_value(args.get_dataItem()["LastName"]);
}

http://blogs.telerik.com/VladimirEnchev/Posts/08-07-24/Telerik_RadGrid_for_ASP_NET_AJAX_Q2_2008_client-side_edit_using_templates.aspx
in these examples you can check client-side helper method called getElement():

            function getElement(parent, id) {
                var children = parent.getElementsByTagName("*");
                for (var i = 0, l = children.length; i < l; i++) {
                    var child = children[i];
                    if (child.id.endsWith(id))
                        return child;
                }

                return null;
            }

<telerik:GridTemplateColumn HeaderText="Delete">

<ItemTemplate>

<a href="#" onclick="DeleteRow(<%#Eval("ID")%>);return false;">Delete</a>

</ItemTemplate>

</telerik:GridTemplateColumn>

function RadGrid1_RowDataBound(sender, args)
{
 var cell = args.get_item().get_cell("MyColumn");
 var link = cell.getElementsByTagName("a")[0]["onclick"] = String.format("DeleteRow('{0}');", args.get_dataItem()["ID"]);
}

Best wishes,
Vlad
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.