RadDatePicker lightweight Rendering in EditForm

2 posts, 0 answers
  1. Tyler
    Tyler avatar
    2 posts
    Member since:
    Sep 2017

    Posted 11 Sep 2017 Link to this post

    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>
  2. Tyler
    Tyler avatar
    2 posts
    Member since:
    Sep 2017

    Posted 11 Sep 2017 Link to this post

    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.

Back to Top