or
1 answer
107 views
As subject says, we load the combobox in a kendo window by demand.
Hence the combobox and window are not visible by default.
I wrote a short function to preselect either the entry with ID -1 if it exists - else I want the first entry to be displayed.
My problem is the dynamic loading of all that - my commands are executed in the databound event of the combobox - but it seems not to work as expected .. when I manually enter the needed command AFTER that kendo window with the combobox is displayed it works to a 'T' but not during regular execution ..
Can you give me some hints ?
onComboBoxDataBound: function (evt) {
var widget = evt.sender;
if (this.dataSource.total() > 0) {
// delete preselection then try to select entry with id -1
$('#modComboBox').data('kendoComboBox').input.select();
$('#modComboBox').data('kendoComboBox').input.val('');
$('#modComboBox').data('kendoComboBox').select(function (data) {
return data.id == -1;
});
// no selection then select first entry
if (widget.select() === -1) { // hint I found in stackoverflow
$('#modComboBox').data('kendoComboBox').select(0);
}
}
},
I tried "waiting" for the kendo window to be displayed - but that waiting seems to interfere with normal code execution and prevents the "popup display" from being executed so the kendo window content is displayed behind other stuff
Sven
Top achievements
Rank 1
Iron
Iron
Iron
Rank 1
Iron
Iron
Iron
answered
on
18 Apr 2023
1 answer
718 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
108 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
230 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
485 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
197 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
808 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
125 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
240 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
349 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
