KendoUI Scheduler编辑事件中批量插入日程不显示问题求助

问题描述 #

自定义编辑模板的KendoUI Scheduler中，在edit事件绑定save回调批量插入多个日程时，数据源已同步到服务器，但Scheduler界面无法显示新增的日程；而外部按钮执行相同的数据源添加+刷新代码却能正常显示。

核心原因 #

save回调内scheduler.cancelEvent()与scheduler.refresh()的执行时机冲突，当前编辑状态的上下文干扰了界面的正常刷新逻辑，导致数据源变更无法同步到视图层。

解决方案 #

方案一：同步数据源后延迟刷新 #

先完成数据源的同步操作，再取消当前编辑事件，最后延迟执行刷新确保DOM状态更新：

this.one("save", function(e) { 
    e.preventDefault();  

    // 定义批量插入的日程数据
    var x1 = { 
        "start": new Date(2023,3,28,12,00,00),
        "end": new Date(2023,3,28,18,00,00), 
        "title": "x1", 
    };
    var x2 = { 
        "start": new Date(2023,3,29,12,00,00), 
        "end": new Date(2023,3,29,18,00,00), 
        "title": "x2", 
    };

    // 添加到数据源并同步到服务器
    schedulerDataSource.add(x1);
    schedulerDataSource.add(x2);
    schedulerDataSource.sync().then(function() {
        // 同步完成后取消当前编辑事件
        scheduler.cancelEvent();
        // 延迟刷新，确保编辑弹窗完全关闭后更新视图
        setTimeout(function() {
            scheduler.refresh();
        }, 100);
    });
});

方案二：先关闭编辑弹窗再处理数据源 #

直接关闭编辑弹窗，避免编辑状态干扰，再执行数据源操作和刷新：

this.one("save", function(e) { 
    e.preventDefault();  

    // 先关闭编辑弹窗，清除编辑上下文
    scheduler.close();

    var x1 = { 
        "start": new Date(2023,3,28,12,00,00),
        "end": new Date(2023,3,28,18,00,00), 
        "title": "x1", 
    };
    var x2 = { 
        "start": new Date(2023,3,29,12,00,00), 
        "end": new Date(2023,3,29,18,00,00), 
        "title": "x2", 
    };

    schedulerDataSource.add(x1);
    schedulerDataSource.add(x2);
    schedulerDataSource.sync().then(function() {
        scheduler.refresh();
    });
});

方案三：手动触发数据源变化事件 #

若数据源未自动触发change事件导致视图不更新，可手动触发该事件：

this.one("save", function(e) { 
    e.preventDefault();  

    var x1 = { 
        "start": new Date(2023,3,28,12,00,00),
        "end": new Date(2023,3,28,18,00,00), 
        "title": "x1", 
    };
    var x2 = { 
        "start": new Date(2023,3,29,12,00,00), 
        "end": new Date(2023,3,29,18,00,00), 
        "title": "x2", 
    };

    schedulerDataSource.add(x1);
    schedulerDataSource.add(x2);
    // 手动触发数据源变化，强制视图更新
    schedulerDataSource.trigger("change");
    
    scheduler.cancelEvent();
    scheduler.refresh();
});

额外注意事项 #

• 确认scheduler变量的引用是否正确，若this在save回调中指向Scheduler实例，可直接用this.cancelEvent()、this.refresh()代替全局变量，避免引用错误。
• 若数据源开启了autoSync，可省略手动调用sync()的步骤。

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