Unplanned
Last Updated: 03 Jun 2020 10:54 by ADMIN
Chris
Created on: 03 Jun 2020 10:23
Category: Grid
Type: Bug Report
1
When I use TimePicker in GridDateTimeColumn it works fine in a normal browser but fails on mobile with the following error "Value must be 00:00 or earlier"

Bug report

When I use TimePicker in GridDateTimeColumn it works fine in a normal browser but fails on mobile with the following error "Value must be 00:00 or earlier"

This works fine from Firefox, but when I use a mobile browser I get the following error "Value must be 00:00 or earlier" or "Value must be 12:00 AM or earlier".

 

Reproduction of the problem

 

Markup

<telerik:RadGrid ID="RGTimesheet" runat="server" OnNeedDataSource="RGTimesheet_NeedDataSource" RenderMode="Mobile"
    AllowAutomaticInserts="True" AllowAutomaticUpdates="True" AllowAutomaticDeletes="True"
    Skin="MetroTouch"
    Width="100%" AllowSorting="True" GroupPanelPosition="Top">
    <ClientSettings>
        <Scrolling AllowScroll="True" UseStaticHeaders="True"></Scrolling>
    </ClientSettings>
    <MasterTableView AutoGenerateColumns="False" CommandItemDisplay="Bottom" DataKeyNames="OrderID" ShowFooter="True">
        <Columns>
            <telerik:GridEditCommandColumn ButtonType="FontIconButton">
            </telerik:GridEditCommandColumn>
            <telerik:GridClientDeleteColumn ButtonType="FontIconButton">
            </telerik:GridClientDeleteColumn>

            <telerik:GridDateTimeColumn DataField="Start" DataType="System.TimeSpan" EditDataFormatString="hh:mm:ss tt" HeaderText="Start" SortExpression="Start" UniqueName="Start" PickerType="TimePicker">
            </telerik:GridDateTimeColumn>
            <telerik:GridDateTimeColumn DataField="Finish" DataType="System.TimeSpan" HeaderText="Finish" SortExpression="Finish" UniqueName="Finish" PickerType="TimePicker">
            </telerik:GridDateTimeColumn>

        </Columns>
        <EditFormSettings>
            <EditColumn UniqueName="EditCommandColumn1" ButtonType="PushButton">
            </EditColumn>
        </EditFormSettings>
    </MasterTableView>
</telerik:RadGrid>

 

C# - Markup

private DataTable OrdersTable()
{
    DataTable dt = new DataTable();

    dt.Columns.Add(new DataColumn("OrderID", typeof(int)));
    dt.Columns.Add(new DataColumn("Start", typeof(TimeSpan)));
    dt.Columns.Add(new DataColumn("Finish", typeof(TimeSpan)));

    dt.PrimaryKey = new DataColumn[] { dt.Columns["OrderID"] };

    for (int i = 0; i < 10; i++)
    {
        int index = i + 1;

        DataRow row = dt.NewRow();

        int hours = DateTime.Now.Hour;
        int minutes = DateTime.Now.Minute;
        int seconds = DateTime.Now.Second;

        row["OrderID"] = index;
        row["Start"] = new TimeSpan(hours, minutes, seconds);
        row["Finish"] = new TimeSpan(hours+index, minutes, seconds);

        dt.Rows.Add(row);
    }

    return dt;
}


protected void RGTimesheet_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
    RGTimesheet.DataSource = OrdersTable();
}

 

1 comment
ADMIN
Attila Antal
Posted on: 03 Jun 2020 10:54

Hi Chris,

Thank you for reporting this issue. 

For this case, we can offer the workaround of using GridTemplateColumns with RadTimePickers in it as follows:

<%--<telerik:GridDateTimeColumn DataField="Start" DataType="System.TimeSpan" EditDataFormatString="hh:mm:ss tt" HeaderText="Start" SortExpression="Start" UniqueName="Start" PickerType="TimePicker">
</telerik:GridDateTimeColumn>--%>
<%--<telerik:GridDateTimeColumn DataField="Finish" DataType="System.TimeSpan" HeaderText="Finish" SortExpression="Finish" UniqueName="Finish" PickerType="TimePicker">
</telerik:GridDateTimeColumn>--%>

<telerik:GridTemplateColumn HeaderText="Start" SortExpression="Start" UniqueName="Start">
    <ItemTemplate>
        <%# Eval("Start") %>
    </ItemTemplate>
    <EditItemTemplate>
        <telerik:RadTimePicker ID="RadTimePicker1" runat="server" Skin="MetroTouch" RenderMode="Mobile" SelectedTime='<%# Bind("Start") %>'></telerik:RadTimePicker>
    </EditItemTemplate>
</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="Finish" SortExpression="Finish" UniqueName="Finish">
    <ItemTemplate>
        <%# Eval("Finish") %>
    </ItemTemplate>
    <EditItemTemplate>
        <telerik:RadTimePicker ID="RadTimePicker2" runat="server" Skin="MetroTouch" RenderMode="Mobile" SelectedTime='<%# Bind("Finish") %>'></telerik:RadTimePicker>
    </EditItemTemplate>
</telerik:GridTemplateColumn>

 

Kind regards,
Attila Antal
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.