Questions on Kendo UI for jQuery Forum

1 answer

119 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

86 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

0 answers

77 views

Have WorkDayStart be a function, or customize slotTemplate in MVC

I have two Kendo Schedulers. In the first one the WorkDayStart and WorkDayEnd should be custom to the day(s) being viewed. They are not static at one single time. If I am viewing one single day, I am sure I could inject some Javascript to find these and update them, then rerender the scheduler. But when viewing a week that would not help. Really they need to be a function. Is this possible?

The second scheduler is grouped by a resource of an Employee. So in this case it is more complicated. I have this one locked down to viewing only a single day view (or other views that don't include slots that may be closed like Agenda). But the columns here are dependent on the employee's availability for the day selected. So again a function is needed.

Alternatively, digging in the kendo.all.js, I see a property called "slotTemplate" but this doesn't seem to be exposed in MVC. Is there a workaround using this?

[EDIT]: I finally found the SlotTemplate as part of the views in MVC. Will play around here and possibly I can solve this on my own.

[EDIT 2]: I did get SlotTemplate working, but the real solution is to fix the WorkDayStart and WorkDayEnd. Let's say this is a program for a store. Bob logs in. Bob sees his own schedule on one tab, and the store schedule on another tab. Bob works different hours per day. The store is open different hours per day. It's not always the same. When viewing a week we need to be expanded to the most open day. When viewing a single day we should match that day.

Here's a SlotTemplate tagged in CSHTML:

views.DayView(v => v.Selected(true)).SlotTemplateId("shopSlotTemplate");

Now, I've actually got three schedules. One shows Bob's schedule or whomever is logged in. This one contains an employee ID to identify Bob. Another one shows the entire store, but it is grouped by the employee ID. Still one more shows the entire store but does not group by employee ID and instead puts everything together. These in respective order are here:

<script id="mySlotTemplate" type="text/x-kendo-template">
   #= getSlotTemplate(data, @loggedInEmployeeId) #
</script>

<script id="shopSlotTemplate" type="text/x-kendo-template">
   #= getSlotTemplate(data) #
</script>

<script id="acSlotTemplate" type="text/x-kendo-template">
   #= getSlotTemplate(data, 0) #
</script>

Next, I added the getSlotTemplate function as follows:

function getSlotTemplate(data, employeeId) {

   // Get employee ID if not passed in. If still not found then this scheduler is not grouped this way.
   if (employeeId === undefined) {
      employeeId = data.resources().EmployeeId;
   }

   let isClosed = isShopClosed(shopSchedule.Shop, data.date);

   if ((!isClosed) && (employeeId > 0) && (shopSchedule["Employee" + employeeId] !== undefined)) {
      isClosed = isShopClosed(shopSchedule["Employee" + employeeId], data.date);
   }

   return "<div class=\"" + (isClosed ? "k-nonwork-hour" : "") + "\">&nbsp;</div>";
}

isShopClosed is a function that looks inside a JSON object I've loaded. It contains employee schedules and store schedules. Half days off, full days off, holidays, etc. are all a part of this. It returns a simple boolean. First I'm checking is the store closed, and next I am checking is the employee not working. A DIV is returned with the appropriate Kendo class.

This required new CSS since the TD element has margins.

div.k-scheduler-content > table > tbody > tr > td > div {
   margin: -4px -0.5em;
   height: calc(100% + 8px);
   width: calc(100% + 1em);
}

The end result is that the grid for the scheduler appears how I want it.

But working hours are still inaccurate. They are based on a single date and don't change as I move between days.

Scheduler

Templates

updated question on 23 Sep 2022

1 answer

64 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

54 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

321 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