This is a migrated thread and some comments may be shown as answers.

Editor within Grid Pop-Up Editor not working on iPad

8 Answers 151 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Jelly Master
Top achievements
Rank 1
Jelly Master asked on 01 May 2014, 01:59 PM
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>

8 Answers, 1 is accepted

Sort by
0
Alex Gyoshev
Telerik team
answered on 02 May 2014, 08:06 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Jelly Master
Top achievements
Rank 1
answered on 02 May 2014, 08:50 AM
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. 
04.@Html.HiddenFor(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.












0
Alex Gyoshev
Telerik team
answered on 02 May 2014, 10:42 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Jelly Master
Top achievements
Rank 1
answered on 02 May 2014, 12:53 PM
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.

0
Alex Gyoshev
Telerik team
answered on 02 May 2014, 02:49 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Jelly Master
Top achievements
Rank 1
answered on 02 May 2014, 02:52 PM
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?


0
Alex Gyoshev
Telerik team
answered on 02 May 2014, 03:00 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Jelly Master
Top achievements
Rank 1
answered on 07 May 2014, 12:04 AM
Thanks Alex for the help.

This has worked wonderfully.

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

Tags
Editor
Asked by
Jelly Master
Top achievements
Rank 1
Answers by
Alex Gyoshev
Telerik team
Jelly Master
Top achievements
Rank 1
Share this question
or