Replace entire window for event editor

[Brian]

I've sorted out how to use the custom editor template but what I'd like to do is to replace the entire dialog with one that matches the look of the rest of our application.  Using the template I can replace individual controls but the header/window/button look and feel is different that what we'd like.   I know I can style them but the layout is a little different and I'd like more control.

Can I intercept and block the editor loading and load my own dialog?  Or is there another means that I can replace the edit process with my own view?

 

Thanks,

Brian

 

[Petar]

Hi Brian,

This Customize Edit and Events Templates demo project demonstrates what we can do with the Scheduler's templates. If the demonstrated implementation doesn't give you the control you would like to have, you can check this Create External Editor Forms demo. It demonstrates how we can add an event without using the built-in popup editor. You can use the demonstrated approach and put the different field inputs in your custom Dialog or any other element.

If none of the above helps you implement the targeted functionality, then the only other option is to apply custom CSS styles that will change the layout of the popup editor in the desired way.

Regards,
Petar
Progress Telerik

[Mahesh]

Petar,

Thanks for the idea. Following the same design, can we show the edit template as a pop-up?

[Mahesh]

Petar,

We are looking at implementing a functionality similar to EditorTemplates. The expectation is to design an EditorTemplate which will display the event details (title, description, attendee list as a grid). Later, display this editor template when the end-user double clicks on an event.

We would appreciate if you could let us know if this is possible.

[Petar]

Hi Mahesh,

Attached to my reply, you will find an example demonstrating how we can display in the custom popup editor, exactly the things you want to have in the popup.

To display the Grid in the popup editor, the following code is used in the editor template:

<div class="k-edit-label"><label for="attendees">Attendees</label></div>
<div data-container-for="attendees" id="grid" class="k-edit-field"></div>

Then in the Index.cshtml file, we have the following code that initializes the Grid from the above DOM definition.

e.container.find("#grid").kendoGrid({
    dataSource: e.event.Attendees,
    columns: [
         { field: "AttendeeID" },
         { field: "AttendeeName" }
    ]
});

I hope that the attached example will help you implement what you need in your project. 

Regards,
Petar
Progress Telerik