[Solved] Issue With Grid, RadEditor and RadDateTimePicker

[Mike]

I have a grid on a page, and for the edit settings, I have it set to Template with my own built add/edit area.  In this area, I have a RadEditor and two RadDateTimePickers.  On my MasterPage, I have the Telerik ScriptManager with some JS files loaded.  When I try to add or edit an item for my grid, I am presented with my entry area BUT I am unable to select a date from either of the RadDateTimePickers.  The console shows "Uncaught TypeError: p.onEvent is not a function" in the Telerik.Web.UI.WebResource.axd.

My markup is this:

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <div class="grid-outline">
        <b>Alerts</b>
        <telerik:RadAjaxLoadingPanel runat="server" ID="radLpAlerts"></telerik:RadAjaxLoadingPanel>
        <telerik:RadGrid runat="server" ID="radAlerts" AllowPaging="True" AllowSorting="True" ShowHeader="True" GridLines="None"
            OnNeedDataSource="radAlerts_OnNeedDataSource" OnItemCommand="radAlerts_OnItemCommand" OnItemDataBound="radAlerts_OnItemDataBound"
            OnInsertCommand="radAlerts_OnInsertCommand" OnUpdateCommand="radAlerts_OnUpdateCommand" OnDeleteCommand="radAlerts_OnDeleteCommand">
            <ClientSettings AllowColumnsReorder="False" EnableRowHoverStyle="True" EnablePostBackOnRowClick="True">
                <Selecting AllowRowSelect="True"></Selecting>
                <Scrolling UseStaticHeaders="True"></Scrolling>
            </ClientSettings>
            <MasterTableView DataKeyNames="alert_id" AutoGenerateColumns="False" AllowMultiColumnSorting="True" EnableHeaderContextMenu="True"
                CommandItemDisplay="TopAndBottom" Height="100%">
                <NoRecordsTemplate>No Active Alerts.</NoRecordsTemplate>
                <CommandItemSettings ShowAddNewRecordButton="True" ShowCancelChangesButton="False" ShowSaveChangesButton="False" ShowRefreshButton="True" />
                <Columns>
                    <telerik:GridEditCommandColumn ButtonType="ImageButton" UniqueName="EditCommandColumn">
                        <HeaderStyle Width="1%"></HeaderStyle>
                        <ItemStyle VerticalAlign="Top" HorizontalAlign="Left" Width="1%"></ItemStyle>
                    </telerik:GridEditCommandColumn>
                    <telerik:GridButtonColumn ConfirmText="Deactivate this item?" ConfirmDialogType="RadWindow" ConfirmTitle="Deactivate" ButtonType="ImageButton"
                        CommandName="Delete" ConfirmDialogHeight="160px" ConfirmDialogWidth="250px" UniqueName="DeleteColumn">
                        <HeaderStyle Width="1%"></HeaderStyle>
                        <ItemStyle VerticalAlign="Top" Width="1%"></ItemStyle>
                    </telerik:GridButtonColumn>
                    <telerik:GridBoundColumn DataField="alert_id" HeaderText="ID" Visible="False"></telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="alert_text" HeaderText="Type" AutoPostBackOnFilter="True">
                        <HeaderStyle Width="50%"></HeaderStyle>
                        <ItemStyle VerticalAlign="Top" HorizontalAlign="Left"></ItemStyle>
                    </telerik:GridBoundColumn>
                    <telerik:GridDateTimeColumn DataField="start_date" HeaderText="Start Date" FilterControlWidth="80%" AutoPostBackOnFilter="True">
                        <HeaderStyle Width="10%"></HeaderStyle>
                        <ItemStyle VerticalAlign="Top" HorizontalAlign="Left"></ItemStyle>
                    </telerik:GridDateTimeColumn>
                    <telerik:GridDateTimeColumn DataField="end_date" HeaderText="End Date" FilterControlWidth="80%" AutoPostBackOnFilter="True">
                        <HeaderStyle Width="10%"></HeaderStyle>
                        <ItemStyle VerticalAlign="Top" HorizontalAlign="Left"></ItemStyle>
                    </telerik:GridDateTimeColumn>
                    <telerik:GridCheckBoxColumn DataField="inactive" HeaderText="Inactive" AutoPostBackOnFilter="True">
                        <HeaderStyle Width="5%"></HeaderStyle>
                        <ItemStyle VerticalAlign="Top" HorizontalAlign="Left" Width="5%"></ItemStyle>
                    </telerik:GridCheckBoxColumn>
                </Columns>
                <EditFormSettings EditFormType="Template">
                    <EditColumn UniqueName="alert_id"></EditColumn>
                    <FormTemplate>
                        <table class="editTable">
                            <tr>
                                <td style="width: 50%;">
                                    <telerik:RadEditor runat="server" ID="radAlertText" RegisterWithScriptManager="True" EnableResize="True" Width="100%"></telerik:RadEditor>
                                    <asp:RequiredFieldValidator runat="server" ID="rvAlertText" ControlToValidate="radAlertText" ErrorMessage="Please enter alert text"
                                        Display="Dynamic">*</asp:RequiredFieldValidator>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <telerik:RadDateTimePicker runat="server" ID="radAlertStartDateTime" Width="90%">
                                        <Calendar>
                                            <SpecialDays>
                                                <telerik:RadCalendarDay Repeatable="Today">
                                                    <ItemStyle BackColor="LightGray" Font-Bold="True" BorderStyle="Solid" BorderColor="Black" BorderWidth="1px"></ItemStyle>
                                                </telerik:RadCalendarDay>
                                            </SpecialDays>
                                        </Calendar>
                                        <TimeView Interval="00:15:00" Columns="6"></TimeView>
                                        <DateInput DisplayDateFormat="yyyy-MM-dd h:mm tt" DateFormat="yyyy-MM-dd h:mm tt" EmptyMessage="Alert Start Date/Time"></DateInput>
                                    </telerik:RadDateTimePicker>
                                    <asp:RequiredFieldValidator runat="server" ID="rvStartDate" ControlToValidate="radAlertStartDateTime" ErrorMessage="Please enter a Starting Date"
                                        Display="Dynamic">*</asp:RequiredFieldValidator>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <telerik:RadDateTimePicker runat="server" ID="radAlertEndDateTime" Width="90%">
                                        <Calendar>
                                            <SpecialDays>
                                                <telerik:RadCalendarDay Repeatable="Today">
                                                    <ItemStyle BackColor="LightGray" Font-Bold="True" BorderStyle="Solid" BorderColor="Black" BorderWidth="1px"></ItemStyle>
                                                </telerik:RadCalendarDay>
                                            </SpecialDays>
                                        </Calendar>
                                        <TimeView Interval="00:15:00" Columns="6"></TimeView>
                                        <DateInput DisplayDateFormat="yyyy-MM-dd h:mm tt" DateFormat="yyyy-MM-dd h:mm tt" EmptyMessage="Alert End Date/Time"></DateInput>
                                    </telerik:RadDateTimePicker>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:CheckBox runat="server" ID="cbInactive" Text="Inactive" Checked="False" />
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <telerik:RadSpell runat="server" ID="rsSpell" ControlsToCheck="txtGradeType"
                                        IsClientID="True" SpellCheckProvider="PhoneticProvider" />
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2"> </td>
                            </tr>
                            <tr>
                                <td colspan="2" style="text-align: left">
                                    <asp:Button runat="server" ID="btnUpdate" Text='<%# (Container is GridEditFormInsertItem) ? "Insert" : "Update" %>'
                                        CommandName='<%# (Container is GridEditFormInsertItem) ? "PerformInsert" : "Update" %>' />
                                    <asp:Button runat="server" ID="btnCancel" Text="Cancel" CommandName="Cancel" CausesValidation="False" />
                                </td>
                            </tr>
                        </table>
                    </FormTemplate>
                </EditFormSettings>
            </MasterTableView>
        </telerik:RadGrid>
    </div>
</asp:Content>

 

 Is there something I have to do to get the controls to play nice on the page?

 

 

[Kostadin]

Hi Mike,

I would suggest you to disable the AJAX and check for a server side exception. Most probably the error is on the server but the AJAX blocks it and you see a client one.
Additionally you can disable all client side functionalities and check whether the issue remains.

Regards,
Kostadin
Telerik