Display of GridDateTimeColumn, button hidden

[Steve Gray]

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. 

 

[Vessy]

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

[Steve Gray]

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>

[Attila Antal]

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