Questions on Kendo UI for jQuery Forum

6 answers

603 views

I am using a Kendo MultiSelect (within a column of a tr-ng-grid) and I am trying to add a functionality where an item is deselected when another is selected.

Ex. I have the options 1, 2, 3, and UNKNOWN; only 2 and 3 are selected. The rule is when UNKNOWN is selected, the rest are deselected and when 1, 2, or 3 is selected, UNKNOWN is deselected.

The problem that I am facing is that the model and the view is not always in sync, which poses a problem.

Here is the code.

index.html (short version)

1.<dir-multi-select selected-items="gridItem.items" />

directive.js

01.(function() {

02. 'use strict';

03. angular.module('moduleA').directive('dirMultiSelect', function() {

04. return {

05. restrict : 'E',

06. scope : {

07. selectedItems : '='

08. },

09. controller : 'MultiSelectController',

10. templateUrl : 'multiselect.html',

11. replace : true

12. }

13. })

14.})();

multiselect.html

01.<div ng-init="init()">

02. <select kendo-multi-select

03. id="'multiSelect'"

04. ng-if="dataSource"

05. k-data-source="dataSource"

06. k-data-text-field="'name'"

07. k-data-value-field="'id'"

08. k-ng-model="selectedItems"

09. k-rebind="selectedItems"

10. k-value-primitive=true

11. k-auto-close=false

12. k-data-placeholder="'Select items...'"

13. k-on-select="onSelect(kendoEvent)">

14. </select>

15.</div>

multiselect.controller.js

01.(function() {

02. angular.module('moduleA').controller(

03. 'MultiSelectController',

04. [

05. '$scope',

06. function($scope) {

07. $scope.init = function() {

08. $scope.dataSource = //http call

09. }

10.

11. $scope.onSelect = function(kendoEvent) {

12. var selectedItem = kendoEvent.sender.dataItem(kendoEvent.item.index());

13. if (selectedItem ) {

14. autoDeselectItems(kendoEvent, selectedItem);

15. }

16. }

17.

18. function autoDeselectItems(kendoEvent, selectedItem) {

19. if (isItemIdUnknown(selectedItem.id)) {

20. kendoEvent.preventDefault();

21. if (!doesSelectedItemContainUnknown()) {

22. setSelectedItemsToUnknown();

23. }

24. }

25. else {

26. if (doesSelectedItemsContainUnknown()) {

27. kendoEvent.preventDefault();

28. setSelectedItems(selectedItem);

29. }

30. else {

31. if (doesSelectedItemsContain(selectedItem.id)

32. && $scope.selectedItems.length == 1) {

33. setSelectedItemsToUnknown();

34. }

35.

36. }

37. }

38. }

39.

40. function isItemIdUnknown(id) {

41. return id == "0";

42. }

43.

44. function doesSelectedItemsContainUnknown() {

45. for (var i = 0; i < $scope.selectedItems.length; i++) {

46. if (isItemIdUnknown($scope.selectedItems[i].id)) {

47. return true;

48. }

49. }

50. return false;

51. }

52.

53. function doesSelectedItemsContain(id) {

54. for (var i = 0; i < $scope.selectedItems.length; i++) {

55. if ($scope.selectedItems[i].id == id) {

56. return true;

57. }

58. }

59. return false;

60. }

61.

62. function removeUnknownFromSelectedItems() {

63. for (var i = 0; i < $scope.selectedItems.length; i++) {

64. if ($scope.selectedItems[i].id == 0) { // "UNKNOWN"

65. $scope.selectedItems.splice(i, 1);

66. break;

67. }

68. }

69. }

70.

71. function setSelectedItemsToUnknown() {

72. $scope.selectedItems = [ {

73. id : "0",

74. name : "UNKNOWN"

75. } ];

76. }

77.

78. function setSelectedItems(ids) {

79. if (ids) {

80. $scope.selectedItems = [];

81. if (ids.length) {

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

83. $scope.selectedItems.push({

84. id : ids[i].id,

85. name : ids[i].name

86. });

87. }

88. }

89. else {

90. $scope.selectedItems.push({

91. id : ids.id,

92. name : ids.name

93. });

94. }

95. }

96. }

97. } ]);

98.})();

a

MultiSelect

answered on 16 Jun 2016

3 answers

680 views

Strange resize/columns fit when multiple headers

I have strange and unexpected behavior with my Grid with multiple headers (3 levels) when i resize window.

Here is how it's look like: https://gyazo.com/969e62e758a1b583c06cdcc6af056acf

They dissapear after resize . I'm using autoFitColumn() for all columns in Grid, and some cells keep width stable, but these with multiple headers has some problems.

var gridOptions = {

pdf: {

allPages: true,

avoidLinks: true,

paperSize: "A4",

margin: { top: "2cm", left: "1cm", right: "1cm", bottom: "1cm" },

landscape: true,

repeatHeaders: true,

template: $("#page-template").html(),

scale: 0.5,

title: 'Raport dzienny'

},

columnMenu : true,

groupable: true,

scrollable: true,

sortable: true,

filterable: true,

reorderable: true,

lockable: true,

resizable: true,

dataSource:{

data: this.data,

},

columns : options.columns || this.generateColumns(),

};

This specific column:

{

title: 'Liczniki', columns: [

{

title: 'Kilometrzy', columns: [

{title: 'Początek', field: 'begin_km_counter', format: "{0:n2}"},

{title: 'Koniec', field: 'end_km_counter', format: "{0:n2}"}

]

},

{

title: 'Motogodziny', columns: [

{title: 'Początek', field: 'begin_mth_counter'},

{title: 'Koniec', field: 'end_mth_counter'}

]

},

{

title: 'Przepływomierz', columns: [

{title: 'Początek', field: 'begin_flowmeter_counter'},

{title: 'Koniec', field: 'end_flowmeter_counter'}

]

}

]

},

Grid

answered on 16 Jun 2016

4 answers

406 views

PDF Export overlapping pages

Hi,

I'm trying to export a Grid to PDF as shown in this example:

http://demos.telerik.com/kendo-ui/grid/pdf-export

The problem is that I need to use a bigger pageSize and I just want to export the current page.

If I just modify those options on the given example (setting allPages: false and pageSize:50 ) the resulting PDF splits the current page on 6 chunks, but prints all six of them on the same page, overlapping the output as can be seen on the attached file.

Am I doing something wrong?

Is there any way of achieving the desired behavior?

Thanks,

Carlos

Grid

answered on 16 Jun 2016

1 answer

147 views

[Solved] Navigate to a custom form instead of edit popup

Hi,

I've been looking at the code posted here...

How can this be adapted to navigate to my MVC view Requests\RequestDetail?id= + the ID of the clicked event?

Thanks

Scheduler

answered on 16 Jun 2016

1 answer

91 views

Silverlight Filterable Grid in Kendo

I would like to know whether it is possible to implement a grid layout similar to the option available in SilverLight. Attaching a snapshot of my expectation. The requirement needs to have grid along with a SilverLight filter option. please share links, codes or document which would help to replicate the attached silverlight implementation in Kendo UI.

Short Des : i need both multi select and normal filter in Kendo UI

Grid

answered on 16 Jun 2016

2 answers

306 views

Bubble kendoChart - controlling bubble size

Hi there,

we are hitting some limitations with the out of the box bubble chart when it comes to controlling the actual size of the bubbles as the chart always resizes the bubble based on some relative size logic as it seems. We played around with minSize, maxSize and the actual size of the dataItem in the series but we never get the result we are looking for in terms of consistent size across multiple charts.

Is there an easy way to implement our own resize logic by somehow extending the kendoChart and overriding its "updateBubbleSIzes" function ? We are aware we can deep extend widgets in general, but not specifically how to do that for a specific kendoChart type and a specific function.
We would obviously like to do that on run-time rather then branching of your source code.

Another option would be to turn off relative sizing which seems to have been an option in the past, at least we still see it in the ASP API, is there a way to have that in the JS API and would that give us full control over the bubble sizes?

cheers,
Steve

Charts

answered on 16 Jun 2016

3 answers

891 views

data-bind a viewModel element to the text of a dropdownlist

Hi, I am new to Kendo and would like to know how I can store the text value of a dropdownlist in a viewModel element. I have three cascading dropdowns and the value of two of them is not what I want, it is the actual text of the dropdownlist that I need. As the dropdownlists change I would like to have a hidden html element that has a data-bind="text: viewModel.element" so it would always have the current text of the dropdownlist.

Thank you

MVVM

answered on 16 Jun 2016

6 answers

383 views

Array template using ngRepeat

Hello,

How I can make this example to work?

http://dojo.telerik.com/omuWa/2

Grid

answered on 16 Jun 2016

1 answer

88 views

Incell dropdown, filtered by key in row

Is there a suggested way to have a dropdown template for an editable cell in a grid to have its datasource filtered by the key (or other value) in that specific row in the grid?

Grid

answered on 15 Jun 2016

3 answers

428 views

[Solved] Second series summed and template dataItem

First thank you Veselin Tsvetanov for your help in my previous questions. I did not expect the api would return a long as a string instead of a number so your help was greatly appreciated.

To increase the size of the graph we have to just go with the Code instead of the CodeDesc. However, we would like for the CodeDesc to still appear when the user does a mouseover in the template. I have <div>dataItem.CodeDesc</div><br/> where it would be. I tried #: dataItem.CodeDesc # but it did not recognize dataItem. So I was wondering if I can still grab dataItems from the DataSource in the template.

The next item is concerning the column of CountReqs. Currently the TotalValue column is grouped, is it possible to also group CountReqs at the same time? It appears that if I do a label of CountReqs it grabs the first CountReqs it finds and displays that when the label should be a summation of CountReqs. The second item is in relation to grabbing the CountReqs in the template to also display the number next to the TotalValue. I have the placeholder as \\#\\# Opportunities.

My sample is at http://dojo.telerik.com/@dhighfield/EfuVA. Please update at will.

Thank you in advance for your assistance.

v/r,

Dave Highfield

Charts

answered on 15 Jun 2016