RadDatePicker lightweight Rendering in EditForm

[Tyler]

Hello,

 

I'm using a couple RadDatePickers in my UI. I have two that loads on pageload. They are rendering as lightweight normally. Then I have two more in my radGrid's Editform. they are set to render as lightweight as well but when I click on the edit button to open the edit form in the radgrid, all the dropdowns render inproperly. 

 

here is my RadGrid: 

<telerik:RadGrid ID="rgResults" runat="server"

                                           HeaderStyle-Font-Bold="true"

                                           AllowPaging="true" PageSize="10"

                                           OnItemCommand="rgResults_ItemCommand"

                                           OnNeedDataSource="rgResults_NeedDataSource"

                                           OnItemDataBound="rgResults_ItemDataBound"

                                           OnPreRender="rgResults_PreRender"

                                           AutoGenerateColumns="false">

                                           <ClientSettings AllowKeyboardNavigation="true" EnablePostBackOnRowClick="false">

                                               <Selecting AllowRowSelect="true" UseClientSelectColumnOnly="true"></Selecting>

                                               <ClientEvents OnRowDblClick="rowDblClickCollectionBreak" />

                                           </ClientSettings>

                                           <MasterTableView DataKeyNames="Accounts_Receivable_ID" InsertItemPageIndexAction="ShowItemOnCurrentPage" Font-Size="Smaller" CommandItemDisplay="Top">

                                               <HeaderStyle CssClass="TableHeader" />

                                               <AlternatingItemStyle BackColor="#DBDBDB" />

                                               <Columns>

                                                   <telerik:GridEditCommandColumn EditImageUrl="../Content/Images/checkGreen.png" />

                                                   <telerik:GridTemplateColumn UniqueName="commandColumn">

                                                       <ItemTemplate>

                                                           <asp:ImageButton ID="btnDelete" runat="server" CommandName="Delete" Height="30px" Width="30px" ToolTip="Delete" ImageUrl="~/Content/Images/minusImg.png" />

                                                       </ItemTemplate>

                                                   </telerik:GridTemplateColumn>

                                                   <telerik:GridBoundColumn HeaderText="Deposit Date" DataField="Deposited_Date" UniqueName="Deposited_Date" />

                                                   <telerik:GridBoundColumn HeaderText="Company Name" DataField="Company_Name" UniqueName="Company_Name" />

                                                   <telerik:GridBoundColumn HeaderText="Check Amount" DataField="Check_Amount" UniqueName="Check_Amount" />

                                                   <telerik:GridBoundColumn HeaderText="Check #" DataField="Check_Number" UniqueName="Check_Number" />

                                                   <telerik:GridBoundColumn HeaderText="Submitted" DataField="Submitted" UniqueName="Submitted" />

                                               </Columns>

                                               <EditFormSettings EditColumn-ButtonType="ImageButton" EditColumn-EditText="" EditColumn-EditImageUrl="../Content/Images/plus.png" EditFormType="Template">

                                                   <FormTemplate>

                                                       <div class="pad">

                                                           <div class="row">

                                                               <div class="col-lg-3">

                                                                   <label>Received Date: </label>

                                                               </div>

                                                               <div class="col-lg-3">

                                                                   <telerik:RadDatePicker RenderMode="Lightweight" runat="server" ID="ReceiveDate" Culture="en-US" Calendar-BackColor="Teal" DbSelectedDate='<%# Bind("Received_Date") %>' TabIndex="3" />

                                                               </div>

                                                           </div>

                                                           <div class="row">

                                                               <div class="col-lg-3">

                                                                   <label>Deposited Date: </label>

                                                               </div>

                                                               <div class="col-lg-3">

                                                                   <telerik:RadDatePicker RenderMode="Lightweight" runat="server" ID="DepositDate" DbSelectedDate='<%# Bind("Deposited_Date") %>' TabIndex="4" />

                                                               </div>

                                                           </div>

                                                           <div class="row">

                                                               <div class="col-lg-3">

                                                                   <label>Company Name:</label>

                                                               </div>

                                                               <div class="col-lg-3">

                                                                   <telerik:RadTextBox runat="server" ID="tbCompanyName" Text='<%# Bind("Company_Name") %>' TabIndex="5" />

                                                               </div>

                                                           </div>

                                                           <div class="row">

                                                               <div class="col-lg-3">

                                                                   <label>Check Amount:</label>

                                                               </div>

                                                               <div class="col-lg-3">

                                                                   <telerik:RadTextBox runat="server" ID="tbCheckAmount" Text='<%# Bind("Check_Amount") %>' TabIndex="6" />

                                                               </div>

                                                           </div>

                                                           <div class="row">

                                                               <div class="col-lg-3">

                                                                   <label>Check Number:</label>

                                                               </div>

                                                               <div class="col-lg-3">

                                                                   <telerik:RadTextBox runat="server" ID="tbCheckNum" Text='<%# Bind("Check_Number") %>' TabIndex="7" />

                                                               </div>

                                                           </div>

                                                           <div class="row">

                                                               <div class="col-lg-3">

                                                                   <label>Description:</label>

                                                               </div>

                                                               <div class="col-lg-3">

                                                                   <telerik:RadTextBox runat="server" ID="tbDesc" Text='<%# Bind("Description_") %>' TabIndex="8" />

                                                               </div>

                                                           </div>

                                                           <div class="row top-pad">

                                                               <div class="col-lg-2">

                                                                   <asp:Button ID="btnUpdate" CssClass="btn btn-block btn-success" Text='<%# (Container is GridEditFormInsertItem) ? "Add" : "Update" %>'

                                                                       runat="server" CommandName='<%# (Container is GridEditFormInsertItem) ? "PerformInsert" : "Update" %>'></asp:Button>

                                                               </div>

                                                               <div class="col-lg-2">

                                                                   <asp:Button ID="btnCancel" CssClass="btn btn-block btn-danger" Text="Cancel" runat="server" CausesValidation="False"

                                                                       CommandName="Cancel"></asp:Button>

                                                               </div>

                                                           </div>

                                                       </div>

                                                   </FormTemplate>

                                               </EditFormSettings>

                                           </MasterTableView>

                                           <PagerStyle Mode="NextPrevAndNumeric"></PagerStyle>

                                       </telerik:RadGrid>

 

Here is my two DatePickers on page load: 

<div class="row text-center">
                                <div class="col-lg-3">
                                    <div class="row">
                                        <div class="col-lg-3">
                                            <asp:Label runat="server" Text="From: " />
                                        </div>
                                        <div class="col-lg-3">
                                            <telerik:RadDatePicker RenderMode="Lightweight" ID="SearchByDateFrom" runat="server" Culture="en-US" />
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-3">
                                    <div class="row">
                                        <div class="col-lg-3">
                                            <asp:Label runat="server" Text="To: " />
                                        </div>
                                        <div class="col-lg-3">
                                            <telerik:RadDatePicker RenderMode="Lightweight" ID="SearchByDateTo" runat="server" Culture="en-US" />
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-3">
                                    <asp:Button class="btn btn-success btn-block" runat="server" OnClientClick="saveNewSearch()" OnClick="btnSearch_Click" type="button" Text="Search"></asp:Button>
                                </div>
                            </div>

[Tyler]

Not sure how to delete this but I figured out the issue. I had to render all my telerik controls as Lightweight to stop it from messing up the date pickers. If anyone can explain why this is I would appreciate it. 

 

thanks in advance.