Questions on Kendo UI for jQuery Forum

1 answer

364 views

Kendo Map layout problem

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

Map

answered on 16 Feb 2016

6 answers

2.7K+ views

[Solved] Display loader or progress when tab loading

Hi,

I must be missing something straight-forward. I have a mix of static and ajax loaded (both via contentUrls and manually loading data via ajax) tab content. What I want to do is display a loader where the tab content will be while the tab content is loading. I have tried adding a loader in the contentElement from the select event handler - but, that prevents contentUrls from working because kendo skips loading the tab is there is content in the contentElement.

How can I display some custom content (like progress ui) in the tab content while a tab is being loaded?
Additionally, how can I know when to stop the loading/progress ui when a tab is displayed (since contentLoad event is not fired unless ajax content was retrieved)?

Thanks for any advice.

TabStrip

answered on 15 Feb 2016

11 answers

163 views

[Solved] ES6 modules scrolling bug - showstopper!

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!!!

General Discussions

answered on 15 Feb 2016

3 answers

271 views

[Solved] Attempting to post data from scheduler to node API send GET request through transport method.

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.

Scheduler

answered on 15 Feb 2016

8 answers

349 views

[Solved] odata-v4 filter foreign key column

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>

Grid

answered on 15 Feb 2016

3 answers

133 views

[Solved] Scheduler - 3 Resource groups + Task Color

Kendo UI version: 2016.1.112

I have a scheduler (using AngularJS), within it, I have 3 resource groups:

Task Type
Employee
Store

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.employee

40. ]

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

Scheduler

answered on 15 Feb 2016

6 answers

458 views

[Solved] Modifying marker background color dyanmically

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

Map

answered on 15 Feb 2016

1 answer

382 views

update a cell programmatically

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

ActionSheet

answered on 15 Feb 2016

5 answers

500 views

[Solved] Bug? Cannot hide column from column menu

With the following grid setup, I cannot hide a particular column through the column menu. Is it a bug?

Grid setup (plunk <= try reproduce it here!)

columnMenu: true
1 column (FirstName) with locked = true, lockable = false, menu = false
1 column (LastName) with locked = true, lockable = true
at least 1 more column with locked = false

If I go to the grid's Column Menu, and go to Columns option. The LastName column's checkbox is disabled - I can't hide that column now. On the other hand, if LastName column has locked = false, the checkbox in the Column Menu is enabled, and I can hide the column.

Best,

Ama

Grid

answered on 15 Feb 2016

3 answers

182 views

pushCreate and paging

Hello,

We have app that uses server-side paging along with client updates supplied via SignalR. Currently, we refresh the grid from the server when an update comes in from SignalR. Due to bandwidth considerations we'd really like to do a pushCreate with the data received from SignalR and avoid the dataset load. This pretty much works, but the pushCreate doesn't drop the last record from the page to make room for the new one, which causes the grid to continue to expand. Simply deleting the last record messes up the total record count.

This fiddle demonstrates the pushCreate behavior: https://jsfiddle.net/jiander/hx7g0Lyo/

Is there some trick to keep the paging clean when using pushCreate?

Regards,

Jim

Grid

answered on 15 Feb 2016