Kendo Scheduler移动端无法编辑事件问题求助

你找的方向完全没错——移动端编辑失效的核心问题确实是没有正确初始化Kendo Mobile App，因为Scheduler的移动端交互（比如触摸触发编辑弹窗）依赖Mobile App来绑定触摸事件、管理视图状态。结合你的代码，我给你具体的修改步骤：

1. 恢复视图容器的data-role属性 #

你的代码里把data-role="view"注释掉了，这是Kendo Mobile App识别移动视图的关键标记，必须打开。修改后的容器代码如下：

<div id="main" class="flex-grow-1 flex-col" data-role="view">
    @(Html.Kendo().Scheduler<PlanningModel>()
        .Name("PlanningLitsScheduler")
        .Mobile(MobileMode.Auto)
        .WorkWeekStart(0)
        .WorkWeekEnd(6)
        .Date(DateTime.Now)
        .Height(441)
        .MajorTick(1440)
        .Editable(e => e.TemplateName("CustomViewTemplate"))
        .Group(group => group.Resources("Chambres").Orientation(SchedulerGroupOrientation.Vertical))
        .HtmlAttributes(new { style = "margin-bottom: 20px; border: 1px solid #FFB41D" })
        .Views(views => {
            views.CustomView("CustomWeekView");
            views.WeekView();
        })
        .Timezone("Etc/UTC")
        .GroupHeaderTemplate("<th class='k-slot-cell'>#:text#</th>")
        .Resources(resource => {
            resource.Add(m => m.ChambreId)
                .Title("Chambre")
                .Name("Chambres")
                .DataTextField("NumChambre")
                .DataValueField("Id")
                .BindTo(Model.ListChambres);
            resource.Add(m => m.LitId)
                .Title("Lit")
                .Name("Lits")
                .DataTextField("NumLit")
                .DataValueField("Id")
                .BindTo(Model.ListChambres[0].ListLits);
        })
        .Events(e => e
            .DataBound("DataBound")
            .Edit("Edit")
            .MoveStart("DisableDragDrop")
            .Navigate("Navigate")
            .Save("Save")
            .Add("Add"))
        .DataSource(d => d
            .Model(m => {
                m.Id(f => f.TaskID);
                m.Field(f => f.TaskID).DefaultValue(-1);
                m.Field(f => f.Title);
                m.Field(f => f.Description);
                m.Field(f => f.Start);
                m.Field(f => f.End);
                m.Field(f => f.RecurrenceRule);
                m.Field(f => f.RecurrenceID);
                m.Field(f => f.RecurrenceException);
                m.Field(f => f.OwnerID);
                m.Field(f => f.IsAllDay);
                m.Field(f => f.StartTimezone);
                m.Field(f => f.ChambreId);
                m.Field(f => f.EndTimezone);
                m.RecurrenceId(f => f.RecurrenceID);
            })
            .Batch(true)
            .Create(create => create.Action("CreateTachesScheduler", "Bloc").Data("GetDataLengthForCreate"))
            .Read("AjoutTachesScheduler", "Bloc")
            .Update(update => update.Action("UpdateTachesScheduler", "Bloc"))
        )
    )
</div>

2. 正确初始化Kendo Mobile App #

要确保Mobile App在DOM完全加载后初始化，避免找不到容器元素。修改你的JS代码，用$(document).ready()包裹初始化逻辑：

<script type="text/javascript">
    $(document).ready(function() {
        // 初始化Kendo Mobile App，绑定到带有data-role="view"的根容器
        let app = new kendo.mobile.Application($("#main"));
    });
</script>

关键注意点 #

• 视图容器唯一性：确保#main是页面上唯一的根视图容器，Mobile App会把这个容器作为移动视图的入口，绑定所有移动端交互事件。
• 自定义模板适配：检查你的CustomViewTemplate模板，确保里面的表单元素在移动端能正常响应触摸事件，避免因为模板元素的CSS或JS阻止了编辑触发。
• MobileMode参数：你设置的.Mobile(MobileMode.Auto)是正确的，它会自动检测设备类型切换移动端/桌面端模式，但前提是Mobile App已经初始化完成。

按照以上步骤修改后，Scheduler的移动端编辑功能应该就能正常工作了——点击日程事件时会触发编辑弹窗，和桌面端的交互逻辑保持一致。

内容的提问来源于stack exchange，提问作者Drallireeh