Kendo MVC Razor Grid on touch device, clicking out of editable column causes value to clear

[Stephen]

We have an HTML5 page, with a Kendo MVC Grid on it via Razor.  There is an editable column on the grid.  It does not have an editor template or anything special on it.  It is just a basic text column, which is editable(true).  When using a keyboard tab button, or a mouse, everything works fine.  If you use a touch device (phone / tablet) and leave the open cell via touch, the value you enter is cleared.

columns.Bound(p => p.Comment).Title("Comment").Width("120px");

One note:  if the column had a value, before you touch clicked into it, touch clicking out of the column doesn't clear the value.  If you touch click into a column with a value, then you add to the value, touch clicking out of the field using touch resets the value back to what it was.

So, clearly, it seems like the cell's save value event is not getting triggered when using touch to leave the cell.  This behavior isn't a problem when it is just a textbox in a form.  It just seems to happen when in an editable grid.

How can I make sure the updating event happens when using touch to leave the cell?

[Eyup]

Hi Stephen,

 

Thank you for writing to us.

In order to understand the reported behavior better, I have taken the following steps:

1. Opened this live sample:
https://demos.telerik.com/aspnet-mvc/grid/editing

2. Opened the F12 browser inspector on Chrome.

3. Switched to mobile device and selected Samsung S20 Ultra as a reference:

4. I changed the middle cell value to 15 and clicked outside the cell:

5. The value was modified properly and when I clicked on the Save Changes button it was correctly saved.

Can you instruct me any further step I might be skipping to reproduce the issue? Did I miss anything?

 

Regards,
Eyup
Progress Telerik

[Stephen]

Thank you for your response.  Your code looks similar to mine, from what I can tell.

Is there any chance this could be happening because of the older version of Telerik that I am on?  Maybe this is a bug they fixed in a later version or maybe there is something extra I need to do that isn't required on a newer version?

Here is the code for the grid:

@(Html.Kendo().Grid<InspectionReportChecklistItem>()
    .Name("inspectionreport_checklist_grid").AutoBind(false)
    .Resizable(resize => resize.Columns(true)).Scrollable(a => a.Height("auto")).Sortable()
    .Columns(columns =>
    {
        columns.Bound(p => p.InspectionAreaDescription).Title("Area").Width("120px").Hidden(true).ClientGroupHeaderTemplate("#=value == null ? '' : 'Area: ' + value#");
        columns.Bound(p => p.IsChecked).Title("Answer").Width("80px").ClientTemplate("#=completedTemplate(data)#");
        columns.Bound(p => p.Comment).Title("Comment").Width("120px");
        columns.Bound(p => p.QuestionDisplay).Title("Question").Width("200px");
    })
    .ToolBar(toolbar => toolbar.Template(@<text>@RenderInspectionReportChecklistItemToolBar()</text>))
    .Selectable(selectable => selectable.Mode(GridSelectionMode.Single).Type(GridSelectionType.Cell))
    .Editable(editabletop => editabletop.Enabled(Model.InspectionReportEdit).Mode(GridEditMode.InCell).DisplayDeleteConfirmation(false))
    .Events(events => events
        .DataBound("inspectionreport_checklist_databound")
        .Edit("inspectionreport_checklist_edit"))
    .DataSource(dataSource => dataSource.Ajax().Batch(true)
        .Sort(sort => sort.Add("OrderShown"))
        .Group(group => group.Add(p => p.InspectionAreaDescription))
        .Model(model =>
        {
            model.Id(key => key.InspectionReportChecklistItemId);
            model.Field(m => m.IsChecked).Editable(false);
        }))
)

[Eyup]

Hi Stephen,

I have already replied in the formal support ticket on the same matter. I suggest that we continue our technical conversation in the other thread.

[Caleb]

Hello, was any solution every found for this issue? I'm experiencing the same thing as well. I'm using an older version of the grid 2018.1.221.545. This issue can't be reproduced in a desktop browser since it doesn't produce the same behavior unless testing on a real iPhone. Thank you

[Stephen]

Caleb,

I did find a workaround for the issue, which does address the touch issue for phones and tablets.  It isn't a great situation if you have a lot of grid fields they have to fill out, but in our case they don't so it was acceptable.  Have the following function trigger when hitting the Enter key on your touch device after entering a value, it will close the cell without clearing the value and move to the next cell.  I hope this helps.

$("#mygridnamegoeshere").keypress(function(e) {
    var keyCode = e.keyCode || e.which;

    if (keyCode == 13) {
        var grid = $("#mygridnamegoeshere").data("kendoGrid");
        var nextCell = $(e.target.closest("td")).next();          
        grid.editCell(nextCell[0]);
    }
});

[Caleb]

Hi Stephen, thank you very much for the response. Your solution is almost perfect. :) I was hoping there would be a way to not have the user have to press the Enter key every time to save a value to the cell. The touching of another cell to save is what I'm after still. What version of the kendo grid are you using? Curious if this issue still exists in newer versions.

Thank you!

[Stephen]

We are back on 2019.2.619.  I know the problem doesn't exist in the latest version, but I don't know how far along you have to get before the problem goes away.  We plan on upgrading through all the releases, in order to get up to the current release, but that is going to take some time.  The hitting enter is definitely not ideal, but at least it moves you to the next cell, so it basically replaces the tab button as a key press.  So technically the same number of key presses, just not what the user expects to do.

[Caleb]

Yeah your solution is a good work around and I'm also going to start incrementally upgrading our application. I'm seeing if I can find a version just slightly more updated like a 2020 or 2021 version that will have the issue fixed. Going to the 2024 version is a pretty big change.

Thanks again for your help and if I find a version where it's fixed I'll update this discussion. I'll make a note so I don't forget!

[Stephen]

You are welcome, I will try to do the same, if I get upgraded to the point where the problem goes away.

[Caleb]

I found a version that fixes the issue. It's version 2020.1.114 of the Telerik UI for ASP.NET MVC sdk. It was a easy upgrade but the downside is that there is no wizard to assist in upgrading since I'm using VS 2022. I did it by hand but I just had to copy over the JS, CSS and DLL. Hopefully this version fixes the issue for you as well.