DatePicker in Edit Template of Ajax Gridview

[Angie]

I've seen a couple other posts mentioning problems with using the DatePicker in an edit template, but I think it's hard to replicate.  The problem I'm having is that the date window does not open, it just adds a "#" to the end of the url.

Here is the setup (there is alot of nesting, so this is the hierarchy):

MasterPage.aspx
    TestPage.aspx (refers to master page)
           GridView.ascx (user control on test page)
                EditTemplate.ascx (user control used for edit template)  
                    The date picker is on the edit template control

If I remove the radajaxmanager, i.e., un-ajaxifiy the grid, it works fine.  But it does not work w/the ajax.

Also, if I put the gridview straight on a page rather than putting it in a user control, it works fine, but I need to have it on it's own user control.

It this a case of too many nestings?  Hopefully someone will be able to recreate it.  Thanks!

-Angie

[Konstantin Petkov]

Hello Angie,

The complexity of the application hierarchy does nothing with the DatePicker itself. AJAX-enabling the application however, depends on the naming containers. You can find useful information about that here.

Can you please post the AJAX settings and the relevant markup or code-behind? Have you added the DatePicker as updated control as well? Do you use Shared Calendar and if so, do you have it updated too?

Best wishes,
Konstantin Petkov
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Angie]

Hi Konstantin.  Yeah, I guess I'm not really sure how to setup the ajax settings for the datapicker within an edit template. 

Here is the relevant code.  This is actually a different grid than the one I originally asked about, but the setup (usercontrol/page/masterpage) is the same, only this one uses an inline template rather than a separate user control.  If it's just a matter of adding the correct AjaxSetting, that would be awesome. 

 <telerik:RadAjaxManager EnableAJAX="true" ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadGrid1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="Button1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

    <telerik:RadGrid  ID="RadGrid1" runat="server" Width="98%" OnNeedDataSource="RadGrid1_NeedDataSource"  GridLines="None" Skin="Web20"  >

    <MasterTableView  autogeneratecolumns="False" AllowFilteringByColumn="false" AllowSorting="true" DataKeyNames="course_id" CellPadding="3" CellSpacing="1"  CssClass="border"   >
        <HeaderStyle CssClass="linkHeader" />

        <EditFormSettings EditFormType="Template" >
            <PopUpSettings ScrollBars="None"></PopUpSettings>
            <FormTemplate>
                <table>
                    <tr>
                        <td><FM:LocalLiteral ID="LocalLiteral6" Key="StartDate" Colon="false" runat="server" EnableViewState="false" /></td>
                        <td><telerik:RadDatePicker runat="server" ID="dtEStartDate" Width="100px" Skin="Web20" /></td>
                        <td><FM:LocalLiteral ID="LocalLiteral1" Key="EndDate" Colon="false" runat="server" EnableViewState="false" /></td>
                        <td><telerik:RadDatePicker runat="server" ID="dtEEndDate" Width="100px" Skin="Web20"  /></td>
                    </tr>
                    <tr>
                        <td><FM:LocalLiteral ID="LocalLiteral2" Key="No Date Range" Colon="true" runat="server" EnableViewState="false" /></td>
                        <td colspan="3"><asp:CheckBox ID="cbEAll" runat="server" /></td>
                    </tr>
                    <tr>
                        <td><FM:LocalLiteral ID="LocalLiteral5" Key="Report Type" Colon="false" runat="server" EnableViewState="false" /></td>
                        <td>
                            <asp:DropDownList id="ddlESettings" runat="server" CssClass="boxSmall" Width="110px" >
                                <asp:ListItem Text="Optins Only" Value="1" Selected="True" />
                                <asp:ListItem Text="Optins and Stats" Value="2" />
                                <asp:ListItem Text="Full" Value="0" />
                            </asp:DropDownList>
                        </td>
                    </tr>
                </table>
                <CCWeb:HoverButton ID="btnUpdate" Key="Run Report" runat="server" ClassHover="ButtonGreyBlue" Class="ButtonBrightBlue" CommandName="Update"  BWidth="Medium" />
                <CCWeb:HoverButton ID="btnCancel" runat="server" Key="Cancel" ClassHover="ButtonGreyBlue" Class="ButtonBrightBlue" CommandName="Cancel" BWidth="Medium" CausesValidation="false"  />
            </FormTemplate>
        </EditFormSettings>

        <ItemStyle CssClass="itemText" />
        <AlternatingItemStyle CssClass="itemTextAlt" />

        <RowIndicatorColumn Visible="False">
        <HeaderStyle Width="20px"></HeaderStyle>
        </RowIndicatorColumn>

        <ExpandCollapseColumn Visible="False" Resizable="False">
        <HeaderStyle Width="20px"></HeaderStyle>
        </ExpandCollapseColumn>

        <Columns>
            <telerik:GridEditCommandColumn EditText="Run Report" UpdateText="Run">
            </telerik:GridEditCommandColumn>
            <telerik:GridBoundColumn DataField="course_name" DataType="System.String" ItemStyle-Width="200px"
                HeaderText="Course" SortExpression="course_name" UniqueName="course_name"
                AllowFiltering="False">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="company" DataType="System.String" ItemStyle-Width="200px"
                HeaderText="Sponsor" SortExpression="company" UniqueName="company"
                AllowFiltering="False">
                <ItemStyle Width="200px"></ItemStyle>
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="create_date" DataType="System.DateTime" ItemStyle-Width="90px" ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center"
                HeaderText="Create Date" SortExpression="create_date" UniqueName="create_date"  DataFormatString="{0:d}"
                AllowFiltering="False">
                <HeaderStyle HorizontalAlign="Center"></HeaderStyle>
                <ItemStyle HorizontalAlign="Center" Width="90px"></ItemStyle>
            </telerik:GridBoundColumn>
            <telerik:GridTemplateColumn HeaderText="Report" ItemStyle-Width="210px"
                SortExpression="Report" UniqueName="Report"
                AllowFiltering="False"  ItemStyle-CssClass="linkBGrid" >
                <ItemTemplate >
                    <%# BuildLink(Eval("report"))%>
                </ItemTemplate>
                <ItemStyle CssClass="linkBGrid" Width="210px"></ItemStyle>
            </telerik:GridTemplateColumn>
                </Columns>
            </MasterTableView>
        </telerik:RadGrid>

Thanks!

[Konstantin Petkov]

Hi Angie,

The setup appears to be correct since you've ajaxified/updated the Grid itself. There is no reason the DatePicker popup to fail displaying the Calendar.

I just realized you may work with an old version of the controls. Can you please download the latest Q1 2008 Service Pack released two weeks ago and labeled 2008.1.515 and give it a go? Please. let us know if it helps or if you need further assistance.

Regards,
Konstantin Petkov
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Philippe GRACA]

Hi
In my personal case, I'm using an user control to edit the grid.
This user control contains a RadDatePicker and it does not work expect if I had that in the Page that contains the grid

 

  <div style="display:none">
  <telerik:RadCalendar ID="RadCalendar1" runat="server" Visible="false" Width="0" Height="0">
  </telerik:RadCalendar>
  <telerik:RadDatePicker ID="RadDatePicker1" runat="server" Width="0" Height="0">
  </telerik:RadDatePicker>
  </div>

This seems to force the page to LOAD the required javascripts.

My two cents...
Philippe

[Pavel]

Hi Philippe,

I could not reproduce the erroneous behavior. Please find attached the sample page I created for testing. Give it a try and tell us what is different in your case.

Regards,
Pavel
the Telerik team

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