Questions on Kendo UI for jQuery Forum

1 answer

127 views

Display tooltip with event information for resource in agenda view

Hello,

I'm trying to implement a tooltip that shows how many and what kind of events the resource has for the day when hovering mouse cursor over resource. I was able to do this in day/week/month views by using a custom group header template but I'm having a hard time trying to implement it in agenda view because I'm not able to make a custom template for resource group header, only event date, event time and event custom templates are available as far as I'm aware. Basically what I need is the ability, when hovering over a resource, to know what resource and what date it is to get the relevant information.

Any help is greatly appreciated! Thank you!

Scheduler

Templates

answered on 02 Mar 2023

2 answers

91 views

Template inside a template

I am using the Scheduler and making a custom edit screen. I am following the example here.

Each scheduled event can have a category. These are selectable via dropdown. Consider the following portion of the template:

<div class="k-edit-label">
   <label for="category">Category</label>
</div>
<div data-container-for="category" class="k-edit-field">
   <!-- HERE IS WHERE THE DROPDOWN IS -->
</div>

In the example linked, a simple <select> element is used. But I am looking to add a real Kendo dropdown, not a basic select. So I defined it as follows:

var categoryEditorDropdown = Html.Kendo().DropDownList()
   .AutoBind(true)
   .BindTo(categories)
   .DataTextField(nameof(Category.Description))
   .DataValueField(nameof(Category.Id))
   .HeaderTemplate("Custom defined template which is why I need this over a select")
   .OptionLabelTemplate("Custom defined template which is why I need this over a select")
   .Name("category")
   .ToClientTemplate();

Back to my editor template, for the commented green line I tried both the following, and both gave template errors:

<div data-container-for="category" class="k-edit-field">
   <!-- Both fail with a template error -->
   @categoryEditorDropdown
   @Html.Raw(categoryEditorDropdown)
</div>

Next, I made a separate script:

<script id="editEventCategoryTemplate" type="text/x-kendo-template">
   // Tried both of these and again both fail when editing the event
   @categoryEditorDropdown
   @Html.Raw(categoryEditorDropdown)
</script>

And I updated the editor to try and use it:

<div data-container-for="category" class="k-edit-field">
   #= kendo.render(kendo.template($("\\#editEventCategoryTemplate").html())) #
</div>

For both tests here the page renders but then throws the same invalid template error when I try to edit an event.

How can I embed templates into each other. I need far more than category here. There are 6 templates in total needed for 6 different fields.

Scheduler

Templates

answered on 11 Oct 2022

1 answer

69 views

Problem to personalizzation event template in scheduler

Hello

I need your support, please, for the Scheduler (Kendo JQuery UI v2022.2.510)
I have 2 problems: the special characters in the description (example: euro symbol) and the multilines description of the appointments.

I would like to show next invoices to be paid.

The scheduler must be on mounth show, and all event are all day event.

On the event I need to show the number of document, buisness name and the amounth.

I'm trying to implement more filds in schema but the program ignore that.

I also tried to insert html tag in the description filed
(example:

<span class='IntestazioneDocumento'>PA / 1234567890 del 01/01/2000</span>
<span class='aDitta'>Alla ditta Business</span>
<span class='nRata'>Payment 1 di 1</span>
<span class='importo'>Tot. documento 123,45 &euro;</span>

)

but the tasg are showed as text.

In every case, the height of the result cell is too short to show all information.

I use the code

	kendo.ui.progress($("#scheduler"), false);
	
	urlData = url
	
    $("#scheduler").kendoScheduler({
        height: 600,
        views: [
            "day",
            "week",
            { type: "month", selected: true},
            "year"
        ],
        timezone: "Europe/Rome",
		allDayEventTemplate: $("#event-template").html(),
		eventTemplate: $("#event-template").html(),
        dataSource: {
            batch: true,
            transport: {
                read: {
                    url: urlData,
					type: "POST",
					contentType: "application/json; charset=utf-8",
					dataType: " json"
                },
                update: {
                },
                create: {
                },
                destroy: {
                }
            },
            schema: {
                model: {
                    id: "taskId",
                    fields: {
                        taskId: { from: "TaskID", type: "number" },
                        title: { from: "Title", defaultValue: "No title", validation: { required: true } },
                        start: { type: "date", from: "Start" },
                        end: { type: "date", from: "End" },
                        startTimezone: { from: "StartTimezone" },
                        endTimezone: { from: "EndTimezone" },
                        description: { type: "html", from: "Description" },
                        recurrenceId: { from: "RecurrenceID" },
                        recurrenceRule: { from: "RecurrenceRule" },
                        recurrenceException: { from: "RecurrenceException" },
                        ownerId: { from: "OwnerID", defaultValue: '' },
                        isAllDay: { type: "boolean", from: "IsAllDay" },
						IntestazioneDocumento: { from: "IntestazioneDocumento" },
						RagioneSociale: { from: "RagioneSociale" },
						
                    }
                }
            }
        },
		editable: false,
        resources: [
            {
                field: "ownerId",
                title: "Owner",
                dataSource: [
                    { text: "CENTRAL", value: 0, color: "#0000ff" },
                    { text: "LOGGIA", value: 1, color: "#f8a398" },
                    { text: "GIOTTO", value: 2, color: "#2572c0" },
                    { text: "P_COMM", value: 3, color: "#118640" }
                ]
            }
        ]
    });
    $("input[ name=showFarm ]").change(function(e) {
        var checked = $.map($("input[ name=showFarm ]:checked"), function(checkbox) {
            return parseInt($(checkbox).val());
        });

        var scheduler = $("#scheduler").data("kendoScheduler");

        scheduler.dataSource.filter({
            operator: function(task) {
				return $.inArray(task.ownerId, checked) >= 0
            }
        });
    });
});

Scheduler

Templates

answered on 30 Aug 2022

1 answer

55 views

Auto Focus and Select on Scheduler Edit

I want the editor to open up with the "Title" field pre-focused and with the "No title" text selected.

the below code does not seem to be working.

I am using a custom edit template

edit: function (e) {

var input = e.container.find("title");
input.select();
input.focus(function (e) {
input.select();
});

input.focus();

}

Scheduler

Templates

answered on 18 Aug 2022

1 answer

344 views

KendoUi Font icons are not loading

Actually we have kendoUi in angularjs project. which ic giving error in developer console like server not responding 404 error for webcomponentsicon.ttf and webcomponentsicon.woff. because of this icons are not loading. can anyone please help me to clear this issue