Use partial View in Kendo Scheduler

0
votes

I want to use partial view as a Custom editor for Kendo Scheduler.

I know that we can use HTML code as a string for Custom Editor Template.

For Using Partial View as a Custom Editor Template I am trying something like::

.Editable(x=>x.Template(@Html.Partial('PartialViewEditor')))

but this is not acceptable. How can i use my Partial view as a Kendo Editor Template? Thanks in Advance.

2
asp.net-mvckendo-uikendo-scheduler

2 Answers

1
votes

I have found an alternate way to use partial view with Kendo Scheduler. You can use .Editable(x=>x.Template("#= getCustomTemplate() #") but this will use the default binding templates of Kendo Scheduler Editor.

But I want to use my own partial view with all bindings. So I have decided to go through following steps to achieve it:\

Step 1) Use Edit Event of Kendo scheduler as::

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

step 2) You can restrict the default functionality of Scheduler event edit using Javascript's e.preventDefault(); and then you can make your own ajax request to Get Strongly typed partial View From Server side as::

 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);
            }
        });
    };

Thats it!!!

0
votes

Try this:

.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>