在Kendo Scheduler中使用部分View

时间:2014-12-11 07:06:45

标签: asp.net-mvc kendo-ui kendo-scheduler

我想将部分视图用作Kendo Scheduler的自定义编辑器。

我知道我们可以将HTML代码用作自定义编辑器模板的字符串。

将部分视图用作自定义编辑器模板我正在尝试像::

这样的东西
.Editable(x=>x.Template(@Html.Partial('PartialViewEditor')))

但这是不可接受的。 如何将我的部分视图用作Kendo编辑器模板?在此先感谢。

2 个答案:

答案 0 :(得分:0)

试试这个:

.Editable(x=>x.Template("#= getCustomTemplate() #")


<script> 
function getCustomTemplate() 
{
    var html = ''; //design your HTML here and treat this script like your partial view

    return html;
} 
</script>

答案 1 :(得分:0)

我找到了一种与Kendo Scheduler一起使用局部视图的替代方法。 您可以使用.Editable(x=>x.Template("#= getCustomTemplate() #"),但这将使用Kendo Scheduler Editor的默认绑定模板。

但是我希望使用我自己的部分视图和所有绑定。 所以我决定通过以下步骤来实现它:\

步骤1)使用Kendo调度程序的编辑事件作为::

 .Events(e =>
              {
                   e.Edit("EventScheduler_edit");
              })

步骤2)您可以使用Javascript&#39; s e.preventDefault();限制调度程序事件编辑的默认功能 然后你可以创建自己的ajax请求,从服务器端获取强类型的部分视图::

 function EventScheduler_edit(e) {
        //Prevent to Popup scheduler Editor 
        e.preventDefault();
        //And open custom editor instead
        kendo.ui.progress($("#loading1"), true);
        $.ajax({
            type: 'POST',
            url: rootUrl("Calendar/GetPartialViewForEventEditor"),
            data: {EventID:e.event.EventID},
            success: function (response) {
                $("#EventEditorWindow").empty();
                $("#EventEditorWindow").html(response);

                $popup1 = $("#EventEditorWindow");
                var wnd1 = $popup1.kendoWindow({
                    actions: ["Close"],
                    modal: true,
                    resizable: false,
                    animation: false
                }).data('kendoWindow').center().open();

                var tmp = $popup1.data("kendoWindow");
                tmp.title("Event window");
                //EventScheduler_edit
                $("#EventEditorWindow").find("#Start").data('kendoDateTimePicker').value(e.event.start);
                $("#EventEditorWindow").find("#End").data('kendoDateTimePicker').value(e.event.end);
                kendo.ui.progress($("#loading1"), false);
            }
        });
    };

多数民众赞成!

相关问题