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();
}

Replicated when the ClickToOpen is enabled: 

protected void Page_Load(object sender, EventArgs e)
    {
        RadGrid1.HeaderContextMenu.ClickToOpen = true;
    }

WORKAROUND: Loading the following script under the script manager

<script>
    var original = Telerik.Web.UI.GridColumn.prototype._onContextMenuItemClicking;
    Telerik.Web.UI.GridColumn.prototype._onContextMenuItemClicking = function (sender, args) {
        original.call(this, sender, args);
                
        var item = args.get_item();
        var itemValue = item.get_value();
        if (itemValue == "FilterList" || itemValue == "FilterMenuContainer" ||
            itemValue == "AggregatesContainer" || itemValue == "FilterMenuParent" || itemValue == "ColumnsContainer" ||
            (Telerik.Web.UI.RadMenuItem.isInstanceOfType(item.get_parent()) && item.get_parent().get_value() == "ColumnsContainer")) {
            if (sender.get_clickToOpen()) {
                args.get_item().open();
            }
        }
    }
</script>

Issue #1. When the Grid is not having any records (i.e. when the grid is initialized for the first time), if we define the Detail Item Template than the item template is shown 10-11 times. 

Issue#2: When we have the pagination enabled in the grid and the records are fully filled on the first page and suppose the second page is half-filled with records, then in this scenario On the second page even the records of the first page are hidden but the data item template for those rows are visible which is not correct. Screenshot is attached.

Issue #3: The same scenario is happening when we searched the grid first with 10 records and then we search for 2 records, In this case also 8 records will be removed but there data item templates will still be visible on the grid.

With no filtering applied, the filter menu still highlights the filter-function defined in the CurrentFilterFunction property of the column.

I issue is replicated consistently with the following simple setup, when the page is scrolled so the grid is on the top and right-clicking the column, to open the menu 

<div style="height: 200px"></div>
<telerik:RadGrid ID="RadGrid2" runat="server" AllowFilteringByColumn="true" EnableHeaderContextMenu="true">
</telerik:RadGrid>

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        RadGrid2.DataSource = Enumerable.Range(1, 3).Select(x => new { ID = 1, Desc = "Some text" });
        RadGrid2.DataBind();
    }
</script>
<div style="height: 4000px"></div>

Hi,

Without using radFilter to setup multiple filters before applying RadGrid can only be filtered one column at a time. Can a button be added to the Grid when filtering is applied that when Clicked will filter the Grid based on all of the column filter selections that a user selects?

Thanks,

Hello @support!

Did you observe the behavior, that Firefox (v71.0 64bit) does not turn the rad grid into edit mode, whereas IE11, Edge, Chrome (v78) perfectly work ok on the same grid?

Clicking the edit stencil button only makes the two arrows below rotate for some seconds, but nothing happens. What could that be?

Video Demo is attached.

Thank you,
Alexander 

See online demo:

https://demos.telerik.com/aspnet-ajax/grid/examples/data-editing/batch-editing/defaultcs.aspx

Steps to reproduce (seen in Chrome and Edge):

- Click the "x" on the 2nd to last record on page 1 to mark it for deletion  (Click "OK" at the prompt)

- Click "Add new record" button

Observe:

 - the record marked for deletion moves up by one record (but fortunately it appears the correct record will actually get deleted upon Saving)

 - a blank new record is creating correctly

If you repeat this procedure but choose a different record for deletion you can see it is functioning correctly.

I am seeing the same behaviour in my own project.

.hasChanges() results in records flagged for Delete to not actually get deleted when .saveChanges() executes.

I found the same behaviour on a LiveDemo example that checks .hasChanges(): Grid - Binding to Telerik ClientDataSource

Steps to reproduce:

• Make any change to the first record, such as modifying the Contact Name.
• On the second record, Click the "x" under the DELETE column to mark it for delete.
• Click any column heading to sort.  (This calls a UserAction event handler that calls .hasChanges())
• Choose to Cancel at the popup prompt.
• Click "Save changes".
• Monitor the browser console, you will find that webservice UpdateCustomers is called,  but DeleteCustomers is not.

The SearchRow in RadGridView WinForms is extremely good.

https://docs.telerik.com/devtools/winforms/controls/gridview/rows/search-row 

How can we implement the same in ASP.Net Ajax RadGrid?

When page scrolling is enabled and scrolling down the page, the row context menu of RadGrid rows do not open at a correct position.

Demo: Video Recording

Testing conducted in Safari 13, MacOS

The column headings read by JAWS are not great. I see that the rendered table headings have an aria-label attributes, but the text of these labels appears to match the DataField attribute of the grid column. Unfortunately, the DataField is often not the same as the human readable text displayed on the column header. This provides an inconsistent and sometimes confusing experience for screen reader users.

For example, if my data field is named something like full_name_with_title, but my column heading is actually "Full Name," the user will hear fullunderlinenameunderlinewithunderlinetitle, but we'd like them to hear "Full Name". All those underlines are confusing.

It would be much better if Telerik used the HeaderText attribute of the column instead of the DataField attribute. This would ensure that the presentational text and not the internal column names were read to the user.

A temporary workaround can be using the following OnGridCreated handler:

function OnGridCreated(sender, args) {
    if (sender.get_enableAriaSupport()) {
        sender.get_masterTableView().get_columns().forEach(function (col) {
            var header = col.get_element();
            var headerText = (header.textContent || header.innerText).replace(/^\s+|\s+$/g, '');
            header.setAttribute("aria-label", headerText);
        })
    }
}

If AJAX is enabled for the RadGrid and re-ordering its columns, a JavaScript exception is thrown: "uncaught typeerror: cannot set property 'control' of undefined"

If paging is disabled and the PageSize is set to less than the number of records bound to RadGrid, client item templates are not all rendered correctly.

Example:

If PageSize is 10, and records bound to Grid are 15, then the first 10 records will have templates rendered correctly, while the rest of 5 records will not.