Rad Date Picker In Rad Grid Not Displayed Correctly

5 posts, 1 answers
  1. Tracy
    Tracy avatar
    118 posts
    Member since:
    Nov 2010

    Posted 05 Feb 2013 Link to this post

    Hi,

    I have a rad grid with a rad date picker inside the edit item template.  The problem is that the calendar for the rad date picker does not show correctly.  See attached screen shot.  I have a RadAjaxManager on the page and when I remove it the calendar is displayed correctly but I need to keep the RadAjaxManager.

    I had this same problem using a text box and calendar extender but was not able to get it to work correctly either.

    I created a simple sample page with just a date field in the  grid to demonstrate the problem.   There is nothing in the code behind.
    I am using version 2012.3.1205.35 of the rad controls.

    Any help would be appreciated.

    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WBF Rad Grid DatePicker.aspx.vb" Inherits="IPS_Gateway.WBF_Rad_Grid_DatePicker" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
      <act:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" EnablePartialRendering="true" AsyncPostBackTimeOut="600"/>
        <telerik:RadWindowManager ID="rwmManager" runat="server"/>
        
        <telerik:RadAjaxManager ID="ajaxManager" runat="server" >   
                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="rgvMainGrid"   >
                        <UpdatedControls>                    
                            <telerik:AjaxUpdatedControl ControlID="rgvMainGrid" LoadingPanelID="loading" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                </AjaxSettings>
            </telerik:RadAjaxManager>
            
            <telerik:RadAjaxLoadingPanel ID="loading" runat="server" Skin="Telerik"  EnableEmbeddedSkins="true" />
            <asp:SqlDataSource ID="SQLDS_ProjectMilestones"     runat="server"  ConnectionString="<%$ ConnectionStrings:IPSDataConnectionString %>" SelectCommandType="StoredProcedure" SelectCommand="[Project].[DSP_Milestones-Sel-Ins-Upd-Del]" />
          
                <telerik:RadGrid ID="rgvMainGrid"        runat="server"  DataSourceID="SQLDS_ProjectMilestones"
                                     EnableEmbeddedSkins="true"             Skin="Office2010Silver"             Height="370px"  Width="1230px"
                                     EnableViewState="true"                 AutoGenerateColumns="false"         AllowMultiRowSelection="false"      
                                     AllowAutomaticDeletes="false"          AllowAutomaticInserts="false"       AllowAutomaticUpdates="false"        EnableLinqExpressions="false"                                                                       
                                     AllowSorting="true"                    AllowPaging ="true"                 EnableAjaxSkinRendering="true">                      
                        <HeaderStyle Font-Bold="true" HorizontalAlign ="Center"  VerticalAlign="Middle" Wrap="false" font-size="10px"/>
                        <ItemStyle HorizontalAlign="Right"  />
                        <AlternatingItemStyle HorizontalAlign="right" />
                        <HeaderStyle HorizontalAlign="Center"  Width="40px" />    
                        <PagerStyle AlwaysVisible="true"    Mode="NextPrevNumericAndAdvanced" />
                        <EditItemStyle BackColor="LightBlue" />                          
                        <ClientSettings AllowColumnsReorder="true"   AllowDragToGroup="false"   AllowColumnHide="false"  EnablePostBackOnRowClick="false"  >                                          
                            <Selecting  AllowRowSelect="true"  />                               
                            <Scrolling  AllowScroll="True"          UseStaticHeaders="True"         SaveScrollPosition="true"       />
                        </ClientSettings>
                        <ExportSettings  HideStructureColumns="true"    ExportOnlyData="true"      Excel-Format="ExcelML"    IgnorePaging="true"              OpenInNewWindow="true"  />                        
                        <MasterTableView    DataSourceID="SQLDS_ProjectMilestones"  Name="MasterGrid"               PageSize="100"                        EnableNoRecordsTemplate="true"   ShowHeadersWhenNoRecords="true"   
                                            EnableViewState="true"                  AllowMultiColumnSorting="true"                    
                                            EditMode="InPlace"                      CommandItemDisplay="Top"        DataKeyNames="MilestoneUniqueId">
                         
                        <CommandItemTemplate>
                            <asp:Table ID="tblCommandTemplate" runat="server" Width="1230px" CellSpacing="0" CellPadding="0">
                                <asp:TableRow ID="trowCommandTemplate1" Height="25px" runat="server" style="display:block;"  >
                                    <asp:TableCell ID="tcell1" runat="server">
                                        <telerik:RadButton ID="rbtAdd"              runat="server" CommandName="InitInsert"       Skin="Transparent" Text="Add"     Icon-PrimaryIconURL="<%$ Resources:Images,AddRecord16%>"    style="position:absolute;left:10px;font-size:10px;"  ToolTip="Add New Record"     Visible='<%# rgvMainGrid.EditIndexes.Count=0 and Not rgvMainGrid.MasterTableView.IsItemInserted %>'   /> 
                                        <telerik:RadButton ID="rbtEdit"             runat="server" CommandName="EditSelected"     Skin="Transparent" Text="Edit"    Icon-PrimaryIconURL="<%$ Resources:Images,EditRecord16%>"   style="position:absolute;left:70px;font-size:12px;"  ToolTip="Edit Record"        Visible='<%# rgvMainGrid.EditIndexes.Count=0 and Not rgvMainGrid.MasterTableView.IsItemInserted %>' />  
                                        <telerik:RadButton ID="rbtDelete"           runat="server" CommandName="DeleteSelected"   Skin="Transparent" Text="Delete"  Icon-PrimaryIconURL="<%$ Resources:Images,DeleteRecord16%>" style="position:absolute;left:129px;font-size:12px;" ToolTip="Delete Record"      Visible='<%# rgvMainGrid.EditIndexes.Count=0 and Not rgvMainGrid.MasterTableView.IsItemInserted %>' /> 
                                        <telerik:RadButton ID="rbtCancel"           runat="server" CommandName="CancelAll"        Skin="Transparent" Text="Cancel"  Icon-PrimaryIconURL="<%$ Resources:Images,CancelRecord16%>" style="position:absolute;left:10px;font-size:12px;"  ToolTip="Cancel Add/Edit"    Visible='<%# rgvMainGrid.EditIndexes.Count > 0 Or rgvMainGrid.MasterTableView.IsItemInserted %>'     /> 
                                        <telerik:RadButton ID="rbtSaveNew"          runat="server" CommandName="PerformInsert"    Skin="Transparent" Text="Save"    Icon-PrimaryIconURL="<%$ Resources:Images,SaveRecord16%>"   style="position:absolute;left:80px;font-size:12px;"  ToolTip="Save New Record"    Visible='<%# rgvMainGrid.MasterTableView.IsItemInserted%>'                                           />  
                                        <telerik:RadButton ID="rbtSave"             runat="server" CommandName="UpdateEdited"     Skin="Transparent" Text="Save"    Icon-PrimaryIconURL="<%$ Resources:Images,SaveRecord16%>"   style="position:absolute;left:80px;font-size:12px;"  ToolTip="Save Edited Record" Visible='<%# rgvMainGrid.EditIndexes.Count > 0 AND Not rgvMainGrid.MasterTableView.IsItemInserted%>'/> 
                                    </asp:TableCell>
                                </asp:TableRow>
                            </asp:Table>
                        </CommandItemTemplate>
                        <NoRecordsTemplate> <div>There are no records to display. </div></NoRecordsTemplate>
                                <Columns>  
                                <telerik:GridTemplateColumn     UniqueName="gtcMilestoneDate"       DataField="MilestoneDate"       HeaderText="Date"       HeaderStyle-Width="90px"  HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center">
                                    <ItemTemplate>
                                        <asp:Label ID="lblMilestoneDate"      runat="server"  Text='<%# Bind("MilestoneDate", "{0:MM-dd-yy}" ) %>'   />
                                    </ItemTemplate>
                                    <EditItemTemplate>
                                                <telerik:RadDatePicker ID = "rdpEditMilestoneDate"         runat="server" Width="85px"  EnableEmbeddedSkins="true" Skin="Telerik" DbSelectedDate='<%# Bind("MilestoneDate") %>'   DatePopupButton-Visible="false"  ShowPopupOnFocus="true"  ></telerik:RadDatePicker>
                                    </EditItemTemplate>
                                    <InsertItemTemplate>
                                                <telerik:RadDatePicker ID = "rdpInsertMilestoneDate"         runat="server" Width="95px"   DatePopupButton-Visible="false" ShowPopupOnFocus="true" ></telerik:RadDatePicker>
                                    </InsertItemTemplate>
                                 </telerik:GridTemplateColumn>
                            </Columns>         
                        </MasterTableView>
                    </telerik:RadGrid>
        
        </form>
    </body>
    </html>


  2. Kostadin
    Admin
    Kostadin avatar
    1708 posts

    Posted 08 Feb 2013 Link to this post

    Hi Tracy,

    I was not able to reproduce the issue. I prepared a small runnable sample based on your code and attached it to this thread. Could you please give it a try and let me know how it differs from your real setup?

    All the best,
    Kostadin
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Tracy
    Tracy avatar
    118 posts
    Member since:
    Nov 2010

    Posted 15 Feb 2013 Link to this post

    Hi Kostadin,

    The difference between your example and mine is that I am using a command item template.  If I remove the command item template from my code then the calendar displays correctly.

    Can you try your example using a command item template.

    Thank You
    Tracy
  5. Answer
    Kostadin
    Admin
    Kostadin avatar
    1708 posts

    Posted 20 Feb 2013 Link to this post

    Hi Tracy,

    I am still not able to reproduce the issue even if I am using a command item template. I modified the sample project from my previous post and attached it again. It would be best if you could replicate the issue in my sample or provide us with a small runnable project where the issue could be observed.

    Greetings,
    Kostadin
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  6. Tracy
    Tracy avatar
    118 posts
    Member since:
    Nov 2010

    Posted 20 Feb 2013 Link to this post

    Hi Kostadin,

    What your code has that mine doesn't is the RadStyleSheetManager.  Once I added this to my page the calendar displays correctly.

    Thanks for your help.
    Tracy
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017