How can I specify the text to be displayed in JAWS for the icons in DatePicker and DateTimePicker?
By default, when I use JAWS to look at the elements of the screen, the following is displayed for DatePickers and DateTimePickers:
DatePicker
Hire Date Edit MM/DD/YYYY
select Button
DateTimePicker
Shift Start Edit MM/DD/YYYY H:M t
select Button
select Button
These "select Button" entries correspond to the calendar icon (for both) and the clock icon (for DateTimePicker).
When I have multiple buttons on the screen (or even when it's a DateTimePicker), there are multiple entries that say "select Button" and the user doesn't know what they are. I'd like to set them so that they'd say something like the following:
DatePicker
Hire Date Edit MM/DD/YYYY
Set Hire Date Button
DateTimePicker
Shift Start Edit MM/DD/YYYY H:M t
Set Shift Start Date Button
Set Shift Start Time Button
I can do this by manually adding the "aria-label" attribute to the appropriate span ("k-icon k-i-calendar" for the calendar, "k-icon k-i-clock" for the clock) when debugging (e.g., F12), but can't seem to figure out how to do it on the control itself in code. Here's how I have the controls defined:
01./* HTML Body */02. 03.<input id="hireDatePicker" aria-label="@UserInterface.NewHire_HireDatePicker_Text" /> 04.<input id="shiftStartDateTimePicker" aria-label="@UserInterface.NewHire_ShiftStartDateTimePicker_Text" />05. 06./* $(document).ready(function () */07. 08.$('#hireDatePicker').kendoDatePicker({09. value:new Date(),10. ARIATemplate: "Date: #=kendo.toString(data.current, 'G')#"11.});12. 13.$('#shiftStartDateTimePicker').kendoDateTimePicker({14. value:new Date(),15. interval:60,16. change: startDateTimeChange,17. ARIATemplate: "Date: #=kendo.toString(data.current, 'G')#"18.});I have a kendo map inside a bootstrap modal.
Inside tha modal I have a div tag for the map:
<div id="map"></div>The javascript I use for loading the map is this one:
$("#map").kendoMap({ controls: { }, center: [45.873275, 9.366302], zoom: 7, layers: [{ type: "tile", urlTemplate: "http://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png", subdomains: ["a", "b", "c"], attribution: "© <a href='http://osm.org/copyright'>OpenStreetMap contributors</a>" }], markers: [{ }], click: onMapClick, });
The map is created with controls in the right position, but the map itself is positioned partially outside the div.
Tiles are not called in that part since map is centered outside the div on the right, and missing tiles of course appear only if you fire a mouse event on the map.
I attach a screenshot to show result.
Kind regards
Paolo
The result is the
When using KendoUI widgets with ES6 modules, those widgets' pop-up elements become detached from their respective controls as you scroll down the web page, making them pretty well useless. The issue happens on IE 11 and Firefox, but not Chrome.
I'm using Babel to transpile the ES6 code and modules into ES5-compatible code, and Webpack for my module loader. I've tried to follow the Telerik documentation athttp://docs.telerik.com/kendo-ui/third-party/webpack, although that uses CommonJS style requires rather than ES6/Babel. Is that the problem, maybe?
I thought, at first, that it might be a problem with Webpack, so I tested it a second time with SystemJS, again following theTelerik documentation athttp://docs.telerik.com/kendo-ui/third-party/systemjs, although again, that uses CommonJS style requires rather than ES6/Babel.
I've set up Github repositories that demonstrate the problem here:
https://github.com/brownieboy/kendo-webpack-bugtest
https://github.com/brownieboy/kendo-systemjs
Follow the Readme instructions to install (requires Node/npm). The readme files for both repositories show screenshots of the problem. For convenience, the examples in the two repositories use the open source version of Kendo, but the same problem occurs in the Pro version. The examples use the Kendo DatePicker control, but it happens in other controls too, such as the Kendo DropDown control, and the filter boxes that you get at the top of the Kend Grid.
If I can't find a solution to this, then I may have to rewrite my current project to abandon the use of ES6 and modules altogether, and go back to dumb script tags with everything in global scope. Needless to say, that will not be a happy time for me, so any assistance will be gratefully received!!!
The only mention of POST method in the Scheduler documentation is in the section pertaining to PDF files.
I would like to make a POST request to save and update meetings.
Currently, when I attempt to save an entry my Scheduler makes the following request:
GET http://ubnode/meeting?_id=56bcab3a2df7994c5a073201&created_by=andrewwimley&…dard+Time)&desc=asdf&mediator_LawyerIDs%5B%5D=475840&meeting_result=Manual 404 (Not Found)
Also, is there any way to get rid of everything after the "?" ?
Here is my kendo scheduler constructor. Sorry that it is lengthy, but I'm not entirely sure which parts are relevant.
$("#scheduler").kendoScheduler({ date: new Date(), startTime: new Date(), height: 750, eventTemplate: $("#event-template").html(), //kendo.template(eventTemplateString), //$("#event-template").html(), editable: { template: $("#editorx").html() }, add: scheduler_add, //editable: false, dataBound: function(e) { if (!dangLoad) { dangLoad = true;//wut? ok Brenden. DANGLOAD hideEvent(); } //console.log(e); var scheduler = this; var view = scheduler.view(); view.table.find("td[role=gridcell]").each(function() { var element = $(this); var slot = scheduler.slotByElement(element); if (slot.startDate < new Date) { element.addClass("greyCell"); } }); $("#scheduler").kendoTooltip({ filter: ".k-event", position: "top", width: 250, content: kendo.template($('#templatezz').html()) //content: "Tooltip content" }); }, change: function(e) { console.log("Changing."); if (user.role == "read-only") { console.log("You can not execute this action from a read-only account"); e.preventDefault(); return 1; } console.log('change'); if (e.event.result == 'Manual') {} else { alert("cannot change " + e.event.case_name + " as it was created in Access"); e.preventDefault(); } //e.preventDefault(); //console.log("Editing", e.event.title); }, edit: function(e) { this.one("save", function () { console.log("saving: \n"); console.log(e); e.preventDefault(); }); if (user.role == "read-only") { alert("You can not perform this action from a read-only account"); e.preventDefault(); showReadOnlyModal(e.event); return 1; } console.log(meds); console.log(e.event.created_by); //If role is mediator and created by mediator, its true //If role is cm and created by cm or admin, its true if (user.role == "mediator") { editRights = _.contains(meds, e.event.created_by); } else { editRights = !_.contains(meds, e.event.created_by); //Admins edit everything not created by a mediator. } console.log("edit rights: " + editRights); if (!editRights) { e.preventDefault(); alert("You do not have the right to edit this entry."); return 1; } //Find in the mediator list the name of user, determine if created by is case manager or mediator //Use on get who creadted modified? console.log("editing"); var addr, body, subject; //For automated emails. addr = ""; console.log(e.event.mediatorIds); //subject = "A meeting scheduled for: " + e.event.start + " has been cancelled." //body = "This is an automated alert to let you know the meeting starting on: " + e.event.start + " has been changed by: " + user.name + "."; /*if (e.event.mediatorIds) { $.each(e.event.mediatorIds, function (k, v) { console.log(v); console.log(medMap); //Finding the mediators... var person = _.find( medMap, {"mediator_LawyerID": v}); addr += person.email; addr += ";"; console.log(addr); }); }*/ if (e.event.result == 'Manual') { console.log(e.event); var getInfoPromise = getWhoCreatedModified(e.event.MeetingID); console.log(e.event.MeetingID); getInfoPromise.then(onGetWhoCreatedModifiedComplete, onErrorFunction); } else { showPartyInfoModal(e.event.parties, e.event.description, e.event.caseNumber, e.event); e.preventDefault(); } }, remove: function(e) { if (user.role == "read-only") { console.log("You can not execute this action from a read-only account"); e.preventDefault(); return 1; } if (e.event.result == 'Manual') { console.log("hey you try and remove"); console.log(e); var meetingToDelete = e.event.MeetingID; var deleteEntryPromise = deleteEntry(meetingToDelete); deleteEntryPromise.then(onDeleteEntryComplete, onErrorFunction); } else { alert("cannot remove " + e.event.case_name + " as it was created in Access"); e.preventDefault(); } //e.preventDefault(); //console.log("Editing", e.event.title); }, //editable: editRights, views: [{ type: "day" }, { type: "workWeek" }, { type: "month", selected: true, eventHeight: 35 }, { type: "agenda" } /*, { type: "timeline" }, { type: "timelineWorkWeek" }, { type: "timelineMonth" }*/ ], timezone: "US/Central", dataSource: { //data: scheduleDataz, transport: { read: { //url: "getData.pl?ACTION=GETMEETINGS", //node rewrite url: "/meetings", dataType: "jsonp" // "jsonp" is required for cross-domain requests; use "json" for same-domain requests }, update: { url: "/meeting", //node rewrite dataType: "jsonp" } }, requestEnd: function(e) { //check the "response" argument to skip the local operations if (e.type === "read" && e.response) { console.log("Current request is 'read'."); console.log(e.response); } }, schema: { model: { id: "MeetingID", fields: { MeetingID: { from: "meeting_id" }, title: { from: "case_name", defaultValue: "No title", validation: { required: true } }, start: { type: "date", from: "start_time" }, end: { type: "date", from: "end_time" }, description: { from: "desc" }, caseManager: { from: "case_manager", nullable: true }, mediatorIds: { from: "mediator_LawyerIDs" }, result: { from: "meeting_result", nullable: true }, caseNumber: { from: "case_number", nullable: true }, case_location: { from: "location", nullable: true }, parties: { from: "parties", nullable: true }, numParties: { from: "number_of_parties", nullable: true }, created_by: { from: "created_by", nullable: true }, creation_timestamp: { from: "creation_timestamp", nullable: true }, //Recurrence specific fields RecurrenceId: { from: "RecurrenceId" }, RecurrenceRule: { from: "RecurrenceRule" }, RecurrenceException: { from: "RecurrenceException" } } } } }, resources: [{ field: "result", title: "Meeting Result", dataSource: [{ text: "_", value: "Manual", color: "#661155" }, { text: "Canceled", value: "Canceled", color: "#CCCCCC" }, { text: "Settled", value: "Settled" }, { text: "Not settled", value: "Not settled" }, { text: "Settled Without Mediation", value: "Settled w/o Mediation" }] }, { field: "mediatorIds", // The field of the scheduler event which contains the resource identifier title: "Mediator", // The label displayed in the scheduler edit form for this resource dataSource: mediatorResources, multiple: true }] });
Thank you in advance.
When trying to filter the ProcessType column in the example below, I receive a 400 error. If I change the field to ProcessTypeID from ProcessType the filter works but than the add/edit options do not work correctly. I tried injecting a custom filter and received the same result. I followed the api documentation to the GitHub Odata 4 with WebAPI controller example, downloaded and ran locally and get the same result. Can someone point in the right direction on this?
<div id="grid"></div><script> $(function() { $("#grid").kendoGrid({ dataSource: { type: "odata-v4", transport: { read: { url: "/odata/Processes", data: { $expand: "ProcessType" } }, update: { url: function (data) { return "/odata/Processes(" + data.ProcessID + ")"; } }, create: { url: "/odata/Processes?$expand=ProcessType" } }, schema: { model: { id: "ProcessID", fields: { ProcessID: { type: "number" }, Name: { type: "string" }, Description: { type: "string" }, ProcessTypeID: { type: "number" }, Enabled: { type: "boolean", defaultValue: true }, DDLFile: { type: "string" }, Type: { type: "string" }, Method: { type: "string" }, Parameter: { type: "string" }, ProcessType: { defaultValue: { ProcessTypeID: 1, Name: "Import" } } } } }, requestEnd: function(e) { if (e.type == "create") { // Make a read request to expand Category. By default the OData controller doesn't expand on create. this.read(); } }, change: function(e) { console.log(e.sender); }, pageSize: 10, serverFiltering: true, serverPaging: true, serverSorting: true }, height: "485px", toolbar: ["create"], sortable: { mode: "multiple", allowUnsort: true }, filterable: { mode: "row" }, resizable: true, scrollable: true, pageable: { pageSizes: [10, 25, 50], buttonCount: 5 }, columns: [ { command: "edit", width: 200 }, { field: "Name", width: 400 }, { field: "Description", width: 400 }, { field: "ProcessType", width: 300, title: "Process Type", template: "#: ProcessType ? ProcessType.Name : '' #", editor: processTypeEditor }, { field: "Enabled", width: 170 }, { field: "DLLFile", width: 400 }, { field: "Type", width: 400 }, { field: "Method", width: 400 }, { field: "Parameter", width: 400 } ], editable: "inline", edit: function (e) { if (!e.model.isNew()) { var processType = $(e.container.find('input[data-role="dropdownlist"]')).data("kendoDropDownList"); processType.enable(false); e.container.find('input[name=Name]').attr('disabled', 'disabled').addClass('k-state-disabled'); } }, save: function (e) { e.model.set("ProcessTypeID", e.model.ProcessType.ProcessTypeID); } }); }); function processTypeEditor(container, options) { console.log(options); $('<input required data-text-field="Name" data-value-field="ProcessTypeID" data-bind="value:' + options.field + '"/>') .appendTo(container) .kendoDropDownList({ autoBind: false, dataSource: { type: "odata-v4", transport: { read: { url: "/odata/ProcessTypes" } } } }); }</script>Kendo UI version: 2016.1.112
I have a scheduler (using AngularJS), within it, I have 3 resource groups:
Task Type has a data source with the colour (sample later) and the other two data sources do not. If I comment out those other two data sources in resources then the background color of task type appears correctly. If I uncomment employee and store groups again then I lose the Task Type color again.
01.resources: [02. {03. title: "Task",04. field: "TaskType",05. dataSource: [06. {07. text: "Normal Shift",08. value: "Shift",09. color: "#337ab7"10. },11. {12. text: "Need cover",13. value: "Need cover",14. color: "#d9534f"15. },16. {17. text: "Covering Shift",18. value: "Covering Shift",19. color: "#d9edf7"20. },21. {22. text: "Unplanned leave",23. value: "Unplanned",24. color: "#f2dede"25. },26. {27. text: "Planned leave",28. value: "Planned leave",29. color: "#fcf8e3"30. }31. ]32. },33. {34. field: "EmployeeId",35. dataTextField: "ShortName",36. dataValueField: "Id",37. title: "Emplyoee",38. dataSource: [39. data.employee40. ]41. },42. {43. title: "Store",44. field: "AndromedaSiteId",45. dataSource: data.stores,46. dataValueField: "AndromedaSiteId",47. dataTextField: "Name"48. }49.]
The task data is all correct. Value fields are selected correctly in the model... but I really want that color from task type (without forcing it through myself preferably, or commenting out the other two resources).
Any ideas?
Best Regards,
Matt
Hi,
I'm trying to modify markers' color dynamically based on datasource info. My marker css looks something like the following:
.k-map . k-marker-Myimage{background-color:red}
And in the markerCreated event, I did something like
markerCreated: function(e)
{
e.marker.options.shape = "Myimage";
e.marker.options.shape.css("background-color",e.marker.dataItem.Color);
}
However, the map does not even load at all. Perhaps, I'm doing this wrongly. Would appreciate if you can point me in the right direction. Thanks in advance.
Best Regards,
CH
How can I update a cell in the kendoSpreadsheet through javascript code without it being bound? I want to be able to do something like:
myKendoSpreadsheet.ActiveSheet().cell(0,4) = '56';
I cannot find this in the documentation. I don't want to pull in the entire spreadsheet, just update a single cell.
Thanks,
Scott Hathaway
Bell Helicopter