or
1 answer
595 views
I would like to disable partly multiselect dropdown li elements on basis of specific condition. To achieve this I tried to set data attributes on li elements and check that data while rendering these li elements and apply CSS to disable it. But neither I find any related data in data object returned by KendoMultiselect nor in documentation.
$(itemIdservicetypes).on('change', function (e) {
// Here we can get the value of selected item
var seletctedValueST = $(itemIdservicetypes).data("kendoDropDownList").text();
var data = $(itemIdSIMultiSelect).data("kendoMultiSelect");
data.ul.children().each(function () {
if (seletctedValueST == $(this).data("ServiceType") {
$(this).addClass("k-disabled");
} else {
$(this).removeClass("k-disabled");
}
})
});
Georgi Denchev
Telerik team
answered
on
21 Apr 2023
1 answer
93 views
i tried multi-column headers for 2 days with this version, but i couldnt.
the code i made was like..
$("#grid").kendoGrid({
columns: [
{field: "first row", title: "first row", headerAttributes: { **************},
columns: [
{field: "multi column row", title: "multi column row", headerAttributes: { **************} }
,{field: "multi column row2", title: "multi column row2", headerAttributes: { **************} }
]
]
this code doesnt make multi-column, any error log either.
is that version problem?
Neli
Telerik team
answered
on
21 Apr 2023
1 answer
282 views
The new dateInput functionality added to the kendoDateTimePicker only deals with format. It does provide true mask behavior similar to the MaskedTextBox control.
I want our users to be able to type 03012023 and the mask would convert it to 03/03/2023 automatically.
Is there any way to enable/incorporate this modern UI behavior into the kendoDateTimePicker? The current implementation generating a lot of complaints from users.
ROBBE
Top achievements
Rank 1
Iron
Iron
Rank 1
Iron
Iron
answered
on
20 Apr 2023
1 answer
167 views
Hai,
I am facing issue with my editor.
1) Want to disable the editor while still being able to use the PDF and print function.
2) How to set mode as landscape and set name of file (.pdf) when I click "save as PDF".
3) When I click "print", my style doesn't display.
Please refer to the attached file, which is in .jsx format.
Konstantin Dikov
Telerik team
answered
on
20 Apr 2023
0 answers
224 views
Hi,
There is an existing issue with File Manger pagination in List Mode (Grid Mode works fine).
The issue is that the paginator does not get updated with total count of items in the folder just opened/expanded. The count remains the same as first/home page.
E.g. On home page of file manager, I have 5 items ( 3 folders, 2 files)... so pager widget reads "1 - 5 of 5 items".
Once I click on a folder (one of the 5 items), it opens to show 50 (of 25000) files. However, the paginator widget stays at "1 -5 of 5 items". Thus leaving the user screwed because there are no pager links to get to next page of items as it thinks it has only 5 items in view when there are actually 50 in view, and it thinks total items are 5 instead of 25,000.
If I switch to Grid mode, it all works perfectly. Both my list and grid views are configured exactly the same.
,
views: {
list: {
pageable: {
alwaysVisible: true,
pageSizes: [10, 20, 50, 100, 200, 300, 500, 1000]
},
pageable: true,
selectable: "single" //allows only single selection int the ListView
},
grid: {
pageable: {
alwaysVisible: true,
pageSizes: [10, 20, 50, 100, 200, 300, 500, 1000]
},
pageable: true,
selectable: "single" //allows only single selection int the ListView
}
So an obvious bug...but when will there be a fix? Or a workaround? Currently I am working on rolling my own here. I have to trap the "open" event (double click)...and the reset the datasource with the correct items for the folder clicked on, and update the datasurce totals...then it works fine...but i have lost context of parent folders by resetting the data source with items at folder level.
The way it is currently, list mode is useless in FileManager...unless your sub folders have less items than your root folder.
Michael
Top achievements
Rank 1
Rank 1
asked
on
19 Apr 2023
1 answer
124 views
This feels like a REALLY stupid question, but why doesn't the following work with the Window component:
this._window = new kendo.ui.Window($("#kendo-window")[0], {content: "<div style='width: 250px; height: 250px; border: dashed 1px red;></div>"
});
This above code works fine (it opens the window) with the exception that rather than putting the HTML content into the window, it tries to load content from: "https://{myurl}/%3Cdiv%20style='width:%20250px;%20height:%20250px;%20border:%20dashed%201px%20red;%3E%3C/div%3E?_=1681574731677".
I hope that someone can laugh at me and tell me how to just load client side content without an AJAX call or an iFrame.
Thank you!
Martin
Telerik team
answered
on
19 Apr 2023
1 answer
172 views
I am new to KENDO UI Gantt Chart, using it for the first time, and facing lots of issues in adding new columns and calculations.
My client's requirement is to have a Duration column based on Planned Start Date and Planned End Date, column should be editable and when I change either PSD or PED duration should be updated, and vice versa that is if I update the duration my Planned End Date should also get updated accordingly.
Requesting help on this, I have attached the code.
Neli
Telerik team
answered
on
19 Apr 2023
0 answers
374 views
My Kendo grid is rendered as shown is code below, I am thinking as it was not using ajax thus the loading is not showing, I would like to check how do I make the loading to appear when the grid is being rendering
<script type="text/javascript">
var contactData = @Json.Serialize(Model._gridContact);
$(document).ready(function() {
$("#kendo-table").kendoGrid({
dataSource: {
data: contactData,
schema: {
model: {
id: "id",
},
parse: function(data) {
data.forEach((item) => {
var strUpdatedDate = item.updatedDate;
item.updatedDate = kendo.parseDate(strUpdatedDate);
});
return data;
}
}
},
sortable: true,
scrollable: false,
noRecords: {
template: "No record found."
},
dataBound: onDataBound,
columns: [
{ field: "salutation", title: "Salutation", width: "130px" },
{ field: "fullName", title: "Full Name", template: '<a class="fw-bold" href="' + contactDetailLink + '/\#= id#\/1">#= fullName#</a>', width: "188px" },
{ field: "status", title: "Status", width: "115px", template: userStatusMarkup },
{ field: "contactType", title: "Contact Type", width: "108px" },
{ field: "primaryEmailContact", title: "Primary Email Contact", template: '<a class="fw-bold d-inline pe-0" href="mailto:#= primaryEmailContact#" target="_blank" rel="noopener">#= primaryEmailContact#</a>', width: "248px" },
{ field: "businessPhone", title: "Business Phone", width: "180px" },
{ field: "phoneExtension", title: "Business Phone Extension", width: "265px" },
{ field: "mobilePhone", title: "Mobile Phone", width: "180px" },
{ field: "updatedDate", title: "Last Updated Date", width: "188px", format: "{0:d MMM yyyy}" }
],
pageable: {
buttonCount: buttonCount,
pageSizes: false,
messages: {
display: "" // set it to an empty string
}
}
});
$("#kendo-table").data("kendoGrid").dataSource.pageSize(10);
});
</script>
1 answer
110 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
744 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
