WebDataGrid: JavaScript でテンプレート列の要素を取得する

WebDataGrid のテンプレート列に配置されている要素を、JavaScript で取得する方法を紹介致します。

<script>
    function getTemplate() {
        var grid = $find("WebDataGrid1");
        var cell = grid.get_rows().get_row(2).get_cellByColumnKey('Template1');
        var cellEl = cell.get_element();
        var numericEditor = cellEl.children[1]; // テンプレート列内のコントロール
    }
</script>

<input id="Button1" type="button" value="button" onclick="getTemplate()" />

...

<ig:WebDataGrid ID="WebDataGrid1" runat="server" Height="350px" Width="700px"
    AutoGenerateColumns="False" DataKeyFields="ID">
    <Columns>
        ...
        <!-- テンプレート列 -->
        <ig:TemplateDataField Key="Template1"  Width="200px">
            <Header Text="Template1" />
            <ItemTemplate>
                <ig:WebNumericEditor ID="WebNumericEditor1" runat="server" Width="180px"
                    Value='<%# DataBinder.Eval(((Infragistics.Web.UI.TemplateContainer)Container).DataItem, "Value") %>'
                    ></ig:WebNumericEditor>
            </ItemTemplate>
        </ig:TemplateDataField>
    </Columns>
    ...
</ig:WebDataGrid>