This is a migrated thread and some comments may be shown as answers.

Problem with finding Control inside EditFormSettings

1 Answer 140 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Ambuj
Top achievements
Rank 1
Ambuj asked on 21 Jun 2010, 12:56 PM

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> 
 

1 Answer, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 21 Jun 2010, 01:47 PM
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.
Tags
Grid
Asked by
Ambuj
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
Share this question
or