Questions on Kendo UI for jQuery Forum

3 answers

701 views

[Solved] Synchronize Multiple DropdownLists

I'm working with KendoUI for the first time, and I've got a page that has two theme dropdowns - one in the header and one in the footer. The header one is displayed as long as the page is a certain width, and then once the page hits the breakpoint the header gets hidden and the footer appears w/ it's dropdown.

For reference, I've attached images of the header and footer theme dropdowns. You'll notice that the header dropdown is set to "Black" (and the theme is properly set), but the footer dropdown is still set to "Default" (which is the Boot Strap theme, we've just changed the name).

What I need to happen is that when one dropdown is changed, the other is updated (ie. change the theme via the header to black, resize the page and the footer dropdown shows black).

This is the HTML structure for both dropdowns (they are identical except for the IDs):

<div class="theme-section content-box hidden-xs">

<span class="k-widget k-dropdown k-header pull-right" unselectable="on" role="listbox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-owns="theme-selector_listbox" aria-disabled="false" aria-readonly="false" aria-busy="false" aria-activedescendant="theme-selector_option_selected">

<select id="theme_header" class="theme-selector" data-role="dropdownlist" style="display: none;">

<option value="bootstrap">Default</option>

<option value="default">Grey</option>

<option value="black">Black</option>

<option value="blueopal">BlueOpal</option>

<option value="metro">Metro</option>

<option value="silver">Silver</option>

</select>

</span>

</div>

And this is the code that is changing the theme on the dropdown change event (which does work for both dropdowns, since it's based on a class):

$(".theme-selector").kendoDropDownList({

change: function(){

$('#css').attr('href', '/javascript/kendoui/2015.1.408/styles/kendo.' + this.value() + '.min.css');

$('#m_css').attr('href', '/javascript/kendoui/2015.1.408/styles/kendo.' + this.value() + '.mobile.min.css');

}

});

I was hoping to add something like this (based on various Google searches) to the change function:

$("#theme_footer").data("kendoDropDownList").select(function(dataItem) {

return dataItem.Value === this.Value();

});

But it doesn't work. I'd also like to be able to check which dropdown was modified, so that only the other has to be updated, but I haven't been able to find a way to get the ID of the dropdown inside the change event.

Also, if I'm going in the completely wrong direction with this, please let me know - as I mentioned, this is the first time I've worked w/ Kendo.

DropDownList

answered on 27 Apr 2015

1 answer

206 views

DropDownList with Grouping and MVVM not working

Hi,

I started using the recently released Grouping functionality for the DropDownList widget. While using it, I noticed a possible bug while using it with MVVM.

See the following jsfiddle: http://jsfiddle.net/hobojoe/1ce02bpe/

You can see that when using MVVM, the first group name is not displayed, only the following ones.

While working with regular JS widget initialization, everything is working as expected.

Am I doing something wrong? Is the a workaround that I can follow?

Thanks

DropDownList

answered on 27 Apr 2015

6 answers

352 views

Datasource in template not syncing

Hi

I need some assistance with something I'm working on. I have a kendo grid that's populated by a datasource that queries a view in a sql database. (I use a view as it contains a join between 2 tables, getting the latest status of the parent record that was added in a child table). The grid has a custom command column that launches a window that uses a template. That template contains a form that binds to another datasource that's filtered by the id of the selected row in it's parent grid. That form binds ok and the values appear as they should, but the datasource will not sync. I get a 400 bad request error when I click the save button. Could somebody please look at the code below and see if they can figure out why it won't sync. Any help would be greatly appreciated.

Regards

<body>

<form id="form1" runat="server">

<h2>Incidents</h2>

<div id="grid"></div>

<div id="details"></div>

<script>

var wnd;

var detailsTemplate;

$(document).ready(function () {

// DECLARING DATASOURCES TO BE USED AS LOOKUPS

// Request Origins

var requestoriginsDataSource = new kendo.data.DataSource({

type: "odata",

transport: {

read: { url: "/DORAModelService.svc/lkupRequestOrigins", async: false }

},

serverSorting: true,

sort: { field: "text", dir: "asc" }

});

requestoriginsDataSource.read();

// Request Types

var requesttypeDataSource = new kendo.data.DataSource({

type: "odata",

transport: {

read: { url: "/DORAModelService.svc/lkupRequestTypes", async: false }

},

serverSorting: true,

sort: { field: "text", dir: "asc" }

});

requesttypeDataSource.read();

// Incident Source Type

var incidentsourceDataSource = new kendo.data.DataSource({

type: "odata",

transport: {

read: { url: "/DORAModelService.svc/lkupSources", async: false }

},

serverSorting: true,

sort: { field: "text", dir: "asc" }

});

incidentsourceDataSource.read();

// Managers

var managersDataSource = new kendo.data.DataSource({

type: "odata",

transport: {

read: { url: "/DORAModelService.svc/lkupUsers", async: false }

},

serverSorting: true,

sort: { field: "text", dir: "asc" }

});

managersDataSource.read();

// Incident DataSource - this uses a view that joins 2 tables.

// It's required to get the latest status of the incidents displayed

var dataSource = new kendo.data.DataSource({

type: "odata",

serverFiltering: true,

serverSorting: true,

sort: { field: "IncidentID", dir: "desc" },

transport: {

read: {

url: "/DORAModelService.svc/Vw_Incidents", async: false

}

},

schema: {

model: {

id: "IncidentID",

fields: {

IncidentID: { type: "number" },

}

});

dataSource.read();

$("#grid").kendoGrid({

dataSource: dataSource,

height: 550,

filterable: true,

sortable: true,

pageable: true,

editable: true,

toolbar: ["create", "save", "cancel"],

columns: [{

field: "IncidentID",

filterable: false,

width: 80

},

"Incident",

"LatestStatus",

{ command: { text: "View Details", click: showDetails }, title: " ", width: "180px" }

]

});

wnd = $("#details")

.kendoWindow({

title: "Incident Details",

modal: true,

visible: false,

resizable: false,

width: "98%",

open: function (e) {

this.wrapper.css({ top: 5 });

}

}).data("kendoWindow");

detailsTemplate = kendo.template($("#detailstemplate").html());

var selectedincidentDataSource

function showDetails(e) {

e.preventDefault();

var dataItem = this.dataItem($(e.currentTarget).closest("tr"));

wnd.content(detailsTemplate(dataItem));

wnd.center().open();

selectedincidentDataSource = new kendo.data.DataSource({

type: "odata",

serverFiltering: true,

transport: {

read: {

url: "/DORAModelService.svc/TblIncidents", async: false,

data: {

$expand: "TbIncidentStatus"

}

},

update: {

url: function (data) {

return "/DORAModelService.svc/TblIncidents" + "(" + dataItem.IncidentID + ")";

}

},

create: {

url: "/DORAModelService.svc/TblIncidents"

},

destroy: {

url: function (data) {

return "/DORAModelService.svc/TblIncidents" + "(" + dataItem.IncidentID + ")";

}

},

filter: {

logic: "and",

filters: [

{ field: "IncidentID", operator: "eq", value: dataItem.IncidentID }

]

},

batch: true,

schema: {

model: {

id: "IncidentID",

fields: {

IncidentID: { type: "number" },

Incident: { type: "string" },

ManagerID: { type: "number" },

LoggedDate: { type: "date", format: "{0:dd/MM/yyyy}" },

IncidentDate: { type: "date", format: "{0:dd/MM/yyyy}" },

SourceID: { type: "number" },

IncidentsTypeID: { type: "number" },

IncidentOriginID: { type: "number" },

Logger: { type: "string" }

}

})

selectedincidentDataSource.read();

kendo.bind($("#selectedincident"), selectedincidentDataSource.view()[0]);

$("#managers").kendoDropDownList({

dataSource: managersDataSource,

dataTextField: "text",

dataValueField: "value"

}).data("kendoDropDownList")

$("#origin").kendoDropDownList({

dataSource: requestoriginsDataSource,

dataTextField: "text",

dataValueField: "value"

}).data("kendoDropDownList")

$("#type").kendoDropDownList({

dataSource: requesttypeDataSource,

dataTextField: "text",

dataValueField: "value"

}).data("kendoDropDownList")

$("#source").kendoDropDownList({

dataSource: incidentsourceDataSource,

dataTextField: "text",

dataValueField: "value"

}).data("kendoDropDownList")

$("#hSave").click(function () {

selectedincidentDataSource.sync();

});

} // Finish ShowDetails

});

</script>

<script type="text/x-kendo-template" id="detailstemplate">

<div id="selectedincident" class="container">

<div class="container">

<div class="row spacer">

<div class="col-md-5">

<label>ID</label><span data-bind="text: IncidentID"></span><br />

<label>Name</label><input type="text" id="incidents1" class="k-textbox w300" data-bind="value: Incident" /><br />

<label>Incident Date</label><input class="w300" type="text" id="incidentdate" data-bind="value: IncidentDate" data-role="datepicker" data-format="dd/MM/yyyy" /><br />

<label>Logged Date</label><input class="w300" type="text" id="loggeddate" data-role="datepicker" data-bind="value: LoggedDate" data-format="dd/MM/yyyy" /><br />

<label>Manager</label><input class="w300" type="text" id="managers" class="input400" data-bind="value: ManagerID" /><br />

</div>

<div class="col-md-5">

<label>Origin</label><input type="text" id="origin" class="w300" data-bind="value: IncidentOriginID" /><br />

<label>Type</label><input type="text" id="type" class="w300" data-bind="value: IncidentsTypeID" /><br />

<label>Source</label><input type="text" id="source" class="w300" data-bind="value: SourceID" /><br />

<a href="\\#" class="k-button" id="hSave">Save</a>

</div>

</script>

</form>

</body>

Templates

answered on 27 Apr 2015

3 answers

91 views

Schedule dialog without the day/month view behind it

We will be having two pages to manage schedules (create, edit/delete). To create a schedule, we will have a page with a grid on it, where the user will select which report they want to schedule and click a button to schedule it. I would like to have the schedule controls either on their own page (click btn navigates to that page) or in a popup directly from the grid (this depends on how many other form elements we need in the schedule info: email info, report name, etc).

There will be another page where the user can manage the schedules and that would be a more appropriate page to edit/delete scheduled reports.

How can I do this without having the rest of the scheduler on screen (i.e. the day/month/calendar view)?

Thanks,

--Ed

Scheduler

answered on 27 Apr 2015

3 answers

732 views

Uncaught TypeError: Cannot read property 'start' of undefined

Hi,

I'm using the Kendo UI Gantt Chart using the declaration from the basic usage on the demo page : http://demos.telerik.com/kendo-ui/gantt/index

My Declaration is pretty much a copy and paste from the site with a variation to an end-point that is serving static data, and the ID's have been changed to string to support GUID IDs:

My end point is returning :

Tasks:

{"Data":[],"Total":0,"AggregateResults":null,"Errors":null}

Dependency:

{"Data":[],"Total":0,"AggregateResults":null,"Errors":null}

Its currently not returning anything since it is empty.

However, I'm receiving "Uncaught TypeError: Cannot read property 'start' of undefined" on line 52 on kendo.all.min.js:52. I'm not sure what the error is, would you be able to please able to assist ?

Gantt

answered on 26 Apr 2015

2 answers

249 views

Extending Scheduler Views

Hello,

i tried finding info about extending or overriding the views of a kendo ui scheduler, but this thread is all i found

http://www.telerik.com/forums/extending-agenda-view-to-show-whole-month-or-above-

now the thing is those questions (that were posted in the thread) were not answered

what are the fields/members we can override?

So how do I know which fields I can override when I extend the view

also i searched in the documentation and reference for the syntax used "kendo.ui.AgendaView"

from this example http://jsbin.com/xoxifavovu/1/edit?js,output

, but i couldn't find any info,

please direct me to a source where i can learn more about this (or extending or overriding kendo ui in general)

Thank you

Scheduler

answered on 26 Apr 2015

3 answers

280 views

Reload Grid DataSource from ViewModel

Hello! I'm having some trouble reloading/refreshing my grid's dataSource from the viewModel and it's giving me kittens.

Here's how it works: The CompanyContactsGrid shows a list of all contacts that are associated with the specific company they are viewing. The user can add contacts to the company by clicking an Add Contact button, which opens a modal. Inside this modal is a grid of all Contacts in the system that are not yet associated with a Company. The user can select checkboxes next to Contacts to select that contact to add to the Company. Once they click the save button in the modal header, all selected Contacts will be updated with the Company's ID.

What I'm missing: Once the Contacts are updated, the modal should close (and right now it does), and the CompanyContactsGrid should refresh/reload (which it does not.) I have tried many things to get the DataSource and the Grid to refresh/reload, but to no avail.

What I've tried: viewModelContacts.contactsDataSource.read() , viewModelContacts.contactsDataSource.sync() , viewModelContacts.contactsDataSource.fetch() , $('#CompanyContactsGrid').data("kendoGrid").dataSource.read() , $('#CompanyContactsGrid').data("kendoGrid").refresh() etc.

Any help/advice/thoughts would be greatly appreciated!

01. var viewModelContacts = kendo.observable({

02. contactsDataSource: new kendo.data.DataSource({

03. transport: {

04. read: {

05. url: "/Contact/GetContactsByCompany",

06. dataType: "json",

07. data: {

08. id: $("#Company_CompanyId").val()

09. }

10. },

11. },

12. schema: {

13. model: {

14. id: "Id",

15. fields: {

16. ContactId: { editable: false, nullable: true },

17. Name: {},

18. ContactType: { type: "number" },

19. ContactTypeDisplay: {},

20. WorkPhone: {},

21. CellPhone: {},

22. Email: {}

23. }

24. },

25. errors: "errorMsg"

26. },

27. pageSize: 100,

28. error: function (e) {

29. toastr.options = {

30. "positionClass": "toast-bottom-full-width"

31. };

32. toastr.error('Unable to save new contact' + e.errors, 'Uh Oh!');

33. }

34. }),

35. addContactToCompany: function() {

36. var companyContacts = [];

37. $("input[name='addToCompany']:checked").each(function () {

38. companyContacts.push(parseInt($(this).val()));

39. })

40.

41. $.ajax({

42. type: "POST",

43. url: "/Contact/UpdateCompany",

44. data: { companyContacts: companyContacts, companyId: $('#Company_CompanyId').val() },

45. dataType: "json",

46. success: function () {

47. $('#CompanyContactAddModal').modal('hide');

48. viewModelContacts.contactsDataSource.read();

49. }

50. });

51. }

52. });

53.

54. kendo.bind($('#CompanyContactsWrapper'), viewModelContacts);

55.

56.$("#CompanyContactsGrid").kendoGrid({

57. dataSource: viewModelContacts.get("contactsDataSource"),

58. });

59.

60. $('#btnAddExistingContacts').on("click", function () {

61. viewModelContacts.addContactToCompany();

62. });

Grid

answered on 24 Apr 2015

7 answers

2.1K+ views

Radio group checked binding and templates - does not work

I do following: my view model has an "items" array, what I want to render as a radio group via template and source binding:

var viewModel = kendo.observable({

selectedValue:"1",

id:"radiogroup",

items:[

{caption:"item_0", value:"0"},

{caption:"item_1", value:"1"},

{caption:"item_2", value:"2"}

]

});

and html:

<div id="test">

Selected Value: <span data-bind="text:selectedValue"></span>

<div data-bind="source:items" data-template="radio-template"></div>

</div>

<script id="radio-template" type="text/x-kendo-template">

<div>

<input type="radio" data-bind="attr:{name:id}, value:value, checked:selectedValue" />

<label data-bind="text:caption"></label>

</div>

</script>

Fiddle:
http://jsfiddle.net/ctbcZ/7/

It renders correctly, but if I select radio button it does not fire changing "selectedValue"

Actually, in this scenario "checked" binding should be applied to parent model, but as far as I understood, in a nested model I have both parent and child model, is this correct? If yes, this is very bad, because values from nested models overwrites parent if they have same name.

Is it possible in template refer only to current model ("data" does not work for example for "value" binding)?

Is it possible to refer parent model members, or send a link to parent model as template option? I need at least 2 things from parent model: name, which should be the same for radios and selectedValue to set.

Why selectedValue in my example does not changes?

Please help

MVVM

answered on 24 Apr 2015

2 answers

360 views

Export to Excel not working with ClientGroupFooterTemplate and data variable

I have a column in an MVC grid with grouped data defined like this...

columns.Bound(m => m.Location).ClientGroupFooterTemplate("#= data.parent().value #");

This causes the excel export feature to fail. It works with the standard aggregate values like 'sum' but if any of the columns have a group footer template that references the 'data' variable it causes the excel export to fail.

Grid

answered on 24 Apr 2015

1 answer

111 views

Sortable end event: too many items in list

I've created a jsFiddle to show the issue.

http://jsfiddle.net/edsinek/wh9wf5fq/

drag and reorder the items and in the end event, there should be 2 items in the list, but it shows there are 3. How can I make sure I always have 2 items in the end event?

In the real code, I have a numbered list and when I reorder, I want to update the numbers, but the incorrect number of items is interfering with the re-numbering code.

Thanks,

--Ed

Sortable

answered on 24 Apr 2015