or
1 answer
872 views
I have a kendo scheduler with day, week and month views. when user selects the cell it there is widget to click with startdate and enddate.
This works fine for day and week, except month.
When selecting the month it gives the "Uncaught TypeError: Cannot read properties of undefined (reading 'value')".
Kendo scheduler :
View.scheduler = $(this.schedulerElementWithHash).kendoScheduler({
allDaySlot: false,
date: Model.startDate,
startTime: Model.startTime,
endTime: Model.endTime,
workDayStart: Model.workDayStart,
workDayEnd: Model.workDayEnd,
majorTimeHeaderTemplate: kendo.template("<strong>#=kendo.toString(date, 'H:mm')#</strong>"),
snap: false,
majorTick: 60,
selectable: true,
editable: {
destroy: true
},
messages: {
deleteWindowTitle: "Delete",
destroy: "UnSchedule"
},
navigate: function (e) {
//if (e.action == 'previous' || e.action == 'next') {
// // added some delay to make sure that the view start/end date has been updated prior to reading
// setTimeout(function () {
// View.scheduler.dataSource.read();
// }, 100);
//}
if (e.action == 'previous' || e.action == 'next') {
View.scheduler.dataSource.options.serverFiltering = true;
}
View.schedulerNavigated = e.action == 'changeWorkDay';
if (e.action == 'changeView') {
View.setCalendarWidth(e.view);
}
},
height: 800,
eventTemplate: $("#visit-schedule-template").html(),
views: [
{ type: "day", selected: SchedulerView.isDaySelected, dateHeaderTemplate: "<span class='k-link k-nav-day'>#=kendo.toString(date, 'ddd dd-MMM')#</span>" },
{ type: "week", selected: SchedulerView.isWeekSelected, showWorkHours: true, dateHeaderTemplate: "<span class='k-link k-nav-day'>#=kendo.toString(date, 'ddd dd-MMM')#</span>" },
{ type: "month", selected: SchedulerView.isMonthSelected, showWorkHours: false }
],
groupHeaderTemplate: $("#groupHeaderTemplate").html(),
//timezone: "Etc/UTC",
dataSource: {
//filter: {
// logic: 'or'
//},
batch: true,
serverFiltering: true,
transport: {
read: function (options) {
if (View.schedulerNavigated) {
console.log("read schedulerNavigated = true");
options.success(View.scheduler.dataSource.data());
return;
}
var scheduler = $(View.schedulerElementWithHash).data("kendoScheduler");
var view = scheduler.view();
var startDate = moment(view.startDate()).startOf('day').utc().format();
var endDate = moment(view.endDate()).endOf('day').utc().format();
Controller.visitService.getScheduleCalenderEntries(startDate, endDate).done(function (response) {
options.success(response);
})
},
update: function (options) {
$.ajax({
url: "/iapis/visits/update",
data: kendo.stringify(options.data.models),
type: "POST",
contentType: 'application/json',
success: function (response) {
var resp = response.Data.map(d => d.map(v => ({
id: v.Id,
crewId: v.crewId,
end: v.end,
start: v.start,
title: v.title
})));
options.success(resp);
}
});
},
create: function (options) {
options.success(null);
},
destroy: function (options) {
options.success(null);
},
parameterMap: function (options, operation) {
console.log('options', options);
if (operation !== "read" && options.models) {
return kendo.stringify(options.models);
}
//return {
// filter: ['ScheduledDate~isnotnull~undefined~and~CrewId~eq~13']
//};
}
},
schema: {
//timezone: "Etc/UTC",
parse: function (response) {
console.log('parse response', response);
if (View.schedulerNavigated) {
console.log("parse schedulerNavigated = true");
View.schedulerNavigated = false;
return response;
}
// store transformed user data
var visitsData = [];
if (response.length > 0) {
for (var i = 0; i < response.length; i++) {
var item = response[i];
// Only add if there is Start and End Date
if (item.start && item.end) {
var lastVisitStr = View.getLastVisitConverted(item.lastVisited);
var slot = {
id: item.id,
title: item.type == 'visit' ? item.apairy : 'Break',
start: item.start,
//startTimezone: 'Etc/UTC',
end: item.end,
//endTimezone: 'Etc/UTC',
completed: item.completed,
calculatedDuration: item.calculatedDuration,
crewId: item.crewId,
crew: item.crew,
type: item.type,
apiary: item.apairy,
apiaryId: item.apiaryId,
//lastVisited: item.LastVisited,
lastVisited: lastVisitStr,
ago: View.calcDaysAgo(lastVisitStr), // a day
status: item.status,
taskCount: item.tasksCount.toLocaleString(),
latitude: item.latitude,
longitude: item.longitude,
apiaryOffroadTime: item.apiaryOffroadTime,
apiaryOffroadDistance: item.apiaryOffroadDistance,
color: item.color,
crewColor: item.crewColor ? item.crewColor : Model.defaultCrewColor,
distance: item.distance,
durationMinutes: item.durationMinutes,
onroadTime: item.onroadTime,
onroadDistance: item.onroadDistance,
offroadTime: item.offroadTime,
offroadDistance: item.offroadDistance,
visitFirst: item.visitFirst,
visitFirstLat: item.visitFirstLatitude,
visitFirstLong: item.visitFirstLongitude,
visitLast: item.visitLast,
visitLastLat: item.visitLastLatitude,
visitLastLong: item.visitLastLongitude,
visitStatus: item.visitStatus,
previousVisitId: item.previousVisitId,
nextVisitId: item.nextVisitId,
fromVisitId: item.fromVisitId,
toVisitId: item.toVisitId,
};
if (item.type == 'visit' && item.groupIds) {
slot.groupIds = item.groupIds.split(',');
slot.groupIds = _.map(slot.groupIds, function (e) {
try {
return parseInt(e)
} catch (err) {
//do nothing
console.log('error parsing group id');
}
});
}
if (item.type == 'break') {
slot.defaultBreakSlotColor = Model.defaultBreakSlotColor
}
visitsData.push(slot);
}
else {
// Read all items modified and set Dirty = True
var dirtySlots = [];
for (var j = 0; j < item.length; j++) {
//var slotModified = item[item.length - 1];
slotModified = item[j];
var slot = _.find(View.scheduler.dataSource.data(), function (e) {
return e.id == slotModified.id;
});
if (slot) {
dirtySlots.push(slot);
}
if (slotModified.id == 0) {
slotModified.end = new Date(slotModified.end);
slotModified.start = new Date(slotModified.start);
if (slotModified.end.getMinutes() > 30) {
slotModified.end.setMinutes(30);
}
if (slotModified.end.getMinutes() < 30) {
slotModified.end.setMinutes(0);
}
if (slotModified.start.getMinutes() < 30) {
slotModified.start.setMinutes(0);
}
if (slotModified.start.getMinutes() > 30) {
slotModified.start.setMinutes(30);
}
}
visitsData.push({
id: slotModified.id,
title: slotModified.title,
start: slotModified.start,
end: slotModified.end,
crewId: slotModified.crewId,
dirty: true
});
}
setTimeout(function () {
dirtySlots.forEach(function (slot) {
slot.dirty = true;
});
}, 500);
}
} //end for loop, done adding items to array
//update resources the first time
if (Model.crewsInVisit && Model.crewsInVisit.length == 0) {
View.scheduler.dataSource.options.serverFiltering = false;
Model.crewsInVisit = Controller.getCrewsFromVisit(visitsData);
console.log('grouped crews', Model.crewsInVisit);
var crewRecords = _.chain(Model.crewsInVisit)
.filter(function (item) {
return item.value !== 'null';
});
Model.crewsInVisit = crewRecords._wrapped;
//update Crew multiselect
View.bindCrewMultiSelect();
View.renderRegionsMultiselect();
Controller.refreshResources();
}
$(".k-loading-image").hide();
$(".k-loading-mask").hide();
View.scheduler.refresh();
return visitsData;
}
else {
console.log('Model.allCrews', Model.allCrews);
if (Model.allCrews.length === 0 || Model.allCrews.length < 0) {
abp.message.info('', 'Please add at least one crew to iAPIS settings!!');
}
return visitsData;
}
}
}
},
group: {
resources: ["Crew"]
},
resources: [
{
field: "crewId",
name: "Crew",
dataSource: Model.crewsInVisit,
//dataColorField: 'none',
title: "Crew",
multiple: false,
}
],
dataBound: function (e) {
console.log('data bound');
$('k-loading-mask').hide();
Controller.colorVisitAccordingToStates();
var scroll_l = 0, scroll_t = 0;
var tenantId = abp.session.tenantId;
var ScrollX = "ScrollX";
var ScrollY = "ScrollY";
if (this.viewName()) {
var strDate = $(".k-lg-date-format").html();
if (strDate.indexOf(',') > 0) {
var strSplit = strDate.split('-');
var dateFormat = 'ddd dd-MMM-yyyy';
if (this.viewName() === "month") {
dateFormat = 'MMM-yyyy'
}
var dateConverted = kendo.toString(kendo.parseDate(strSplit[0].trim()), dateFormat);
if (strSplit.length == 2) {
dateConverted += " - " + kendo.toString(kendo.parseDate(strSplit[1].trim()), dateFormat);
}
$(".k-lg-date-format").html(dateConverted);
$(".k-sm-date-format").html(dateConverted);
}
}
if (localStorage.getItem(ScrollX.concat(tenantId)) && localStorage.getItem(ScrollY.concat(tenantId))) {
scroll_l = localStorage.getItem(ScrollX.concat(tenantId));
scroll_t = localStorage.getItem(ScrollY.concat(tenantId));
$('#schedulers .k-scheduler-content').scrollLeft(scroll_l);
$('#schedulers .k-scheduler-content').scrollTop(scroll_t);
}
$('.k-scheduler-content').scroll(function () {
if ($('#schedulers .k-scheduler-content').html().length) {
scroll_l = $('#schedulers .k-scheduler-content').scrollLeft();
scroll_t = $('#schedulers .k-scheduler-content').scrollTop();
localStorage.setItem(ScrollX + tenantId, scroll_l.toString());
localStorage.setItem(ScrollY + tenantId, scroll_t.toString());
}
});
if (app.utils.iapis.getUrlParameters) {
var visitId = app.utils.iapis.getUrlParameters('visitId');
if (visitId) {
var uid = $('div[visit-Id=' + visitId + ']').parent().attr('data-uid');
if (uid) {
var contentDiv = View.scheduler.element.find("div.k-scheduler-content");
var contentDivPosition = contentDiv.position();
var eventDiv = $(".k-event[data-uid=" + uid + "]");
var eventDivOffset = eventDiv.offset();
contentDiv.scrollLeft(eventDivOffset.left + contentDiv.scrollLeft() - contentDivPosition.left*2.25);
contentDiv.scrollTop(eventDivOffset.top + contentDiv.scrollTop() - contentDivPosition.top);
}
}
}
setTimeout(function () {
View.scheduler.view().table.on("mousedown", function (e) {
if (e.which === 3) {
var slot = View.scheduler.slotByElement($(e.target));
View.scheduler.select({ start: slot.startDate, end: slot.endDate });
}
});
}, 1);
// Create Date Header Tooltip
var mouseX = 0;
var mouseY = 0;
var onMouseUpdateDateTooltip = function (e) {
mouseX = e.screenX;
mouseY = e.screenY;
};
document.addEventListener('mousemove', onMouseUpdateDateTooltip, false);
console.log('creating tooltip');
$(".k-scheduler-date-group").kendoTooltip({
filter: "span",
width: 250,
content: function (e) {
var date = e.target.html();
var calendarDate = moment(View.scheduler.view().startDate());
var referenceDate = moment.utc(date + '-' + calendarDate.format('YYYY'));
var crewGroupCells = $('.k-scheduler-group-cell');
var dateIndex = e.target.parent().index();
var selectedView = View.scheduler.view().title.toLowerCase();
var crew = null;
if (selectedView == 'week') {
dateIndex = Math.floor(dateIndex / 7);
}
if (dateIndex >= 0) {
var hoveredGroup = $(crewGroupCells[dateIndex]).find('.crew-group');
var crewId = hoveredGroup.attr('id').replace('C', '');
crew = Model.allCrews.find(x => x.value == crewId);
}
if (crew && referenceDate.isValid()) {
var tooltipContent = $('.k-tooltip-content');
var tooltipInCache = View.tooltipCache[crew.value + '_' + referenceDate.format('DD-MMM-YYYY')];
if (tooltipInCache) {
return tooltipInCache;
}
else
{
Controller.visitService.getVisitCrewData(referenceDate, crew.value)
.done(function (response) {
if (response.length == 1) {
var crew = response[0];
var tooltip = "<h5>" + crew.crewName + "</h5>" +
"<p><b>Vehicle: </b>" + (crew.vehicle == null ? 'None' : crew.vehicle) +
"<p><b>Workers: </b>";
if (crew.crewMembersList && crew.crewMembersList.length > 0) {
tooltip += "<ul>";
_.forEach(crew.crewMembersList, function (worker) {
tooltip += "<li>" + worker.workerName + " (" + worker.workerMPE + "%)";
_.forEach(worker.tasksMPE, function (workerTask) {
tooltip += "<br> - " + workerTask.taskName + " (" + workerTask.taskMPE + "%)";
});
tooltip += "</li>";
});
tooltip += "</ul>";
}
else {
tooltip += "None";
}
tooltipContent.html(tooltip);
View.tooltipCache[crew.crewId + '_' + referenceDate.format('DD-MMM-YYYY')] = tooltip;
}
else {
tooltipContent.html('Error Loading!');
}
})
.catch(function (err) {
tooltipContent.html('Error Loading!');
console.error('Error Loading Tooltip: ' + err);
});
return 'Loading...';
}
}
else {
return 'Error Loading!';
}
},
show: function () {
this.refresh();
}
});
View.setScheduleDropArea(this);
},
})
.data("kendoScheduler");Cell select event :
setTimeout(function () {
View.scheduler.view().table.on("mousedown", function (e) {
if (e.which === 3) {
var slot = View.scheduler.slotByElement($(e.target));
View.scheduler.select({ start: slot.startDate, end: slot.endDate });
}
});
}, 1);
The data is correct when selecting the cell but "
View.scheduler.select({ start: slot.startDate, end: slot.endDate });"
gives the
kendo.all.js:313050 Uncaught TypeError: Cannot read properties of undefined (reading 'value')
at init._setResourceValue (kendo.all.js:313050:21)
at init._resourceBySlot (kendo.all.js:313050:21)
at init._select (kendo.all.js:313050:21)
at init.select (kendo.all.js:313050:21)
at HTMLTableElement.<anonymous> (schedule.js?v=tx40wPU-Cw8se20BEdtsj55bdCvwHSPJLBm64UIbYaQ:2214:48)
at HTMLTableElement.dispatch (app-layout-libs.min.js?v=5e4tlbUYEHnHcS5q_Z-XKjK0gw8I56pGLzYM0eJF0IE:5977:27)
at elemData.handle (app-layout-libs.min.js?v=5e4tlbUYEHnHcS5q_Z-XKjK0gw8I56pGLzYM0eJF0IE:5781:28)
Any idea about what could be the issue?
Martin
Telerik team
answered
on
18 Apr 2023
1 answer
155 views
Is there a way to allow users to create new entries for an empty OrgChart? We're looking at adding this widget as a means of allowing our users to create their own organizational charts. This necessarily means that the charts will start as empty - there will be no data in them to begin with. And it seems like this is unintended behavior for the widget? The only way I can find to allow for the creation of an entry into the chart is to forcibly have a fake dummy record from which the "Create" action can be invoked. An empty chart doesn't have a toolbar at all. I'd create my own toolbar, but I cannot find anything in the API that allows me to invoke the create modal via JS.
We're using the JQuery version of Kendo UI. Thanks.
Martin
Telerik team
answered
on
18 Apr 2023
1 answer
353 views
I've never really paid attention to this but got curious when trying to debug something.
What's the difference between cdn.kendostatic.com and kendo.cdn.telerik.com?
In some Telerik documentation there are references to kendo.cdn.telerik.com. When I created a Telerik app in VS 2022, most references use cdn.kendostatic.com.
Should one be used over the other?
Georgi Denchev
Telerik team
answered
on
18 Apr 2023
1 answer
606 views
Hi,
We've initialised a TextArea using the following code:
$("#textArea").kendoTextArea({
label: "Label",
rows: 4,
maxLength: 1000
});And try to clear it using the following code:
const textArea = $("#textArea").kendoTextArea().data("kendoTextArea");
textArea.value("");
textArea.trigger("change");
It works but it looks like it resets any configuration you set like rows and maxLength and adds extra markup.
Here's the markup before the clear:
<span class="k-input k-textarea k-input-solid k-input-md k-rounded-md k-resize-none" style=""><textarea id="textbox-notes" data-role="textarea" aria-disabled="false" maxlength="1000" rows="4" class="!k-overflow-y-auto k-input-inner" autocomplete="off" style="width: 100%; resize: none;"></textarea></span>And after:
<span class="k-input k-textarea k-input-solid k-input-md k-rounded-md k-resize-none" style=""><span class="k-input k-textarea !k-overflow-y-auto k-input-inner k-input-solid k-input-md k-rounded-md k-resize-none" style="width: 100%; resize: none;"><textarea id="textbox-notes" data-role="textarea" aria-disabled="false" rows="1" class="!k-overflow-y-auto k-input-inner" autocomplete="off" style="width: 100%; resize: none;"></textarea></span></span>Note the rows have reset to 1 and maxlength is missing. Also, there is an extra SPAN around the original SPAN and TEXTAREA. We tried setting the properties manually after the change trigger using:
$("#textArea").prop("rows", "4");
$("#textArea").prop("maxlength", "1000");This works okay but obviously doesn't fix the extra markup.
Is this the correct way to clear a TextArea? Or do we just reset the value in jQuery directly?
Thanks
Martin
Telerik team
answered
on
17 Apr 2023
1 answer
252 views
While following the telerik example of how to set the position of the x and x axis labels on a chart (link below) Visual Studio gives me an error "'position' does not exist in type 'ChartYAxisItemLabels'".
I checked the kendo.all.d.ts (version v2023.1.314) file that is referenced by my project and the interface is defined as follows:
interface ChartYAxisItemLabels {
background?: string | undefined;
border?: ChartYAxisItemLabelsBorder | undefined;
color?: string | undefined;
culture?: string | undefined;
dateFormats?: ChartYAxisItemLabelsDateFormats | undefined;
font?: string | undefined;
format?: string | undefined;
margin?: number | ChartYAxisItemLabelsMargin | undefined;
mirror?: boolean | undefined;
padding?: number | ChartYAxisItemLabelsPadding | undefined;
rotation?: number | ChartYAxisItemLabelsRotation | undefined;
skip?: number | undefined;
step?: number | undefined;
template?: string|Function | undefined;
visible?: boolean | undefined;
visual?: Function | undefined;
}
Adding the following line to the interface resolves the VS error and allows the TypeScript to compile and, when implemented, does move the axis labels to the "start" position just like in the telerik dojo example.
position?: string | undefined;
My question is; Why is the position setting not provided on the TypeScript interface to begin with?
https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/configuration/xaxis.labels#xaxislabelsposition
Nikolay
Telerik team
answered
on
14 Apr 2023
1 answer
1.0K+ views
I would like an editing mask for phone numbers, along the lines of
"+00 0000 000000" or "+00-0000-000000".
The leading + to be stored as part of the data, but the spaces or hyphens are not.
The only characters that should be typed are digits.
There is unfortunate a variation in how different countries display numbers.
Nikolay
Telerik team
answered
on
14 Apr 2023
0 answers
188 views
I have an ASP.Ajax tabstrip with the firs tab linked to another page, all other tabs with html code on multipage.
I'm not able to redirect on the first tab directly to other "Main.aspx" page.
What I'm making wrong?
<telerik:RadTabStrip RenderMode="Lightweight" ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1"
SelectedIndex="1">
<Tabs>
<telerik:RadTab Text="People List" runat="server" NavidateUrl="Main.aspx" Target="_blank">
</telerik:RadTab>
<telerik:RadTab Text="Registry " runat="server" Selected="True">
</telerik:RadTab>
<telerik:RadTab Text="Notes" runat="server">
</telerik:RadTab>
<telerik:RadTab Text="Recipes" runat="server">
</telerik:RadTab>
<telerik:RadTab Text="Files" runat="server">
</telerik:RadTab>
</Tabs>
</telerik:RadTabStrip>
<br />
<telerik:RadMultiPage runat="server" ID="RadMultiPage1" SelectedIndex="1">
<telerik:RadPageView runat="server" ID="RadPagePeopleList"></telerik:RadPageView>
<telerik:RadPageView runat="server" ID="RadPageRegistry">
<div>
<div class="container-fluid">
...
</div>
</div>
</telerik:RadPageView>
<telerik:RadPageView runat="server" ID="RadPageNotes">
<div>
<div class="container-fluid">
...
</div>
</div>
</telerik:RadPageView>
<telerik:RadPageView ID="RadPageRecipes" runat="server">
<div>
<div class="container-fluid">
...
</div>
</div>
</telerik:RadPageView>
<telerik:RadPageView ID="RadPageFiles" runat="server">
<div>
<div class="container-fluid">
...
</div>
</div>
</telerik:RadPageView>
</telerik:RadMultiPage>
Thanks
Renato
1 answer
336 views
Hi
Is there a recommended way of updating an expansionpanel's subtitle on client side? I am able to change the subtitle by using selectors, but I would prefer a better way.
I was trying to find something along the lines of:
$("#expansionPanel").data("kendoExpansionPanel").subTitle("new subtitle");
My workaround is this:
$("#form> div:nth-child(1) > div.k-expander-header > div.k-expander-sub-title").text("new subtitle");
Best regards
H-P
Martin
Telerik team
answered
on
14 Apr 2023
2 answers
464 views
I have a grid with editable cell inside bootstrap modal pop up, all text and dropdown cell works fine except for the number field.
When clicked on the number cell the input opens but value is showing inside, value is updated and reflects back on the grid, applies all the validation but just value is not showing the input field.
I checked everything but could not figure this one out.var _dataSource = new kendo.data.DataSource({
data: localityGridDataSource,
sort: { field: 'nodeLocalitySequence', dir: 'asc' },
autoSync: true,
schema: {
model: {
id: 'localityCode',
fields: {
localityCode: { editable: false },
localityTitle: { editable: false },
nodeLocalitySequence: { type: 'number', validation: { required: true, min: 1, max: 999999 } },
nodeLocalityType: { defaultValue: { nodeLocalityTypeValue: 'I', nodeLocalityTypeName: app.localize('InsideGrid') } },
nodeLocalityExternalNote: { type: 'text' }
}
}
}
});
_LocalitiesGrid.kendoGrid({
dataSource: _dataSource,
editable: true,
noRecords: true,
edit: onGridEditing,
remove: clearLocalitiesAudioMessage,
columns: [
{ field: 'localityTitle', title: app.localize('Locality') },
{ field: 'nodeLocalitySequence', title: app.localize('Order') },
{ field: 'nodeLocalityType', title: app.localize('IncludeType'), editor: nodeLocalityTypeDropDownEditor, template: '#=nodeLocalityType.nodeLocalityTypeName#', width: '250px' },
{ field: 'nodeLocalityExternalNote', title: app.localize('Notes') },
{ command: ["destroy"], width: '125px' }
]
});
Hardip
Top achievements
Rank 1
Iron
Rank 1
Iron
answered
on
14 Apr 2023
1 answer
173 views
The URL that opens when you visit https://demos.telerik.com/kendo-ui/ > Hybrid UI > Launch Demos fails to load with the following exception in the console:
kendo.all.js:318535 Uncaught TypeError: n.headerTemplate is not a function
at Object.<anonymous> (kendo.all.js:318535:21)
at Object.render (kendo.all.js:318535:21)
at init.replaceGrouped (kendo.all.js:318535:21)
at init.refresh (kendo.all.js:318535:21)
at init._refreshHandler (kendo.all.js:318535:21)
at init.trigger (kendo.all.js:318535:21)
at init._process (kendo.all.js:318535:21)
at init.success (kendo.all.js:318535:21)
at success (kendo.all.js:318535:21)
at n.success (kendo.all.js:318535:21)Does the Hybrid UI work for version 6.2.0?
P.S. none of the tags are relevant but it is a required field to submit a new thread so I just picked "templates" since the console error has the keyword template in it. Feel free to modify it.
Martin
Telerik team
answered
on
13 Apr 2023
