Problem with finding Control inside EditFormSettings

[Ambuj]

Hi,

I am using radGrid with CommandItem,with that I am using ASP.Net Ajax CalendarExtender with the text box,
but when I am trying to find the Textbox with javascript,It is returning Null,(Please look into Call and Call1 JavaScript function.)

Please look at the below code ,and check where I am wrong ? Error is there in 

 

 

//document.getElementById("textBoxEndMonthYear").value = target.date.format("MMM yyyy"); 
/document.getElementById("textBoxEndMonthYear") is returing null.

<%@ Page Language="C#" MasterPageFile="~/ReAPComplete.Master" AutoEventWireup="true"
    CodeBehind="ReleaseManagement.aspx.cs" Inherits="NFP.PPP.WebApp.ReleaseManagement"
    Title="Project Portfolio Prioritization" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"
    EnableViewState="true">

    <script type="text/javascript" language="javascript">

        function onCalendarShown() {
        //debugger;

            var cal = $find("calendar1");
            //Setting the default mode to month
            cal._switchMode("months", true);

            //Iterate every month Item and attach click event to it
            if (cal._monthsBody) {
                for (var i = 0; i < cal._monthsBody.rows.length; i++) {
                    var row = cal._monthsBody.rows[i];
                    for (var j = 0; j < row.cells.length; j++) {
                        Sys.UI.DomEvent.addHandler(row.cells[j].firstChild, "click", call);
                    }
                }
            }
        }

        function onCalendarHidden() {
//debugger;
            var cal = $find("calendar1");
            //Iterate every month Item and remove click event from it
            if (cal._monthsBody) {
                for (var i = 0; i < cal._monthsBody.rows.length; i++) {
                    var row = cal._monthsBody.rows[i];
                    for (var j = 0; j < row.cells.length; j++) {
                        Sys.UI.DomEvent.removeHandler(row.cells[j].firstChild, "click", call);
                    }
                }
            }

        }

        function call(eventElement) {
            // debugger;
            var target = eventElement.target;
            switch (target.mode) {
                case "month":
                    var cal = $find("calendar1");
                    cal._visibleDate = target.date; //target.date.format("MMM yyyy")
                   //document.getElementById("textBoxEndMonthYear").value = target.date.format("MMM yyyy");
                    cal.set_selectedDate(target.date);
                    cal._switchMonth(target.date);
                    cal._blur.post(true);
                    cal.raiseDateSelectionChanged();
                    break;
            }
        }

        function onCalendarShown1() {

            var cal = $find("calendar2");
            //Setting the default mode to month
            cal._switchMode("months", true);

            //Iterate every month Item and attach click event to it
            if (cal._monthsBody) {
                for (var i = 0; i < cal._monthsBody.rows.length; i++) {
                    var row = cal._monthsBody.rows[i];
                    for (var j = 0; j < row.cells.length; j++) {
                        Sys.UI.DomEvent.addHandler(row.cells[j].firstChild, "click", call1);
                    }
                }
            }
        }

        function onCalendarHidden1() {

            var cal = $find("calendar2");
            //Iterate every month Item and remove click event from it
            if (cal._monthsBody) {
                for (var i = 0; i < cal._monthsBody.rows.length; i++) {
                    var row = cal._monthsBody.rows[i];
                    for (var j = 0; j < row.cells.length; j++) {
                        Sys.UI.DomEvent.removeHandler(row.cells[j].firstChild, "click", call1);
                    }
                }
            }

        }

        function call1(eventElement) {
            // debugger;
            var target = eventElement.target;
            switch (target.mode) {
                case "month":
                    var cal = $find("calendar2");
                    cal._visibleDate = target.date; //target.date.format("MMM yyyy")
                    //document.getElementById("selectedDate").value = target.date.format("ddMMMyyyy");
                    //document.getElementById("textBoxEndMonthYear").value = target.date.format("MMM yyyy");
                    cal.set_selectedDate(target.date);
                    cal._switchMonth(target.date);
                    cal._blur.post(true);
                    cal.raiseDateSelectionChanged();
                    break;
            }
        }
    </script>

    <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1"
        EnableAJAX="true">
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" />
        <div style="padding-top: 20px; padding-left: 2%">
            <asp:HiddenField ID="hiddenFieldReleaseId" runat="server" />
            <asp:Label ID="label1" runat="server" Text="Release Management" Font-Bold="true"
                ForeColor="DarkBlue"></asp:Label>
            <telerik:RadGrid ID="radGridManageReleases" Width="800px" runat="server" OnUpdateCommand="radGridManageReleases_UpdateCommand"
                AllowAutomaticUpdates="true" AllowAutomaticDeletes="true" AllowAutomaticInserts="true"
                OnDeleteCommand="radGridManageReleases_DeleteCommand" AllowPaging="true" ItemStyle-HorizontalAlign="Left"
                AutoGenerateColumns="false" PagerStyle-AlwaysVisible="true" PagerStyle-Mode="NextPrevAndNumeric"
                ShowGroupPanel="True" GridLines="None" PageSize="10" GroupHeaderItemStyle-HorizontalAlign="Left"
                OnItemCommand="radGridManageReleases_ItemCommand" GroupHeaderItemStyle-Font-Bold="true"
                HeaderStyle-Font-Bold="true" OnNeedDataSource="radGridManageReleases_NeedDataSource"
                HeaderStyle-HorizontalAlign="Left">
                <MasterTableView EnableColumnsViewState="true" CommandItemDisplay="Top" Width="800px"
                    TableLayout="Fixed" DataKeyNames="ReleaseID, ReleaseName">
                    <Columns>
                        <telerik:GridBoundColumn DataField="ReleaseID" HeaderText="ReleaseID" UniqueName="Release ID"
                            Visible="false" Display="false">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="SerialNumber" HeaderText="S.No" UniqueName="SerialNumber"
                            Visible="true" Display="true">
                            <HeaderStyle Width="35px" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="ReleaseName" HeaderText="Release Name" Visible="true"
                            UniqueName="ReleaseName" Display="true">
                            <HeaderStyle Width="80px" />
                        </telerik:GridBoundColumn>
                        <telerik:GridTemplateColumn DataField="StartMonth" HeaderText="StartMonth" UniqueName="StartMonth"
                            Display="false" Visible="false">
                            <EditItemTemplate>
                                <asp:DropDownList ID="ddlStartMonth" Height="200px" runat="server" DataTextField="MonthName"
                                    DataValueField="MonthId" DataSource='<%# (months)  %>' SelectedValue='<%# Bind("StartMonth")%>' />
                            </EditItemTemplate>
                            <ItemTemplate>
                                <%# DataBinder.Eval(Container.DataItem, "StartMonth")%>
                            </ItemTemplate>
                        </telerik:GridTemplateColumn>
                        <telerik:GridTemplateColumn DataField="EndMonth" HeaderText="EndMonth" UniqueName="EndMonth"
                            Display="false" Visible="false">
                            <EditItemTemplate>
                                <asp:DropDownList ID="ddlEndMonth" Height="200px" runat="server" DataTextField="MonthName"
                                    DataValueField="MonthId" DataSource='<%# (months)  %>' SelectedValue='<%# Bind("EndMonth")%>' />
                            </EditItemTemplate>
                            <ItemTemplate>
                                <%# DataBinder.Eval(Container.DataItem, "EndMonth")%>
                            </ItemTemplate>
                        </telerik:GridTemplateColumn>
                        <telerik:GridBoundColumn DataField="StartMonthYear" HeaderText="Start Month" UniqueName="StartMonthYear"
                            Display="true">
                            <HeaderStyle Width="70px" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="EndMonthYear" HeaderText="End Month" UniqueName="EndMonthYear"
                            Display="true">
                            <HeaderStyle Width="70px" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="DeveloperWorkingHours" HeaderText="Developer Working Hours"
                            Visible="true" UniqueName="DeveloperWorkingHours" Display="true">
                            <HeaderStyle Width="110px" />
                            <ItemStyle HorizontalAlign="Center" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="QAWorkingHours" HeaderText="QA Working Hours"
                            Visible="true" UniqueName="QAWorkingHours" Display="true">
                            <HeaderStyle Width="90px" />
                            <ItemStyle HorizontalAlign="Center" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="TotalAvailableDevelopmentHrs" HeaderText="Total Available Development Hrs"
                            Visible="true" UniqueName="TotalAvailableDevelopmentHrs" Display="true">
                            <HeaderStyle Width="130px" />
                            <ItemStyle HorizontalAlign="Center" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="AssignedDevelopmentHrs" HeaderText="Assigned Development Hrs"
                            Visible="true" UniqueName="AssignedDevelopmentHrs" Display="true">
                            <HeaderStyle Width="100px" />
                            <ItemStyle HorizontalAlign="Center" />
                        </telerik:GridBoundColumn>
                        <telerik:GridTemplateColumn UniqueName="DevCapacity" Display="true" Visible="true">
                            <EditItemTemplate>
                            </EditItemTemplate>
                            <ItemTemplate>
                                <asp:LinkButton ID="lnkDevCapacity" CommandArgument='<%# Bind("ReleaseID")%>' runat="server"
                                    Style="color: blue" Text="View Dev Capacity" OnClick="lnkDevCapacity_Click"></asp:LinkButton>
                            </ItemTemplate>
                        </telerik:GridTemplateColumn>
                    </Columns>
                    <CommandItemTemplate>
                        <div style="padding: 5px 5px;">
                            <asp:LinkButton ID="LinkButton2" runat="server" CommandName="InitInsert" Visible='<%# !radGridManageReleases.MasterTableView.IsItemInserted %>'><img style="border:0px;vertical-align:middle;" alt="" src="Images/AddRecord.gif" />Add New</asp:LinkButton>&nbsp;&nbsp;
                            <asp:LinkButton ID="btnEditSelected" runat="server" CommandName="EditSelected" Visible='<%# radGridManageReleases.EditIndexes.Count == 0 %>'><img style="border:0px;vertical-align:middle;" alt="" src="Images/Edit.gif" />Edit</asp:LinkButton>&nbsp;&nbsp;
                            <asp:LinkButton ID="btnUpdateEdited" runat="server" CommandName="UpdateEdited" Visible='<%# radGridManageReleases.EditIndexes.Count > 0 %>'><img style="border:0px;vertical-align:middle;" alt="" src="Images/Update.gif" />Update</asp:LinkButton>&nbsp;&nbsp;
                            <asp:LinkButton ID="btnCancel" CausesValidation="false" runat="server" CommandName="CancelAll"
                                Visible='<%# radGridManageReleases.EditIndexes.Count > 0 || radGridManageReleases.MasterTableView.IsItemInserted %>'><img style="border:0px;vertical-align:middle;" alt="" src="Images/Cancel.gif" />Cancel</asp:LinkButton>&nbsp;&nbsp;
                            <asp:LinkButton ID="LinkButton1" OnClientClick="javascript:return confirm('Delete all selected customers?')"
                                runat="server" CommandName="DeleteSelected"><img style="border:0px;vertical-align:middle;" alt="" src="Images/Delete.gif" />Delete</asp:LinkButton>&nbsp;&nbsp;
                            <asp:LinkButton ID="LinkButtonAssign" runat="server" CommandName="AssignResources"><img style="border:0px;vertical-align:middle;" alt="Assign Resources" src="Images/Refresh.gif" />Allocate Resource</asp:LinkButton>&nbsp;&nbsp;
                            <asp:LinkButton ID="LinkButton4" CausesValidation="false" runat="server" CommandName="RebindGrid"><img style="border:0px;vertical-align:middle;" alt="" src="Images/Refresh.gif" />Refresh</asp:LinkButton>
                        </div>
                    </CommandItemTemplate>
                    <EditFormSettings EditFormType="Template">
                        <EditColumn UniqueName="EditColumn">
                        </EditColumn>
                        <FormTemplate>
                            <table id="tblGridEdit" runat="server" cellpadding="2" style="width: 100%; height: 100%;">
                                <tr>
                                    <td style="width: 20%" align="right">
                                        Release Name:&nbsp;
                                    </td>
                                    <td>
                                        <asp:TextBox ID="txtReleaseName" BorderWidth="1" Width="30%" Text='<%# Bind( "ReleaseName") %>'
                                            runat="server"></asp:TextBox>
                                        <asp:RequiredFieldValidator ID="rfvReleaseName" runat="server" ErrorMessage="*" ControlToValidate="txtReleaseName"
                                            SetFocusOnError="True"></asp:RequiredFieldValidator>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="width: 20%" align="right">
                                        Start Month and Year:
                                    </td>
                                    <td>
                                        <%--   <asp:DropDownList ID="ddlFromMonth" runat="server" SelectedValue='<%# Bind("StartMonth") %>'
                                            DataSource='<%# (months) %>' AppendDataBoundItems="True" DataTextField="MonthName"
                                            DataValueField="MonthId">
                                            <asp:ListItem Selected="True" Text="Select" Value=""></asp:ListItem>
                                        </asp:DropDownList>--%>
                                        <asp:TextBox ID="textBoxStartMonthYear" runat="server" Text='<%# Bind( "StartMonthYear") %>'></asp:TextBox>
                                        <cc1:CalendarExtender ID="calenderExtenderStartMonthYear" runat="server" OnClientHidden="onCalendarHidden"
                                            OnClientShown="onCalendarShown" BehaviorID="calendar1" Enabled="True" TargetControlID="textBoxStartMonthYear"
                                            Format="MMM yyyy">
                                        </cc1:CalendarExtender>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="width: 20%" align="right">
                                        End Month and Year:
                                    </td>
                                    <td>
                                        <%--  <asp:DropDownList ID="ddlToMonth" runat="server" SelectedValue='<%# Bind("EndMonth") %>'
                                            DataSource='<%# (months) %>' AppendDataBoundItems="True" DataTextField="MonthName"
                                            DataValueField="MonthId">
                                            <asp:ListItem Selected="True" Text="Select" Value=""></asp:ListItem>
                                        </asp:DropDownList>--%>
                                        <asp:TextBox ID="textBoxEndMonthYear" runat="server" Text='<%# Bind( "EndMonthYear") %>'></asp:TextBox>
                                        <cc1:CalendarExtender ID="calenderExtenderEndMonthYear" runat="server" OnClientHidden="onCalendarHidden1"
                                            OnClientShown="onCalendarShown1" BehaviorID="calendar2" Enabled="True" TargetControlID="textBoxEndMonthYear"
                                            Format="MMM yyyy">
                                        </cc1:CalendarExtender>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="width: 20%" align="right">
                                        Developer Working Hours:&nbsp;
                                    </td>
                                    <td>
                                        <asp:TextBox ID="txtDeveloperWorkingHours" BorderWidth="1" Width="30%" Text='<%# Bind( "DeveloperWorkingHours") %>'
                                            runat="server"></asp:TextBox>
                                        <asp:RequiredFieldValidator ID="rfvDeveloperWorkingHours" runat="server" ErrorMessage="*"
                                            ControlToValidate="txtDeveloperWorkingHours" SetFocusOnError="True" InitialValue=""></asp:RequiredFieldValidator>
                                        <asp:RegularExpressionValidator ID="revDeveloperWorkingHours" runat="server" ControlToValidate="txtDeveloperWorkingHours"
                                            SetFocusOnError="true" ValidationExpression="^[+]?\d*\.?\d*$" Text="Please enter vaild value."></asp:RegularExpressionValidator>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="width: 20%" align="right">
                                        QAWorkingHours:&nbsp;
                                    </td>
                                    <td>
                                        <asp:TextBox ID="txtQAWorkingHours" BorderWidth="1" Width="30%" Text='<%# Bind( "QAWorkingHours") %>'
                                            runat="server"></asp:TextBox>
                                        <asp:RequiredFieldValidator ID="rfvQAWorkingHours" runat="server" ErrorMessage="*"
                                            ControlToValidate="txtQAWorkingHours" SetFocusOnError="True" InitialValue=""></asp:RequiredFieldValidator>
                                        <asp:RegularExpressionValidator ID="revQAWorkingHours" runat="server" ControlToValidate="txtQAWorkingHours"
                                            SetFocusOnError="true" ValidationExpression="^[+]?\d*\.?\d*$" Text="Please enter vaild value."></asp:RegularExpressionValidator>
                                    </td>
                                </tr>
                            </table>
                            <asp:Button ID="btnUpdate" Text="Save" BorderWidth="1" CommandName="Update" runat="server" />
                            <asp:Button ID="btnCancel" CausesValidation="false" BorderWidth="1" CommandName="Cancel"
                                Text="Close" runat="server" />
                        </FormTemplate>
                    </EditFormSettings>
                </MasterTableView>
                <ClientSettings>
                    <Selecting AllowRowSelect="True" EnableDragToSelectRows="true" />
                    <Scrolling AllowScroll="true" FrozenColumnsCount="1" SaveScrollPosition="true" />
                </ClientSettings>
                <PagerStyle Mode="NextPrevNumericAndAdvanced" AlwaysVisible="True"></PagerStyle>
            </telerik:RadGrid>
        </div>
        <asp:Panel ID="PanelResources" runat="server" Style="display: none">
            <div id="divAssignResources" runat="server" style="padding-top: 40px; padding-left: 4%">
                <table>
                    <tr>
                        <td>
                            <asp:Label ID="labelReleaseName" Text="Release 10.1" runat="server" Font-Size="Small"></asp:Label>
                        </td>
                        <tr>
                            <td>
                                <asp:Label ID="labelModuleName" runat="server" Font-Size="Small" Text="Module Name"></asp:Label>
                                <telerik:RadComboBox ID="RadComboModule" runat="server" Width="30%" AutoPostBack="true"
                                    OnSelectedIndexChanged="RadComboModule_SelectedIndexChanged" AppendDataBoundItems="true">
                                    <Items>
                                        <telerik:RadComboBoxItem Text="Select" Selected="true" Value="" />
                                    </Items>
                                </telerik:RadComboBox>
                            </td>
                        </tr>
                    </tr>
                    <tr>
                        <td>
                            Available Resources: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            Allocated Resources:
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <telerik:RadListBox ID="RadListBoxResources" runat="server" Height="200px" Width="200px"
                                SelectionMode="Multiple" AllowTransfer="true" TransferToID="RadListBoxDestination">
                            </telerik:RadListBox>
                            <telerik:RadListBox runat="server" ID="RadListBoxDestination" Height="200px" Width="200px" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Button ID="btnSave" runat="server" Text="Save" BorderWidth="1" OnClick="btnSave_OnClick" />&nbsp;&nbsp;
                            <asp:Button ID="btnCancelAll" runat="server" Text="Cancel" BorderWidth="1" OnClick="btnCancelAll_OnClick" />
                        </td>
                    </tr>
                </table>
            </div>
        </asp:Panel>
    </telerik:RadAjaxPanel>
</asp:Content>

[Shinu]

Hello,

Checkout the following code library which demonstrates how to get a reference to the DOM element of a server-side control (placed in GridTemplateColumn) on the client using a global registry that keeps control ID's.
Accessing server controls in a grid template on the client

I hope this would help you in accessing the control from client side.

-Shinu.