Questions on Kendo UI for jQuery Forum

7 answers

272 views

All Meetings Missing in Internet Explorer

In Chrome my scheduler works fine, but in IE 11) no meetings show up under the same configurations that show meetings in Chrome. There are no errors in the developer console. Could anyone indicate what could be going wrong with Internet Explorer? I have heard it doesn't accept event.preventDefault(), which I use often.

Here is my entire configuration:

$("#scheduler").kendoScheduler({

/* date: new Date(),

startTime: new Date(),*/

timezone: "US/Central",

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 (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 (e.event.created_by == "SOL Converter") {

console.log("Created by SOL Converter");

editRights = false;

} else if (e.event.created_by == "MOCSync") {

console.log("Created by SOL Converter");

editRights = false;

}

if (!editRights) {

//alert("You do not have the right to edit this entry.");

showReadOnlyModal(e.event);

e.preventDefault();

return 1;

}

console.log("editing");

var addr, body, subject; //For automated emails.

addr = "";

console.log(e.event.mediatorIds);

e.event.last_updated = Date();

e.event.last_updated_by = Cookies.get("name");

if (e.event.result == 'Manual') {

console.log(e.event);

var getInfoPromise = getWhoCreatedModified(e.event._id);

console.log(e.event._id);

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 == "mediator") {

editRights = _.contains(meds, e.event.created_by);

} else {

editRights = !_.contains(meds, e.event.created_by); //Admins edit everything not created by a mediator.

}

if (e.event.created_by == "SOL Converter") {

console.log("Created by SOL Converter");

editRights = false;

} else if (e.event.created_by == "MOCSync") {

console.log("Created by SOL Converter");

editRights = false;

}

console.log("edit rights: " + editRights);

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._id;

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);

},

views: [{

type: "day"

}, {

type: "workWeek"

}, {

type: "month",

selected: true,

eventHeight: 35

}, {

type: "agenda"

}

/*, {

type: "timeline"

}, {

type: "timelineWorkWeek"

}, {

type: "timelineMonth"

}*/

],

dataSource: {

//data: scheduleDataz,

transport: {

read: {

//url: "getData.pl?ACTION=GETMEETINGS", //node rewrite

url: "/meetings",

dataType: "JSON" // "jsonp" is required for cross-domain requests; use "json" for same-domain requests

},

update: {

url: "/meeting", //node rewrite

dataType: "JSON",

type: "POST",

contentType: "application/json; charset=utf-8"

},

//last_updated, last_updated_by

destroy: {

url: "/deleteMeeting",

dataType: "JSON",

type: "POST",

contentType: "application/json; charset=utf-8"

},

parameterMap: function (data, op) {

return JSON.stringify(data);

}

},

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: {

parse: function (res) {

var meetings = [];

for (var i = 0; i < res.length; i++) {

var meet = res[i];

meet.start_time = new Date(meet.start_time);

meet.end_time = new Date(meet.end_time);

meetings.push(meet);

}

return meetings;

},

data: function (data) {

console.log(data);

if (data.length == 0) {

return [];

}

return data;

},

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: "case_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

}]

});

Scheduler

answered on 03 Jun 2016

5 answers

438 views

Scheduler, timelineMonth, current day visible

I have a Scheduler that loads with the timelineMonth view. By default, the user sees the days of the month starting at 1 on the left and, depending on the width of the screen, cutting off at about the 9th or 10th. The user then scrolls right to see the rest of the month.

Is it possible to have the Scheduler load so that the current day is visible in the viewport?

Scheduler

answered on 03 Jun 2016

1 answer

79 views

Veto GridEditEvent?

I have a grid using inline editing, and I have "edit" buttons on each row to initiate editing. If one row is already editing when the user asks to edit another row, I would like to give the user the option not to edit the new row.

I tried both our standard confirmation modal (which is asynchronous and uses Promises) and window.confirm(), and in each case the new row is moved into edit mode before I have a chance to cancel the edit.

Is there some way to do this?

Grid

answered on 03 Jun 2016

2 answers

111 views

Is Grid the right choice?

for the UI in the RepeatingTables image attached?

Using AngularJS + Bootstrap + KendoUI.

No interactivity is required on the content at this time; no need to expand/collapse the groups/detail at all.

Aggregates are required for the Number column on each Group.

I've tried with a Main+Detail Grid implementation with so far disastrous results (AttemptWithGrids image attached).

Would there be a better choice of widgets for this (or plain ng-repeat)?

NOTE: Copy to Clipboard is required, for pasting into a Word document, but I think I've got that figured out.

Grid

answered on 02 Jun 2016

13 answers

1.1K+ views

Scheduler, footer, custom button

How can I add my own custom button to the Scheduler?

I'd like a simple 'Add new event' button, and ideally I'd like to place it in the footer instead of the 'Show business hours' button which I don't need. If not possible then in the header bar next to the views selector would be fine.

The button would then launch my already-existing custom editor template for the add/edit form.

Is this possible?

Scheduler

answered on 02 Jun 2016

1 answer

205 views

Spreadsheet displays incorrect values after formatting

Cells change how they display values depending on their formatting. This behavior can be seen in the Telerik demo at http://demos.telerik.com/kendo-ui/spreadsheet/index

To reproduce using the demo spreadsheet:

Blank one of the numeric cells. Use C3, for this example
Select column C
Format column C to be 'Number' using the 'Custom Format' dropdown from the toolbar
Note that C3 is still blank, as expected.
With column C still selected, click 'Decrease Decimal' (on the toolbar) twice to remove the decimal component of the number
Note that cells without numbers in them (either originally empty or originally with a number, such as C3) now contain 'Undefined' rather than being blank. Increasing the decimal has no effect on this behavior.
Repeat the action from Step 3 (above). Problem disappears until Step 5 is executed.

Expected behavior would be that empty cells remain empty regardless of format.

Spreadsheet

answered on 02 Jun 2016

5 answers

699 views

optionLabel as a normal option

Hi !

I'd like to know if it's possible to display the optionLabel as the first option of the DropDownList. I need this functionality to be homogeenous with other select components.

I also would like to know if it's possible to manage the "required" attribute if I create an option by myself without using the "optionLabel".

Thanks for your help.

DropDownList

answered on 02 Jun 2016

1 answer

124 views

Drag/drop of elements?

Hi,

Is there a way to implement dragging/dropping of elements on the surface? I am making a game and would like to move the pieces around.

A simple prototype board can be found here: https://plnkr.co/edit/Lwo10dzpKYz1Aa34uESb?p=preview

Thanks,

Virgil

Drawing API

answered on 02 Jun 2016

1 answer

115 views

Kendo-UI Toolbar overflow out of Knockout.js context

I'm trying to find a solution to this problem:

http://stackoverflow.com/questions/37555022/kendo-ui-toolbar-overflow-out-of-knockout-js-context

Toolbar

answered on 02 Jun 2016

1 answer

253 views

Multiple gridview and show only one loading in the middile of page

Hi,

I have tabpane in the page, under the pane no one, i have one spiltter, there is one gridview at left side, and another gridview at right side, there is ajax call to populate data, can i have one single loading icon shown in the middle of page instead of showing loading icon of each kendo gridview when ajax call to populate data take place.

Please note that multiple ajax calls to populate left and right gridviews could take place simultaneously, currently, it is showing two loading icons (left and right gridview loading icon). I just need one single loading icon shown in the middle of page and i do not want gridview icon to show. When left and right gridview ajax calls complete, then end the loading icon and remove the icon from the middle of the page.

Thanks.

Grid

answered on 02 Jun 2016