This is a migrated thread and some comments may be shown as answers.

Add additional field to default edit template

6 Answers 686 Views

Scheduler

This is a migrated thread and some comments may be shown as answers.

6 Answers, 1 is accepted

answered on 25 Aug 2015, 03:58 PM

Hello Rasmus,

The best way to add an additional UI editor to the edit form is to define a standalone editor form. Thus you will gain full control over the editors and you can add/remove event fields. I would suggest you review the following how-to demo:

http://docs.telerik.com/kendo-ui/web/scheduler/how-to/custom-edit-and-event-templates

Of course, if you would like to add only field and you think the effort of building custom editor form is not justified, then you can add the custom editor manually in the edit event of the widget. Here is a demo that shows this approach:

http://docs.telerik.com/kendo-ui/web/scheduler/how-to/add-control-to-customeditor

Regards,
Georgi Krustev
Telerik

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

answered on 03 Apr 2020, 11:30 AM

Hello Georgi,

I'm replying on a post that you posted 25 Aug 2015.

I added two checkboxes .. but i want to be able to read the value of it (true or false) and then in the update method do what i want to do with it.

The Problem is when i click on ab event to edit it, and i change only the value of the new checkboxes .. it wo'nt fire an update. it closes the edit popup and that's it !

Now event if edited another values, update will fires but there is no value from these two checkboxes ..

Here is the Code :

// Add Custom CheckBox and Label

var newCheckBoxLabelVor = $(

'<div class="k-edit-label"><label for="Vorlauf">Vorlauf</label></div><div data-container-for="Vorlauf" class="k-edit-field"><input type="checkbox" name="Vorlauf" title="Vorlauf event" data-type="boolean" data-bind="checked:Vorlauf"></div>'

);

var newCheckBoxLabelNach = $(

'<div class="k-edit-label"><label for="Nachlauf">Nachlauf</label></div><div data-container-for="Nachlauf" class="k-edit-field"><input type="checkbox" name="Nachlauf" title="Nachlauf event" data-type="boolean" data-bind="checked:Nachlauf"></div>'

);

// Wire it's click event.

//newCheckBoxVor.click(function (e) { alert("Checked"); });

// Add CheckBox to the contrainer

var AllDay_Container = e.container.find("div[data-container-for= isAllDay]");

AllDay_Container.after(newCheckBoxLabelVor);

var Vorlauf_Container = e.container.find("div[data-container-for= Vorlauf]");

Vorlauf_Container.after(newCheckBoxLabelNach);

So these Lines are in onEdit() function.

and i added these two checkboxes to the SchedulerViewModel :

public bool Vorlauf { get; set; }

public bool Nachlauf { get; set; }

and in the Update ActionMethod i wrote this :

bool vorlaufBabe = eventVM.Vorlauf;

bool NachlaufBabe = eventVM.Nachlauf;

can you please help me . . . . . .

answered on 07 Apr 2020, 08:47 AM

Hello,

I assume the code snippet below is from the "edit" event handler of the Scheduler. Instead of adding the checkboxes with jQuery try declaring them in the custom editor template. See this example: https://docs.telerik.com/kendo-ui/controls/scheduling/scheduler/how-to/editing/custom-edit-and-event-templates

The Scheduler uses a template:

editable: {
     template: $("#customEditorTemplate").html(),
},

Add the checkboxes to the template with id: customEditorTemplate

Regards,
Ivan Danchev
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.