Editor within Grid Pop-Up Editor not working on iPad

[Jelly Master]

Hi there,

I have a kendo grid which uses a custom pop up editor which contains an editor control which works fine on desktop devices but on mobile devices the control is not focusable.

I have found that if I run this bit of javascript manually the ability to type appears to work:

$('#ControlName').data("kendoEditor").refresh()

I have done this via Chrome and emulating the ipad environment.

How can I get this control to work in the modal pop up window as my main user base is mobile based and I would prefer to use this control rather than an ugly text area control with no formatting capabilities.


Here is the grid code:

<div id="row8" class="row">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">Running log</h4>
</div>
<div class="panel-body">

@(
Html.Kendo().Grid(Model.RunningLogList)
.Name("RunningLogGrid")
.ToolBar(toolbar => toolbar.Create())
.Editable(edit =>
edit.TemplateName("RunningLogEditor").Mode(GridEditMode.PopUp)
.Window(window =>
{
window.HtmlAttributes(new { @class = "kendo-popup-editor" });
})

)
.Columns(
columns =>
{
columns.Bound(c => c.ID).Visible(false);
columns.Bound(c => c.Action);
columns.Bound(c => c.Information);
columns.Bound(c => c.Added);
columns.Bound(c => c.AddedBy);
columns.Command(c => c.Edit());

}
)
.DataSource(ds =>
ds.Ajax()

.Create(create => create.Action("CreateRunningLogEntry", "New", new { area = "CaseStudy", id = Model.ID.ToString() }).Data("sendAntiForgery"))
.Update(update => update.Action("UpdateRunningLogEntry", "New", new { area = "CaseStudy", id = Model.ID.ToString() }).Data("sendAntiForgery"))
.Events(events => events.Error("NewError_Handler"))
.Model(model =>
{
model.Id(m => m.ID);
model.Field(m => m.ID).DefaultValue(Guid.NewGuid());
model.Field(m => m.Added).DefaultValue(DateTime.Now);
model.Field(m => m.AddedBy).DefaultValue(string.Format("{0} {1}",
Common.Library.Claims.ClaimsHelper.ConvertClaim((System.Security.Claims.ClaimsPrincipal)User,System.Security.Claims.ClaimTypes.GivenName ),
Common.Library.Claims.ClaimsHelper.ConvertClaim((System.Security.Claims.ClaimsPrincipal)User,System.Security.Claims.ClaimTypes.Surname )
)
);
model.Field(m => m.StudentID).DefaultValue(Model.ID);
model.Field(m => m.Action);
model.Field(m => m.Information);


})

).Sortable().Pageable().Groupable().Filterable().HtmlAttributes(new { style = "min-height:300px;" }).Scrollable().ColumnMenu()


)


</div>
</div>


<div class="row">
<div class="btn-group pull-left">
<a href="@Url.Action("Index", "Home", new { area="CaseStudy"})" class="btn btn-warning"><span class="glyphicon glyphicon-backward"></span> Back</a>

</div>
<div class="btn-group pull-right">
<button class="btn btn-danger" type="reset"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
<button class="btn btn-primary" type="submit"><span class="glyphicon glyphicon-ok"></span> Save</button>
</div>

</div>
</div>



Here is the editor code:
@model InclusionManagerMVC.Models.StudentRunningLogModels.StudentRunningLogModel


@Html.HiddenFor(m => m.ID)


<div role="form" style="padding:10px;">



<div class="form-group">
@Html.LabelFor(m => m.Action)

@Html.TextBoxFor(m => m.Action, new { @class = "form-control", placeholder = "Enter action" })

</div>

<div class="form-group">
@Html.LabelFor(m => m.Information)

@Html.Kendo().EditorFor(m => m.Information).HtmlAttributes(new { style = "min-width:100%;" }).Deferred(false)

</div>


<div class="form-group">
@Html.LabelFor(m => m.Added)

@Html.Kendo().DateTimePickerFor(m => m.Added).HtmlAttributes(new { style = "min-width:100%;" })

</div>

<div class="form-group">
@Html.LabelFor(m => m.AddedBy)

@Html.TextBoxFor(m => m.AddedBy, new { @class = "form-control", placeholder = "Enter name of person adding..." })

</div>
<div class="help-block">
<p>There will be a section relating to referring the student to panel. Need to decide how this will be activated. </p>
</div>

@Html.Partial("_ErrorPanel")


</div>

[Alex Gyoshev]

Hello David,

We tried reproducing the problem with the latest release, but were unable to do so. Here is a snippet of what we tried. Please adjust it so that it shows the issue.

Regards,
Alex Gyoshev
Telerik

 

 

[Jelly Master]

Thanks for the response. I have tried your example on the ipad and it works as expected. But as you will notice I am using the MVC wrappers rather than pure html version.

So this is the code for the grid:

01.    <div id="row8" class="row">
02.        <div class="panel panel-default">
03.            <div class="panel-heading">
04.                <h4 class="panel-title">Running log</h4>
05.            </div>
06.            <div class="panel-body">
07.
08.                @(
09. Html.Kendo().Grid(Model.RunningLogList)
10.                        .Name("RunningLogGrid")
11.                        .ToolBar(toolbar => toolbar.Create())
12.                  .Editable(edit =>
13.    edit.TemplateName("RunningLogEditor").Mode(GridEditMode.PopUp)
14.     .Window(window =>
15.                       {
16.                           window.HtmlAttributes(new { @class = "kendo-popup-editor" });
17.
18.
19.
20.                       })
21.
22.)
23.                        .Columns(
24.                            columns =>
25.                            {
26.                                columns.Bound(c => c.ID).Visible(false);
27.                                columns.Bound(c => c.Action);
28.                                columns.Bound(c => c.Information);
29.                                columns.Bound(c => c.Added);
30.                                columns.Bound(c => c.AddedBy);
31.                                columns.Command(c => c.Edit());
32.
33.                            }
34.                        )
35.                        .DataSource(ds =>
36.                            ds.Ajax()
37.
38.            .Create(create => create.Action("CreateRunningLogEntry", "New", new { area = "CaseStudy", id = Model.ID.ToString() }).Data("sendAntiForgery"))
39.    .Update(update => update.Action("UpdateRunningLogEntry", "New", new { area = "CaseStudy", id = Model.ID.ToString() }).Data("sendAntiForgery"))
40.    .Events(events => events.Error("NewError_Handler"))
41.                            .Model(model =>
42.                        {
43.                            model.Id(m => m.ID);
44.                            model.Field(m => m.ID).DefaultValue(Guid.NewGuid());
45.                            model.Field(m => m.Added).DefaultValue(DateTime.Now);
46.                            model.Field(m => m.AddedBy).DefaultValue(string.Format("{0} {1}",
47.                                Common.Library.Claims.ClaimsHelper.ConvertClaim((System.Security.Claims.ClaimsPrincipal)User, System.Security.Claims.ClaimTypes.GivenName),
48.                                Common.Library.Claims.ClaimsHelper.ConvertClaim((System.Security.Claims.ClaimsPrincipal)User, System.Security.Claims.ClaimTypes.Surname)
49.                                )
50.                                );
51.                            model.Field(m => m.StudentID).DefaultValue(Model.ID);
52.                            model.Field(m => m.Action);
53.                            model.Field(m => m.Information);
54.
55.
56.                        })
57.
58.                ).Sortable().Pageable().Groupable().Filterable().HtmlAttributes(new { style = "min-height:300px;" }).Scrollable().ColumnMenu()
59.
60.
61.                )
62.
63.
64.            </div>
65.        </div>
66.
67.
68.        <div class="row">
69.            <div class="btn-group pull-left">
70.                <a href="@Url.Action("Index", "Home", new { area="CaseStudy"})" class="btn btn-warning"><span class="glyphicon glyphicon-backward"></span> Back</a>
71.
72.            </div>
73.            <div class="btn-group pull-right">
74.                <button class="btn btn-danger" type="reset"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
75.                <button class="btn btn-primary" type="submit"><span class="glyphicon glyphicon-ok"></span> Save</button>
76.            </div>
77.
78.        </div>
79.    </div>

Then the editor being used for this is:

01.@model InclusionManagerMVC.Models.StudentRunningLogModels.StudentRunningLogModel
02.
03.
[e-mail](m => m.ID)
05.
06.
07.<div role="form" style="padding:10px;">
08.
09.
10.
11.    <div class="form-group">
12.        @Html.LabelFor(m => m.Action)
13.
14.        @Html.TextBoxFor(m => m.Action, new { @class = "form-control", placeholder = "Enter action" })
15.
16.    </div>
17.
18.    <div class="form-group">
19.        @Html.LabelFor(m => m.Information)
20.
21.        @*@Html.Kendo().EditorFor(m => m.Information).HtmlAttributes(new { style = "min-width:100%;" }).Encode(false)*@
22.        @Html.TextAreaFor(m => m.Information,10,4, new { @class = "form-control" })
23.    </div>
24.
25.
26.    <div class="form-group">
27.        @Html.LabelFor(m => m.Added)
28.
29.        @Html.Kendo().DateTimePickerFor(m => m.Added).HtmlAttributes(new { style = "min-width:100%;" })
30.
31.    </div>
32.
33.    <div class="form-group">
34.        @Html.LabelFor(m => m.AddedBy)
35.
36.        @Html.TextBoxFor(m => m.AddedBy,  new { @class = "form-control", placeholder = "Enter name of person adding..." })
37.
38.    </div>
39.    <div class="help-block">
40.        <p>There will be a section relating to referring the student to panel. Need to decide how this will be activated. </p>
41.    </div>
42.
43.    @Html.Partial("_ErrorPanel")
44.
45.
46.</div>

Then this is the model class being used for the grid/editor

01.using System;
02.using System.Collections.Generic;
03.using System.ComponentModel.DataAnnotations;
04.using System.Linq;
05.using System.Text;
06.using System.Threading.Tasks;
07.using System.Web.Mvc;
08.
09.namespace InclusionManagerMVC.Models.StudentRunningLogModels
10.{
11.    public class StudentRunningLogModel
12.    {
13.        [Required]
14.        public Guid ID { get; set; }
15.
16.        [Required]
17.        public Guid StudentID { get; set; }
18.
19.        [Required]
20.        public string Action { get; set; }
21.
22.        [Required]
23.        [AllowHtml]
24.        [DataType(DataType.Html)]
25.        public string Information { get; set; }
26.
27.        [Required]
28.        public DateTime Added { get; set; }
29.
30.        [Required]
31.        public string AddedBy { get; set; }
32.    }
33.}

 If I use a desktop browser like chrome or IE 11 then the editor works fine but it would appear that something isn't being set on the editor with the mobile browser.

I am using bootstrap 3.1 on this website as well.

[Alex Gyoshev]

Hello David,

The MVC wrappers will simply configure the client-side objects in the same way -- I created the snippet because it is easier to share. Please check the Kendo UI version that you are using and try upgrading to the latest internal build. If the issue persists, please send a runnable project (either here or via a support thread) that we can inspect and assist with.

Regards,
Alex Gyoshev
Telerik

 

 

[Jelly Master]

I have provided a sample project via the support ticket I have open.

This is a stripped down implementation of the sample that I have provided before.

[Alex Gyoshev]

Hello David,

You need to refresh the editor iframe once the editor gets opened, with the grid edit event handler:

.Events(ev => ev
    .Edit("function () { $('[data-role=editor]').kendoEditor('refresh'); }")
)

This refreshes the editor iframe and enables back the editing.

Regards,
Alex Gyoshev
Telerik

 

 

[Jelly Master]

Thanks for the speedy response Alex.

I will give it a go and let you know if I have any problems.


I assume the sample project helped to demo the issue.

Is this a known issue or just a quirk of the way that I was trying to use the control?

[Alex Gyoshev]

Indeed, we appreciate the demo project, as it clearly showed the issue.

This is more of a quirk about how the editor works. The default editing mode renders an iframe tag to sandbox the content from the surrounding page, but this yields a lot of problems when moving it around the DOM (which is what the window does).

An alternative approach is to use the inline editor (by setting .Tag("div") through the fluent API), but this results in different behavior -- the editor styles are inherited from the page, and its value needs to be extracted by manually calling the value() method.

Regards,
Alex Gyoshev
Telerik

 

 

[Jelly Master]

Thanks Alex for the help.

This has worked wonderfully.

Again thanks for the support and explanation of why this was occurring.