Display of GridDateTimeColumn, button hidden

4 posts, 0 answers
  1. steve gray
    steve gray avatar
    17 posts
    Member since:
    Mar 2006

    Posted 02 Feb 2018 Link to this post

    All:

    I have a standard GridDateTimeColumn in an ASP grid, the markup looks like this:

    <telerik:GridDateTimeColumn DataFormatString="{0:MM/dd/yyyy}" HeaderText="Start Date" DataField="StartDate"  UniqueName="StartDate"></telerik:GridDateTimeColumn>

    The problem is that the button for the date picker is half hidden. Should I just be forcing the column wider? The date box is half-empty, I hate to give it more space. Image attached. 

     

  2. Vessy
    Admin
    Vessy avatar
    1992 posts

    Posted 02 Feb 2018 Link to this post

    Hi steve,

    Please, make sure that all controls on the page are using one and the same render mode and there are no global styles applied. If none of these is the case, it will be really helpful if you send us the exact configuration we can reproduce the issue with, so we can seach the cause for the problem further.

    Regards,
    Vessy
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. steve gray
    steve gray avatar
    17 posts
    Member since:
    Mar 2006

    Posted 02 Feb 2018 in reply to Vessy Link to this post

    I was able to make it workable by grouping on one of the fields, so there was more space in the grid. Still, the popup button for the calendar is pretty far removed from the control. Image attached, and code below. 

     

    <%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site1.Master" CodeBehind="ProposalEdit.aspx.vb" Inherits="PMApp.ProposalEdit" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
     
    <asp:Content ID="Content3" ContentPlaceHolderID="head" runat="server">
        <script type="text/javascript">
            function BatchEditOpening(sender, args) {
                var row = args.get_row();
                var cell = args.get_cell();
                var tableView = args.get_tableView();
                var column = args.get_column();
                var columnUniqueName = args.get_columnUniqueName();
                var isCanceled = args.get_cancel();
                if (args.get_columnUniqueName() == "PACOSTCATID") {
                    args.set_cancel(true)
                };
                if (args.get_columnUniqueName() == "PACOSTCATNME") {
                    args.set_cancel(true)
                };
     
     
            }
     
            function StandardConfirm(sender, args) {
                args.set_cancel(!window.confirm("This process will DELETE all the activities and add new ones from the selected template. Are you sure?"));
            }
            function setHeight(sender, args) {
                window.setTimeout(function () {
                    sender._textBoxElement.style.height = "";
                    window.setTimeout(function () {
                        sender._textBoxElement.style.height = sender._textBoxElement.scrollHeight + "px";
                        sender._originalTextBoxCssText += "height: " + sender._textBoxElement.style.height + ";";
                    }, 1);
                }, 1);
            }
     
        </script>
    </asp:Content>
    <asp:Content ID="Content4" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
        <div class="ex1">
            <H1>Proposal Edit</H1>
     
                <asp:Label ID="lblError" runat="server" CssClass="error"></asp:Label>
                <table  class="normal" border="0" >
                    <tr>
                        <td>
                            <table border="0">
                                <colgroup>
                                    <col style="width:120px" />
                                    <col style="width:160px" />
                                    <col style="width:140px" />
                                    <col style="width:160px" />
                                </colgroup>
                                <tr>
                                    <td>Status</td>
                                    <td><telerik:RadTextBox ID="txtStatus" runat="server" Enabled="false"></telerik:RadTextBox></td>
                                    <td>Proposal Manager</td>
                                    <td><telerik:RadTextBox ID="txtProposalManager" runat="server" Enabled="false"></telerik:RadTextBox></td>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td></td>
                                    <td>Contract BD Manager</td>
                                    <td><telerik:RadTextBox ID="txtBDManager" runat="server" Enabled="false"></telerik:RadTextBox></td>
                                </tr>
                                <tr>
                                    <td>Customer ID</td>
                                    <td><telerik:RadTextBox ID="txtCustomerNumber" runat="server" Enabled="false"></telerik:RadTextBox></td>
                                    <td>Customer Name</td>
                                    <td><telerik:RadTextBox ID="txtCustomerName" runat="server" Enabled="false"></telerik:RadTextBox></td>
                                     
                                </tr>
                                <tr>
                                    <td>Proposal ID</td>
                                    <td><telerik:RadTextBox runat="server" ID="txtProposalID" Enabled="false"></telerik:RadTextBox></td>
                                    <td>Code Name</td>
                                    <td><telerik:RadTextBox runat="server" ID="txtCodeName" Enabled="false"></telerik:RadTextBox></td>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td></td>
                                    <td>Description</td>
                                    <td><telerik:RadTextBox runat="server" ID="txtDescription" Enabled="false"></telerik:RadTextBox></td>
                                </tr>
                                <tr>
                                    <td><a href="Default.aspx">Home</a></td>
                                    <td> (be sure to save)
     
                                    </td>
                                    <td>Total Retainer Amount</td>
                                    <td><telerik:RadNumericTextBox ID="ntbProposalRetainerAmount" runat="server" Value="0" Enabled="false" ></telerik:RadNumericTextBox></td>
                                </tr>
                            </table>
     
                        </td>
                        <td>
                            <table>
                                <tr>
                                    <td>Total Proposal Amount</td>
                                    <td><telerik:RadNumericTextBox ID="ntbProposalAmount" runat="server" Value="0" Enabled="false" ></telerik:RadNumericTextBox></td>
                                </tr>
                                <tr>
                                    <td>Proposal Start</td>
                                    <td><telerik:RadDatePicker ID="dpProposalStart" Calendar-FastNavigationSettings-EnableTodayButtonSelection="true" runat="server" Enabled="false"></telerik:RadDatePicker></td>
                                </tr>
                                <tr>
                                    <td>Proposal End</td>
                                    <td><telerik:RadDatePicker ID="dpProposalEnd" Calendar-FastNavigationSettings-EnableTodayButtonSelection="true" runat="server" Enabled="false"></telerik:RadDatePicker></td>
                                </tr>
                                <tr>
                                    <td>
                                    </td>
                                    <td><telerik:RadButton ID="btnNewProject" runat="server" Text="New Project"></telerik:RadButton>   </td>
                                </tr>
                                <tr>
                                    <td>
                                    </td>
                                    <td> </td>
                                </tr>
                                <tr>
                                    <td colspan="2">
                                       <b>Edit Project</b>
                                       <telerik:RadGrid ShowHeader="false" ID="RadGrid2" runat="server" AutoGenerateColumns="False"
                                            AllowPaging="False" Width="100%">
                   
                                            <MasterTableView DataKeyNames="paprojnumber">
                                                <Columns>
                                                    <telerik:GridButtonColumn CommandName="Edit" HeaderStyle-Width="70px" Text="Edit" UniqueName="DeleteColumn"></telerik:GridButtonColumn>
                                                    <telerik:GridBoundColumn ReadOnly="true" HeaderText="Project" DataField="paprojnumber2" UniqueName="paprojnumber2"  ></telerik:GridBoundColumn>
                                                </Columns>
                                            </MasterTableView>
     
                                       </telerik:RadGrid>
     
                                    </td>
                                </tr>
                            </table>
     
                        </td>
                    </tr>
                </table>
     
     
                <fieldset>
                    <legend>Add Cost Categories:</legend>
                    <table style="width:100%">
                        <tr>
                            <td>Project <telerik:RadComboBox ID="cboProject" width="120px" runat="server"></telerik:RadComboBox></td>
                            <td>
                                Add an activity: <telerik:RadComboBox ID="cboCostCat" width="200px" runat="server" CheckBoxes="true" EnableCheckAllItemsCheckBox="true" EmptyMessage="Choose an activity" ></telerik:RadComboBox>
                                <telerik:RadButton ID="btnAdd" runat="server" Text="Add"></telerik:RadButton>
                            </td>
                            <td>
                                Add a template:
                                <telerik:RadComboBox runat="server" AutoPostBack="true" EmptyMessage="Choose a Project Template" ID="cboProjectTemplate"></telerik:RadComboBox>
                                <telerik:RadButton runat="server" ID="btnReplaceLines" Text="Replace Lines" OnClientClicking="StandardConfirm"></telerik:RadButton>
                            </td>
                        </tr>
                    </table>
               </fieldset>
     
     
               <telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="False" ClientSettings-ClientEvents-OnBatchEditOpening="BatchEditOpening"
                   MasterTableView-CommandItemSettings-ShowAddNewRecordButton="false"
                   AllowPaging="False" Width="100%" RenderMode="Lightweight"
                    >
                   
                    <MasterTableView DataKeyNames="RowID,PACOSTCATID,PATU,paprojnumber" CommandItemDisplay="Top" EditMode="Batch">
                        <SortExpressions>
                            <telerik:GridSortExpression FieldName="paprojnumber"  />
                        </SortExpressions>
                        <GroupByExpressions>
                            <telerik:GridGroupByExpression>
                                <SelectFields>
                                    <telerik:GridGroupByField HeaderText="Project" FieldName="paprojnumber" ></telerik:GridGroupByField>
                                </SelectFields>
                                <GroupByFields >
                                    <telerik:GridGroupByField FieldName="paprojnumber"  />
                                </GroupByFields>
                            </telerik:GridGroupByExpression>
                        </GroupByExpressions>
                        <DetailItemTemplate>
                            <telerik:RadTextBox Width="400" runat="server" ID="txtBillingNotes" TextMode="MultiLine" Text='<%# Eval("billingnotes") %>'>
                                <ClientEvents OnLoad="setHeight" OnValueChanged="setHeight" />
                            </telerik:RadTextBox>
                        </DetailItemTemplate>
                        <Columns>
                            <telerik:GridButtonColumn CommandName="Delete" HeaderStyle-Width="70px" Text="Delete" UniqueName="DeleteColumn">
                            </telerik:GridButtonColumn>
                            <telerik:GridBoundColumn ReadOnly="true" HeaderText="Project" DataField="paprojnumber" UniqueName="paprojnumber"  ></telerik:GridBoundColumn>
                            <telerik:GridBoundColumn ReadOnly="true" HeaderText="Code" DataField="PACOSTCATID" UniqueName="PACOSTCATID"  ></telerik:GridBoundColumn>
                            <telerik:GridBoundColumn ReadOnly="true" HeaderText="Activity" DataField="PACOSTCATNME" UniqueName="PACOSTCATNME"  ></telerik:GridBoundColumn>
                            <telerik:GridNumericColumn HeaderText="Amount" DataField="Amount" KeepNotRoundedValue="true" AllowRounding="false"  NumericType="Currency" DecimalDigits="2"
                                UniqueName="Amount" DataFormatString="{0:c2}"   ></telerik:GridNumericColumn>
                            <telerik:GridDateTimeColumn  DataFormatString="{0:MM/dd/yyyy}" HeaderText="Start Date" DataField="StartDate"  UniqueName="StartDate"></telerik:GridDateTimeColumn>
                            <telerik:GridDateTimeColumn DataFormatString="{0:MM/dd/yyyy}" HeaderText="End Date" DataField="EndDate" UniqueName="EndDate"></telerik:GridDateTimeColumn>
                        </Columns>
                    </MasterTableView>
     
               </telerik:RadGrid>
                 
        </div>
    </asp:Content>
  4. Attila Antal
    Admin
    Attila Antal avatar
    303 posts

    Posted 07 Feb 2018 Link to this post

    Hi Steve,

    Try applying some width for the desired columns and see if that works for you. Grouping is not needed this time. (see attached sample)

    <telerik:GridDateTimeColumn  DataFormatString="{0:MM/dd/yyyy}" HeaderStyle-Width="200px" HeaderText="Start Date" DataField="StartDate"  UniqueName="StartDate"></telerik:GridDateTimeColumn>
    <telerik:GridDateTimeColumn DataFormatString="{0:MM/dd/yyyy}" HeaderStyle-Width="200px" HeaderText="End Date" DataField="EndDate" UniqueName="EndDate"></telerik:GridDateTimeColumn>

    Hope this will prove helpful.

    Kind regards,
    Attila Antal
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top