Questions on Kendo UI for jQuery Forum

1 answer

192 views

[Solved] Model class sets dirty = true even if set event is cancelled

When calling set() on a kendo Model object, the 'dirty' field appears to be set to true even if the set is cancelled from the "set" event. See http://dojo.telerik.com/UMOVU for an example of this behavior.

After a little research, I found that the kendo.data.Model.set() function is setting dirty = true before calling ObservableObject.set():

set: function(field, value, initiator) {

var that = this;

if (that.editable(field)) {

value = that._parse(field, value);

if (!equal(value, that.get(field))) {

that.dirty = true;

ObservableObject.fn.set.call(that, field, value, initiator);

}

},

The problem could be fixed by doing something like this instead:

set: function(field, value, initiator) {

var that = this;

if (that.editable(field)) {

value = that._parse(field, value);

if (!equal(value, that.get(field))) {

// ObservableObject.set() should return a value indicating whether or not the default was prevented.

if(!ObservableObject.fn.set.call(that, field, value, initiator))

that.dirty = true; // Only set dirty = true if the value was actually modified.

}

},

MVVM

answered on 09 Feb 2016

1 answer

179 views

Cascade of virtualized DropDownLists

Using DropDownList elements that use virtualized data sources, is it possible to set (or reset) the values programatically?

In our scenario we have 3 fields (DropDownList elements) which we need to re-set via another event. Each field needs to use the previous fields contents to run through the virtualization mappers to get it's allowable contents. Using an API method I'm retrieving the 3 values which should be set into the UI. However, I have yet to find a way to set all 3 values via javascript in the browser. It appears that I'm running into timing issues where the dataSource.read() has not yet come back with the allowed values prior to setting those values via script code.

Basically I'm looking for some guidance on how to make cascaded virtualized drop down lists where I can set the values from some external event such as the click of a button.

Things I've tried so far:

1. Simply setting the value using $('#identifier').data('kendoDropDownList').value('some value'); <== Can't set the value since it doesn't exist in the data() elements

2. Calling the read method of each drop down first via $('#identifier').data('kendoDropDownList').dataSource.read(), then setting the value (timing issue?) <== same issue as 1 since the read hasn't finished yet.

3. Hacking the jqXHR object which appears to hang off the dataSource.read() method (again timing issue?)

$('#identifier').data('kendoDropDownList').dataSource.read().done = someOtherFunction <== where 'someOtherFunction' actually does the .value() setting, this does actually run the method, but again... timing

4. Adding the necessary element to the data via the .add method, setting the value, then doing the read <== this "appears" to work but the value isn't actually selected after the read returns. Clicking on the dropdown has the placeholder element selected rather than the value

When the user manually interacts with each field I don't have any issues with having the fields set. It's only when trying to do this all via custom javascript code that I'm running into issues.

DropDownList

answered on 09 Feb 2016

3 answers

222 views

How to disabled editable first task..

How can i disable the editable of the first task..

For example... i don't want that the users cans edit the task with Id = 1 ...

prohibited change.. Name, Dates... etc. ONLY FIRST TASK.

The code: e.preventDefault() not work... show error with "bind"

Using

if (e.task.id == 1) {

e.preventDefault()

}

show error: Error en tiempo de ejecución de JavaScript: No se puede obtener la propiedad 'bind' de referencia nula o sin definir

Gantt

answered on 09 Feb 2016

9 answers

1.0K+ views

Creating a kendo-grid with reusable options using AngularJS

How to create a kendo-grid with reusable options using AngularJS?

Besides the default settings, the grid must include a checkbox column dynamically with the option to select all rows. Methods to treat the selections should be part of the directive and, somehow, I should be able to access the rows selected in controller.

Another important behavior is to keep a reference to the grid:

// In the controller : $scope.grid

<div kendo-grid="grid" k-options="gridOptions"></div>

Below an initial path that I imagined, but it is not 100% working because AngularJS not compile information from checkbox column, so do not call the methods of the controller directive. At the same time I'm not sure where force $compile in this code.

myApp.directive('myApp', ['$compile', function ($compile) {

var directive = {

restrict: 'A',

replace: true,

template: '<div></div>',

scope: {

gridConfiguration: '='

},

controller: function ($scope) {

$scope.gridIds = [];

$scope.gridIdsSelected = [];

var updateSelected = function (action, id) {

if (action === 'add' && $scope.gridIdsSelected.indexOf(id) === -1) {

$scope.gridIdsSelected.push(id);

}

if (action === 'remove' && $scope.gridIdsSelected.indexOf(id) !== -1) {

$scope.gridIdsSelected.splice($scope.gridIdsSelected.indexOf(id), 1);

}

};

$scope.updateSelection = function ($event, id) {

var checkbox = $event.target;

var action = (checkbox.checked ? 'add' : 'remove');

updateSelected(action, id);

};

$scope.isSelected = function (id) {

return $scope.gridIdsSelected.indexOf(id) >= 0;

};

$scope.selectAll = function ($event) {

var checkbox = $event.target;

var action = (checkbox.checked ? 'add' : 'remove');

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

var id = $scope.gridIds[i];

updateSelected(action, id);

}

};

},

link: function ($scope, $element, $attrs) {

var baseColumns = [

{

headerTemplate: '<input type="checkbox" id="selectAll" ng-click="selectAll($event)" ng-checked="isSelectedAll()">',

template: '<input type="checkbox" name="selected" ng-checked="isSelected(#=Id#)" ng-click="updateSelection($event, #=Id#)">',

width: 28

}

];

for (var i = 0; i < $scope.gridConfiguration.columns.length; i++) {

var column = $scope.gridConfiguration.columns[i];

baseColumns.push(column);

}

var gridOptions = {...};

var grid = $element.kendoGrid(gridOptions).data("kendoGrid");;

$scope.$parent[$attrs[directive.name]] = grid;

}

};

return directive;

}]);

Grid

answered on 09 Feb 2016

2 answers

99 views

Boxes not aligning on side of legend

Hello, I've ran into a problem with my legend. I need the boxes to align to the left side of each of the legend. Here is my code:

legend:{
position: "bottom",
item: {
visual: function (e) {
var color = e.options.markers.background;
var labelColor = e.options.labels.color;
var rect = new kendo.geometry.Rect([0, 0], [150, 100]);
var layout = new kendo.drawing.Layout(rect, {
alignItems: "right"
});

var marker = new kendo.drawing.Path({
fill: {
color: color
},
stroke: {
color: color
},
}).moveTo(40, 0).lineTo(40, 35).lineTo(5, 35).lineTo(5, 0).close();

var label = new kendo.drawing.Text(e.series.name, [10, 0], {
fill: {
color: labelColor
},
font: "30px sans-serif",
});

layout.append(marker, label);
layout.reflow()

return layout;
}
}

Any ideas?

Charts

answered on 08 Feb 2016

1 answer

109 views

[Solved] crome devtools issue browsing kendo ui html elements

hi,

I experience a severe issue when browsing html elements (kendo ui parts) with chrome 48.0 devtools. (cf attachment)

I get the message "devtools was diconnected from the page" and devtools stop to function when, for instance, I click on the column title of a kendo grid.

You can reproduce this on kendo ui grid demo page (basic usage). Just take the "element inspector" and click on the first column title.

Seems to be a recent issue maybe due to last chrome release ?!

Any clue ?

Laurent.

General Discussions

answered on 08 Feb 2016

1 answer

142 views

Drill through capabilities

Hi,

how can I get drill through capabilities?

for example: from a pie chart, by clicking on one of it's pieces, get to a low level report with that piece parameters.

thanks!

Charts

answered on 08 Feb 2016

3 answers

323 views

Kendo UI Professional Bower package -missing files

Hi,

I have a problem with the bower package. I've seen this page http://docs.telerik.com/kendo-ui/intro/installation/bower-install

I also saw this discussion http://www.telerik.com/forums/bower and a user voice request which marked as completed: http://kendoui-feedback.telerik.com/forums/127393-telerik-kendo-ui-feedback/suggestions/6103564-bower-for-commercial-downloads

However, if I download Kendo UI Professional manually, there is kendo.all.min.js file in there. If I download the package using 'bower install https://bower.telerik.com/bower-kendo-ui.git' there is no such file and no files related to angular. I use angular js and kendo ui angular directives, gauge and line chart in particular. Which files out of the package do I need to use?

Thanks!

General Discussions

answered on 08 Feb 2016

1 answer

575 views

While resize the kendo grid column fix the grid width

Scrollable : {virtual:true} mandatory.

$("#grid").kendoGrid({
dataSource: data,
height: 500,

groupable: true,
sortable: false,

resizable: false,
scrollable: { virtual: true },
// scrollable: false,
resizable: true,

pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},

Data Source

answered on 08 Feb 2016

9 answers

280 views

[Solved] Grid Excel export: font warnings in Apple Numbers

When I export an Excel spreadsheet from the Kendo Grid and then open it with Apple Numbers (the spreadsheet app that ships with Mac OS X), I always get font warnings:

"The font Calibri isn't available on OS X. It was replaced with Trebuchet MS.

"The font Cambria isn't available on OS X. It was replaced with Times New Roman."

I updated my Excel-export code to set the font in each cell to "Times New Roman," and even though I can see that font in all the cells in the spreadsheet, I still get font warnings.

Is there a way to fix this so that my Numbers users don't always have to dismiss a font warning when they open the Kendo-exported XLSX files? Thanks!

Grid

answered on 08 Feb 2016