Questions on Kendo UI for jQuery Forum

5 answers

120 views

Filter does not work on 2 or more elements in one cell

Hi

I have two elements in one cell using the return function for this particular field:

function(dataItem) {
return kendo.htmlEncode(dataItem.Title) + "<br>" + kendo.htmlEncode(dataItem.City);
}

The filter does not work anymore, for example searching for "lon" (as in London) does not return any results.

http://dojo.telerik.com/ukOja/9

Mant thanks

Grid

answered on 04 Feb 2015

1 answer

190 views

Trouble With Datetimepicker on Grid Filter

Hi, here is my sample page: http://grumpydesign.com/kendo/date-filter.html

I have 2 issues.

1. How do I customize the filter to just have a date range?

Something like: "between [date] and [date]"

Second, even the filter that's there is not working, I think it's because my JSON is returning the data as a date object, and then I convert it into a string.

I'm totally confused, help!

William

DatePicker

answered on 04 Feb 2015

3 answers

402 views

Load Data After Page is Loaded

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

272 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

149 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

79 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

228 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

229 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

100 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

781 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