Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Mar 2013
    Posts
    16
    Thanks
    5
    Thanked 0 Times in 0 Posts

    jquery datetimepicker in a asp.net gridview - not aligned properly

    Hi

    I am using the datetimepicker in the gridview, the thing is, its not aligned properly, I want it to overlap on top not show it in the row itself. it makes the whole row bigger. how do I adjust the datetimepicker so that it overlaps into the next row.

  • #2
    Regular Coder Nerevarine's Avatar
    Join Date
    Jan 2013
    Location
    Phendrana Drifts
    Posts
    283
    Thanks
    0
    Thanked 17 Times in 17 Posts
    Blog Entries
    3
    We need to see code or have a link to your page in order to help you.
    Time kills us in our sleep and we watch it happen in our dreams. -K.K.
    THE END-ALL PROGRAMMING REFERENCE: CLICK HERE (Courtesy of Major Payne)
    My username was previously L0adOpt1c. :: Please read this before posting in the HTML/CSS forum.
    Validate your HTML here and your CSS here. :: Need basic HTML/CSS tutorials? Click here, don't post about it.

  • #3
    New Coder
    Join Date
    Mar 2013
    Posts
    16
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Hi,

    I have uploaded the pic here
    https://plus.google.com/photos/11437...13377492573762


    There are two rows..can you notice the calendar popping down..the rows height is so large, by right I have only made the height to about 50px.
    Last edited by cally0611; 03-21-2013 at 03:25 AM.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello cally0611,
    A picture shows us what's happening but gives us no clue know why or how to fix it. Like L0adOpt1c said, we'll need a link to the site or some code.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New Coder
    Join Date
    Mar 2013
    Posts
    16
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Oh ok, sorry for that..

    Basically I am using the jquery datetimepicker code from here
    http://trentrichardson.com/examples/timepicker/

    My aspx code - the textbox inside the gridview
    Code:
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="AddItem.aspx.cs" Inherits="AddItem" Debug="true" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <title>Add Item</title>
    <!-- Css location -->
    
    <link rel="stylesheet" href="Styles/design.css"/>
    <!-- Javascript location -->
    <link rel="stylesheet" href="Styles/jquery-ui.css" />
    <script type="text/javascript" src="Scripts/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="Scripts/jquery-ui.js"></script>
    <script type="text/javascript" src="Scripts/jquery-ui-timepicker-addon.js"></script>
    
    <script type="text/javascript" src="Scripts/functions.js"></script>
    
    
    
    
    
    
    
    
    
    </head>
    <body>
        <form id="form1" runat="server">
        <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
        <td width="80%" id="header"></td>
        </tr>
    
    
        <tr>
        <td width="80%" id="separator"></td>
        </tr>
    
         <tr>
        <td width="80%">
        
        <fieldset>
        <legend class="formatextfieldset"><b>Superior's Details</b></legend>
        <div class="formatextinsidelegend">
        
        <table width="100%" >
        <tr>
        <td width="30%">Immediate Superior</td>
        <td width="2%"></td>
        <td width="68%" align="left">
            <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
            </td>
    
    
        </tr>
        <tr>
        <td width="30%">Staff ID</td>
        <td width="2%">&nbsp;</td>
        <td width="68%" align="left">
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            </td>
    
    
        </tr>
        <tr>
        <td width="30%">Department</td>
        <td width="2%">&nbsp;</td>
        <td width="68%" align="left">
            <asp:DropDownList ID="DropDownList1" runat="server">
            </asp:DropDownList>
            </td>
    
    
        </tr>
        <tr>
        <td width="30%">Head of Department</td>
        <td width="2%">&nbsp;</td>
        <td width="68%" align="left">
            <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
            </td>
        </tr></table>
        </div></fieldset>
        </td>
        </tr>
    
    
        <tr>
            <td width="80%" class="firstrow">
        
        <fieldset>
        <legend class="formatextfieldset"><b>Subordinate's Details</b></legend>
            <div class="formatextinsidelegend">
            <table >
                </table>
                <!--add data dynamically -->
            
            <div>
            <asp:GridView ID="grvStudentDetails" runat="server" ShowFooter="True" AutoGenerateColumns="False"
            CellPadding="4" ForeColor="#000000" GridLines="None" OnRowDeleting="grvStudentDetails_RowDeleting"
            Width="100%" Style="text-align: left" onselectedindexchanged="grvStudentDetails_SelectedIndexChanged" RowStyle-CssClass="RowStyle"  
        AlternatingRowStyle-CssClass="AlternateRowStyle">
           
           
           <Columns>
         
           <asp:BoundField DataField="RowNumber" HeaderText="ID" />
           
            <%-- Start 0 column --%>
           <asp:TemplateField HeaderText="Staff ID" >
            <ItemTemplate>
            <asp:TextBox ID="staffIDtxt" runat="server" MaxLength="10" Width="100px" ></asp:TextBox>
           <asp:RequiredFieldValidator ID="validstaffIDtxt" runat="server" ControlToValidate="staffIDtxt"
            ErrorMessage="*" SetFocusOnError="True"></asp:RequiredFieldValidator>
           </ItemTemplate>
           </asp:TemplateField>
           <%-- End 0 column --%> 
           
           <%-- Start 1 column --%>
           <asp:TemplateField HeaderText="Staff Name">
          
            <ItemTemplate>
            <asp:TextBox ID="staffnametxt" runat="server" MaxLength="50"></asp:TextBox>
           <asp:RequiredFieldValidator ID="validstaffnametxt" runat="server" ControlToValidate="staffnametxt"
            ErrorMessage="*" SetFocusOnError="True"></asp:RequiredFieldValidator>
           </ItemTemplate>
           </asp:TemplateField>
           <%-- End 1 column --%> 
           
           <%-- Start 2 column --%>
           <asp:TemplateField HeaderText="Staff Email Address">
            <ItemTemplate>
            <asp:TextBox ID="staffemailtxt" runat="server" MaxLength="50"></asp:TextBox>
           <asp:RequiredFieldValidator ID="validstaffemailtxt" runat="server" ControlToValidate="staffemailtxt"
            ErrorMessage="*" SetFocusOnError="True"></asp:RequiredFieldValidator>
           </ItemTemplate>
           </asp:TemplateField>
           <%-- End 2 column --%> 
           
           
             <%-- Start 3 column --%>
           <asp:TemplateField HeaderText="From Date/Time">
            <ItemTemplate><div>
            <asp:TextBox ID="fromdtext" runat="server" MaxLength="50" Width="120px"></asp:TextBox></div>
           <asp:RequiredFieldValidator ID="validfromdtext" runat="server" ControlToValidate="fromdtext"
            ErrorMessage="*" SetFocusOnError="True"></asp:RequiredFieldValidator>
           </ItemTemplate>
           </asp:TemplateField>
           <%-- End 3 column --%> 
           
           
             <%-- Start 4th column --%>
         <asp:TemplateField HeaderText="To Date/Time">
            <ItemTemplate> <div> 
            <asp:TextBox ID="enddtext" runat="server" MaxLength="50" Width="120px" ontextchanged="endtime_TextChanged" AutoPostback="true"></asp:TextBox>
            
           <asp:RequiredFieldValidator ID="validenddtext" runat="server" ControlToValidate="enddtext"
            ErrorMessage="*" SetFocusOnError="True"></asp:RequiredFieldValidator></div>
           </ItemTemplate>
           </asp:TemplateField>
           <%-- End 4th column --%>            
                        
           <%-- Start 5th column --%>              
           <asp:TemplateField HeaderText="Description">
          <ItemTemplate>
          <asp:TextBox ID="desctext" runat="server" MaxLength="3" Width="100px" TextMode="MultiLine"></asp:TextBox>
         <asp:RequiredFieldValidator ID="validdesctext" runat="server" ControlToValidate="desctext" ErrorMessage="*" SetFocusOnError="True"></asp:RequiredFieldValidator>
           </ItemTemplate>
            </asp:TemplateField>
              <%-- End 5th column --%>               
                        
                        
          <%-- Start 6th column --%>                  
          <asp:TemplateField HeaderText="Project Code">
          <ItemTemplate>
          <asp:DropDownList ID="projcodetext" runat="server" Width="130px">
          <asp:ListItem Value="00012"></asp:ListItem>
                <asp:ListItem Value="00013"></asp:ListItem></asp:DropDownList>
          <asp:RequiredFieldValidator ID="validprojcodetext" runat="server" ControlToValidate="projcodetext" ErrorMessage="*" SetFocusOnError="True"></asp:RequiredFieldValidator>
          </ItemTemplate>
          </asp:TemplateField>
           <%-- End 6thcolumn --%>     
           
          <%-- Start 7th column --%>  
            <asp:TemplateField HeaderText="Day Type">
            <ItemTemplate>
            <asp:RadioButtonList ID="daytype" runat="server" RepeatDirection="Vertical">
            <asp:ListItem Value="N">Normal</asp:ListItem>
            <asp:ListItem Value="P">Public Holiday</asp:ListItem>
            <asp:ListItem Value="W">Weekend</asp:ListItem>
            </asp:RadioButtonList>
             <asp:RequiredFieldValidator ID="validdaytype" runat="server" ControlToValidate="daytype" ErrorMessage="*"></asp:RequiredFieldValidator>&nbsp;
             </ItemTemplate>
             </asp:TemplateField>
            <%-- End 7th column --%>   
            
             <%-- Start 8th column --%>
           <asp:TemplateField HeaderText="Total Hours">
            <ItemTemplate>
            <asp:TextBox ID="totalhourstxt" runat="server" MaxLength="2" Width="40px" ></asp:TextBox>
           <asp:RequiredFieldValidator ID="validtotalhourstxt" runat="server" ControlToValidate="totalhourstxt"
            ErrorMessage="*" SetFocusOnError="True"></asp:RequiredFieldValidator>
           </ItemTemplate>
           </asp:TemplateField>
           <%-- End 8th column --%> 
            
                   <%-- Start 9th column --%>
           <asp:TemplateField HeaderText="Meal Allowance(RM)">
            <ItemTemplate>
            <asp:TextBox ID="mealallowtxt" runat="server" MaxLength="4" Width="40px"></asp:TextBox>
           <asp:RequiredFieldValidator ID="validmealallowtxt" runat="server" ControlToValidate="mealallowtxt"
            ErrorMessage="*" SetFocusOnError="True"></asp:RequiredFieldValidator>
           </ItemTemplate>
           
           <%-- End 9th column --%> 
                
       <FooterStyle HorizontalAlign="Right" />
      <FooterTemplate>
                                <asp:Button ID="ButtonAdd" runat="server" Text="Add New Row" OnClick="ButtonAdd_Click" Height="20px" Width="100px" />
                            </FooterTemplate>
                        </asp:TemplateField>
                         <%-- Command Delete--%> 
       <asp:CommandField HeaderImageUrl="~/Images/trash_green.jpg" ShowDeleteButton="True" 
                    DeleteImageUrl="~/Images/close_button2.png" ControlStyle-Height="30px" ControlStyle-Width="30px" DeleteText="Delete Record" 
                    ItemStyle-Font-Size="8pt" ItemStyle-Width="30px" ButtonType="Image">
                    
                    
                    
            </asp:CommandField>
    
                    </Columns>
                    <RowStyle VerticalAlign="Top"/>
                    
                    <FooterStyle BackColor="green" Font-Bold="True" ForeColor="White" Height="10px" />
                    <RowStyle BackColor="#E0E0E0" />
                    <EditRowStyle BackColor="#2461BF" />
                    <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
                    <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
                    <HeaderStyle BackColor="green" Font-Bold="True" ForeColor="White" VerticalAlign="Middle"/>
                    <AlternatingRowStyle BackColor="White" />
                </asp:GridView>
                <br />
                <center>
                    <asp:Button ID="btnSave" runat="server" Text="Save Data" OnClick="btnSave_Click" />
                </center>
            </div>
        
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
        </div></fieldset>
        </td>
        </tr>
        </table>
        
        <div class="footer"><p>Copyright @ 2013</p></div>
        </form>
    </body>
    </html>
    and da css for the timepicker
    Code:
    /* css for timepicker */
    .ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
    .ui-timepicker-div dl { text-align: left; }
    .ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; }
    .ui-timepicker-div dl dd { margin: 0 10px 10px 65px; }
    .ui-timepicker-div td { font-size: 90%; }
    .ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }
    .ui-timepicker-rtl{ direction: rtl; }
    .ui-timepicker-rtl dl { text-align: right; }
    .ui-timepicker-rtl dl dd { margin: 0 65px 10px 10px; }
    the rest of the jquery files can be found here

    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
    <script type="text/javascript" src="Scripts/jquery-ui-timepicker-addon.js"></script>

    hope this helps.

  • #6
    New Coder
    Join Date
    Mar 2013
    Posts
    16
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Hi,
    I have solved it, this is how, you have to edit the css of the ui-datepicker.

    .ui-datepicker {
    /*width: 17em;*/
    padding: .2em .2em 0;
    display: none;
    /* workarounds */
    position: absolute;
    top: 0px;
    bottom: 0px;
    height: 290px ;
    padding: 0.2em 0.2em 0;
    width: 150px;

    }

    adding extra keyword for others who wanna display the datetimepicker in their gridview ; asp.net gridview, datetimepicker, datepicker, rows.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •