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

Add additional field to default edit template

6 Answers 363 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Rasmus
Top achievements
Rank 1
Rasmus asked on 23 Aug 2015, 08:16 PM

Hello,

 

I'm a bit new to Kendo UI scheduler, replacing another calendar componenet with it. Now if I want to add an additional field to the edit event template like "isPrivate" how can I do this? Let's say I want to add it as a checkbox. I saw it is possible to add additional data with resources and have it show up in the popup, but only as select fields. Is there a way around or is the only option to make a complete custom template.?

 If I make a custom template, can I somehow use the recurring field from kendo?

 Best regards

Rasmus

6 Answers, 1 is accepted

Sort by
0
Georgi Krustev
Telerik team
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: 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:
Regards,
Georgi Krustev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Eduardo
Top achievements
Rank 1
answered on 25 Aug 2015, 06:18 PM
I have add button (popup event) but I can set even for it...
0
Georgi Krustev
Telerik team
answered on 27 Aug 2015, 11:23 AM
Hi eduardo,

I am afraid that it is not clear what the described issue is. Could you elaborate a bit?

Regards,
Georgi Krustev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Rasmus
Top achievements
Rank 1
answered on 30 Aug 2015, 09:54 PM
Exactly what I did, created a new custom template based on the link you provided. Thanks!
0
K.Ramadan
Top achievements
Rank 2
Veteran
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  . . . . . .

0
Ivan Danchev
Telerik team
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.
Tags
Scheduler
Asked by
Rasmus
Top achievements
Rank 1
Answers by
Georgi Krustev
Telerik team
Eduardo
Top achievements
Rank 1
Rasmus
Top achievements
Rank 1
K.Ramadan
Top achievements
Rank 2
Veteran
Ivan Danchev
Telerik team
Share this question
or