Questions on Kendo UI for jQuery Forum

3 answers

390 views

I have a chart that is only displayed once the user selects a checkbox. Consequently I set the chart options and load the data once the checkbox is selected.

01.<div ng-controller="chtController">

02. <fieldset>

03. <legend>

04. <span><input type="checkbox" ng-change="loadCostChart()" ng-model="display" /> Cost Chart</span>

05. </legend>

06.

07. <div ng-show="display">

08. <div id="CostChart">

09. <div class="k-content">

10. <div id="chtCost" kendo-chart="chtCost" k-options="costOptions" data-role="chart" class="k-chart"></div>

11. 

12. </div>

13. </div>

14. </div>

15. </fieldset>

16.</div>

The controller for the page is;

01.(function () {

02. 'use strict';

03.

04. angular.module('reportFormsApp')

05. .controller('chtController', ['$scope', 'DataService', chtController]);

06.

07. function chtController($scope, DataService) {

08. $scope.costData = [];

09. $scope.display = false;

10.

11. function activate() {

12. console.log('Setting chart options...');

13.

14. // Set the chart options...

15. $scope.costOptions = {

16. dataSource: {

17. data: $scope.costData

18. },

19. title: {

20. text: '(Evc) Cost and Schedule Variances',

21. font: '22px Trebuchet MS, Bold',

22. color: 'black'

23. },

24. legend: {

25. position: 'bottom'

26. },

27. seriesDefaults: {

28. type: "column",

29. stack: false

30. },

31. series: [{

32. name: 'Budget',

33. field: 'budget',

34. categoryField: 'date' //,

35. //color: 'blue'

36. }, {

37. name: 'Run Budget',

38. field: 'runBudget',

39. categoryField: 'date' //,

40. //color: 'yellow'

41. }, {

42. name: 'Earned',

43. field: 'earned',

44. categoryField: 'date' //,

45. //color: 'red'

46. }],

47. categoryAxis: {

48. baseUnit: 'years'

49. },

50. valueAxis: {

51. line: {

52. visible: true

53. }

54. }

55. }

56. };

57.

58. $scope.loadCostChart = function() {

59. console.log('Loading Cost data...');

60.

61. DataService.getCostChartData().then(

62. // Success...

63. function (results) {

64. var data = results.data;

65.

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

67. data[i].date = new Date(data[i].date);

68. }

69.

70. $scope.costData = data;

71.

72. console.log($scope.costData);

73. console.log('Loaded Cost data...');

74.

75. console.log('Updating chtCost...');

76. var chtData = new kendo.data.DataSource($scope.costData);

77. $scope.chtCost.dataSource.data = chtData;

78. console.log('Updated chtCost...');

79. },

80. // Error...

81. function (results) {

82. var msg = "The following error was reported when attempting to retrieve the Cost Chart data;\n\n" + results.statusText;

83. alert(msg);

84. });

85.

86. };

87.

88. $(document).ready(function () {

89. console.log('Document ready...')

90. activate();

91. });

92. };

93.})();

Everything appears to work correctly - all of the "console.log" lines are executed, all of the data is written to the console on line 72, no errors are displayed.

I have also tried;

$scope.chtCost.dataSource.data = $scope.costData;

for line 77; all to no avail.

What am I doing wrong?

Charts

answered on 04 Feb 2015

3 answers

268 views

Excel Export - Group Header issue and hidden columns

Hi Guys,

Have just spotted an issue with the Excel export whereby the group header text is not being exported correctly.

To replicate

- Run the Grid Export to Excel demo

- Hide the 'Units In Stock' column

- Export to Excel

The resultant spreadsheet ignores the groupHeaderTemplate and reverts to just showing the column fieldname:value (See attached screenshot)

Regards
Alan

Grid

answered on 04 Feb 2015

2 answers

145 views

Checked List of CategoryAxis items

I have a requirement to have a multi-series column chart with the series legend on the top AND have the list of categoryAxis items in a "legend" on the right (in the location where a right series legend would be) - the categoryAxis items in the right "legend" area will be checkboxes and the user can check/uncheck a categoryAxis item and have it show/hide in the chart dynamically.

Given the chart here, the addition would be having the categoryAxis items (2002, 2003, etc) as a list of checkboxes off to the right of the chart (initially all checked). When you uncheck an item, that categoryAxis item would disappear from the chart; when you check an item, it would appear in the chart. Unless specific logic was put in place, I guess you would be able to hide all categoryAxis items

So, I have a couple questions:

1. Can categoryAxis items be hidden/shown dynamically and have the rest of the data "fill the space" (so there wouldn't be a "gap" where the hidden categoryAxis used to be?) without having to refresh the dataSource?
2. How do you recommend approaching the checkbox list of categoryAxis items?

Thanks,
John

Charts

answered on 04 Feb 2015

1 answer

78 views

Kendo UI Grid - Auto initialiize model object

I have a web api controller as follows:

// PUT: api/VHFMasterLists

[ResponseType(typeof(void))]

public IHttpActionResult PutVHFMasterList(VHFMasterList vHFMasterList)

{

if (!ModelState.IsValid)

{

return BadRequest(ModelState);

}

return StatusCode(HttpStatusCode.NoContent);

}



I then have a datasource as follows:




var tmpdataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: crudServiceBaseUrl + "api/VHFMasterLists",
                    dataType: "json"
                },
                update: {
                    url: crudServiceBaseUrl + "api/VHFMasterLists",
                    dataType: "json",
                    data: { Frequency:"GGGG", Id: 1 },
                    type: "PUT",
                    contentType: "application/json; charset=utf-8",
 
                },
                parameterMap: function (model, operation) {
                    if (operation !== "read" && model) {
                        return kendo.stringify(model);
                    }
                }
            }, 
            batch: true,
            pageSize: 20,
            schema: {
                model: {
                    id: "Id",
                    fields: {
                        Id: { editable: false,
                            nullable: false,
                            type: "number"
                        },
                        Frequency: { type: "string"}
                    }
                }
            }
        });

As you can see with the line " data: { Frequency:"GGGG", Id: 1 }," I am setting the data so that the VHFMasterList object that is sent to my controller is initialized properly. My question is how do I make it so that I can skip this step? Is it possible to have kendo know how to initialize this object based on the data in the grid?And as a side note if anyone knows, if this is not possible, how would I read this data from the kendo grid so that I can set my object with the actual data of the row? Thanks.

Grid

answered on 04 Feb 2015

1 answer

225 views

[Solved] Disable hide/show click of plot bands

Hi, I've been asked to disable the plot band feature which allows you click in the legend to hide/show a given bar. Is this possible?

Charts

answered on 04 Feb 2015

1 answer

222 views

Prevent double click when clicking on arraw for detailgrid

I have a grid, each row has a detail grid.
Every row has an arrow (first-cell), when you click on that arrow the detail-grid appears.
All very nice and well done.

I have a double click function attached to the grid which opens a custom popup window.
But it may not be opened when clicked on the arrow !
How can I achieve this ? This is my double-click function :

$("#grid").on("dblclick", " tbody > tr", function () {

var grid = $("#grid").data("kendoGrid");

gridWaSelectdRowIndex = $(this).closest("tr").index();

alert ('open dialog now);

}

});

How do I prevent de open-dialog to show up when clicked on the arrow for the detail-grid ?

Grid

answered on 04 Feb 2015

1 answer

98 views

Odd dependency links

Hello,

In my gantt view, I am facing an issue just on IE, the dependency link is not lways properly displayed, in the attached example, the link is not pointing on the corresponding task, it goes above it.
I could replicate this issue from the dependencies telerik demo (http://dojo.telerik.com/iCELE); after running the program, please add several tasks above the first one, each time you add a new task the dependency link is moved vertically to the top (as in the second screenshot).

Thanks in advance.

Gantt

answered on 04 Feb 2015

15 answers

761 views

Enter Key Not Working Consistently in Filter Box

In a Kendo Grid, the enter key does not work the same in a filter box for a string column as it does for a numeric column.

Example:
For column of type string --
1) I click the filter icon on the row header of a column. This column contains values of type string. The filter dialog opens.
2) I ignore the drop down, leaving it at its default value ('Starts with').
3) I type text that I want to filter by.
4) Without moving my cursor, I hit the enter key. The filter dialog disappears and the filter is applied.

For column of type integer --
1) I click the filter icon on the row header of a column. This column contains values of type string. The filter dialog opens.
2) I ignore the drop down, leaving it at its default value ('Is equal to').
3) I type a number that I want to filter by.
4) Without moving my cursor, I hit the enter key. **The filter dialog DOES NOT disappear as it does for a string column**. This appears to be incorrect behavior, as it is not intuitive and does not match the behavior for a column of type string.

This problem was found when using Kendo UI Complete v2013.3.1119. I don't believe this issue was present in the previous version (v2013.2.918).

Grid

answered on 03 Feb 2015

3 answers

365 views

[Solved] Programatically select Row based on QueryString parameter

Hey guys, I've found a couple threads here that were helpful, but there must be some difference in my situation as I am unable to get them to work properly. I have a page with a JavaScript kendoGrid using an ODATA service as its dataSource. The dataSource primary key is "id" and on document.ready I want to page to, and select, the matching Row based on the data field "Id" and the QueryString parameter.

The below code all functions correctly as far as the alert(caseId) in the document.ready function. After that nothing happens. Can anyone see what I'm doing wrong?

Also, I have tried replacing caseId in the dataSource.get(caseId) with a hard coded Id but it did not work...

001.<!DOCTYPE html>

002.<html>

003. <head>

004. <title></title>

005. <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css" />

006. <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.bootstrap.min.css" />

007.

008. 

009. <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

010. <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">

011.

012. <script src="http://cdn.kendostatic.com/2014.1.318/js/jquery.min.js"></script>

013. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

014. <script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>

015. </head>

016. <body>

017. <div class="container">

018. <div class="jumbotron">

019. <h1>Environmental Affairs <small>Document Manager</small></h1>

020. <p>Upload concern related documents and images</p>

021. </div>

022. <script>

023. function getParameterByName(name) {

024. name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");

025. var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),

026. results = regex.exec(location.search);

027. return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));

028. }

029. function isFormValid() {

030. var x = document.getElementById("field1").value;

031. if (x == null || x == "") {

032. alert("Select a case");

033. return false;

034. }

035. }

036. function getSelectedCase() {

037. //Selecting Grid

038. var gview = $("#grid").data("kendoGrid");

039. //Getting selected item

040. var selectedItem = gview.dataItem(gview.select());

041. //accessing selected rows data

042. document.getElementById("field1").value = selectedItem.EnforcementNumber;

043. }

044. </script>

045. 

046. <form action="upload.php" onsubmit="return isFormValid()" method="post" enctype="multipart/form-data">

047. <div class="form-group">

048. <label for="field2">Choose a document or image...</label>

049. <input name="fileToUpload" id="fileToUpload" type="file" class="form-control input-lg"/>

050. <input id="field1" name="field1" type="hidden"/>

051. </div>

052. <label for="grid">Select a case to attach your document to...</label>

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

054. <script>

055. // document ready fires when the whole page is ready

056. // and all elements, scripts, styles have been loaded

057. $(function () {

058. // regex for some date parsing

059. // select the div and create the grid element

060. $("#grid").kendoGrid({

061. dataSource: {

062. type: "odata",

063. transport: {

064. read: "http://envaffairs/complaints/ApplicationData.svc/Complaints"

065. },

066. sort: {

067. field: "EnforcementNumber",

068. dir: "desc"

069. },

070. schema: {

071. data: "value",

072. total: "['odata.count']",

073. model: {

074. fields: {

075. Id: {type: "number" },

076. EnforcementNumber: {type: "string" },

077. ParcelNumber: {type: "string" },

078. Street: {type: "string" },

079. DateAndTimeOfComplaint: {type: "datetime" },

080. TypeOfComplaint: {type: "string" }

081. }

082. }

083. },

084. pageSize: 5,

085. serverPaging: false,

086. serverFiltering: true,

087. serverSorting: true

088. },

089. filterable: true,

090. selectable: "row",

091. sortable: true,

092. pageable: true,

093. columns: [

094. {

095. field: "Id",

096. width: 75,

097. filterable: false

098. },

099. {

100. field: "EnforcementNumber",

101. title: "Case"

102. },

103. {

104. field: "ParcelNumber",

105. title: "Parcel"

106. },

107. {

108. field: "Street",

109. title: "Address"

110. },

111. {

112. field: "DateAndTimeOfComplaint",

113. title: "Complaint Date",

114. format: "{0:MM/dd/yyyy}",

115. width: 200

116. },

117. {

118. field: "TypeOfComplaint",

119. title: "Complaint Type"

120. }

121. ]

122.

123. });

124.

125. });

126.

127. $(document).ready(function () {

128. $("#fileToUpload").kendoUpload({

129. multiple: false

130. });

131. var caseId = getParameterByName('id');

132. alert(caseId);

133. var el = $("#grid"),

134. grid = el.data("kendoGrid"),

135. dataSource = grid.dataSource,

136. model = dataSource.get(caseId),

137. index = dataSource.indexOf(model);

138. dataSource.page(index/dataSource.pageSize() + 1);

139. var row = el.find("tbody>tr[data-id=" + model.id + "]");

140. grid.select(row);

141. });

142. </script>

143. <br>

144. <label>Enter a file description and click Submit...</label>

145. <div class="input-group">

146. <input id="field2" name="field2" type="text" class="form-control" placeholder="File Description"/>

147. <span class="input-group-btn">

148. <input type="submit" onclick="return getSelectedCase();" class="btn btn-default" value="Submit"/>

149. </span>

150. </div>

151. </form>

152. </div>

153. </body>

154.</html>

Grid

answered on 03 Feb 2015

1 answer

108 views

Conditional Custom Image

Hello,

In my treeview how do I display a different custom image if hasChildren is true.

Thanks,
Rich

$("#clientsTree").kendoTreeView({
           dataTextField: "nodeName",
           dragAndDrop: true,
           dataSource: {
               transport: {
                   read: {
                       url: "@Url.Action(MVC.UnityClientProfileManager.ClientProfile.GetAllParentClients())",
                   }
               },
               schema: {
                   model: {
                       id: "nodeId",
                       hasChildren: "hasChildren",
                       fields: {
                           //nodeId: { type: "string" },
                           nodeParentId: { type: "string" },
                           nodeName: { type: "string" },
                           clientId: { type: "number", nullable: true },
                           clientGuid: { type: "string", nullable: true },
                       }
                   }
               }
           },

{
   "nodeId": "/52/",
   "nodeParentId": "/",
   "nodeName": "Preferred Materials, Inc",
   "nodeLevel": 1,
   "hasChildren": false,
   "expanded": false,
   "clientId": 52,
   "clientGuid": "1f3c21db-319b-e311-9b61-00155de1f901"
},
{
   "nodeId": "/78/",
   "nodeParentId": "/",
   "nodeName": "Rich Group",
   "nodeLevel": 1,
   "hasChildren": true,
   "expanded": false,
   "clientId": 78,
   "clientGuid": "46fe584c-3165-e411-953e-00155de1f901"
}

TreeView

answered on 03 Feb 2015