Questions on Kendo UI for jQuery Forum

5 answers

210 views

[Solved] Legend not updating when dataseries are removed

Using kendo stock chart (2015.2.805) with AngularJS (1.3.16) like this

Directive template:

<div kendo-stock-chart="graphCtrl.chartobject" k-options="graphCtrl.chartConfiguration" id="kendo-chart"></div>

Directive controller:

function graphDirectiveController($scope, $timeout, dataService) {

var that = this;

getConfiguration();

that.chartConfiguration = {

theme: "customTheme",

dataSource: new kendo.data.DataSource({

transport: {

read: function (options) {

bondCompareDataService.getGraphData(that.graphId, that.bondIds).then(function (result) {

options.success(result.data);

});

}

},

schema: {

model: {

fields: {

date: { type: "date" }

}

}),

autoBind: false,

title: {

text: ""

},

legend: {

position: "bottom",

visible: true

},

chartArea: {

margin: {

right: 40,

top: 20,

bottom: 20,

left: 10

}

},

dateField: "date",

categoryAxis: {

labels: {

font: "12px Roboto, Helvetica, Arial"

},

title: {

color: "#dddddd"

}

},

series: [],

navigator: {

series: {

field: "navigatorseries",

type: "line",

missingValues: "interpolate"

},

categoryAxis: {

labels: {

font: "12px Roboto, Helvetica, Arial"

}

function getConfiguration () {

dataService.getGraphConfigurations(that.graphid).then(function (result) {

var configurations = result.data;

var chartOptions = that.chartobject.options;

angular.forEach(configurations, function (config) {

chartOptions.series.push({

categoryField: "date",

name: config.name,

field: config.seriesKey,

type: "line",

markers: {

size: 2

},

tooltip: {

visible: true,

template: getTooltipTemplate(config.formatAs)

}

});

refreshData();

that.chartobject.redraw();

});

}

function refreshData () {

that.chartobject.dataSource.read();

that.chartobject.refresh();

}

function getTooltipTemplate (formatAs) {

if (formatAs === "Rate") {

return "<strong>#: series.name # </strong><br/> #: kendo.toString(category, 'd' )#: #: kendo.toString(value, 'n2') #%";

} else {

return "<strong>#: series.name # </strong><br/> #: kendo.toString(category, 'd' )#: #: kendo.toString(value, 'n2') #";

}

From the outside of this directive I can remove data series and call the getConfiguration function which updates the graph correctly, except for the legend which keeps all the series. What do I need to do to remove the legend items which have no matching series?

Thanks,

Casper

Charts

answered on 09 Sep 2015

1 answer

325 views

re upload the selected files on error

Hi,

I am trying to create a custom button "Reupload" for kendo upload. The button should reulodad selected files in case of error during the previous upload.

somthing like this:

....

, error: function (e) {

if ((e.XMLHttpRequest.status != null) && (e.XMLHttpRequest.status == 500))
{
this.wrapper.find(".k-file").removeClass("k-file-error");

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

doSomething.....

});

}

It's possible to create a similar behavior?

My version of kendo UI is v2014.1.416.

Upload

answered on 09 Sep 2015

1 answer

205 views

html in tooltip template

We are trying to display HTML within the chart Tooltip via template and the Tooltip is constructed from the server side.

E.g. template says

#: dataItem.tooltip_html_field #

Here if the tooltip_html_field contains <strong>x</strong> it displays this as is in the final tooltip text and does not display the 'x' in bold.

Any clues what we are missing.

Charts

answered on 09 Sep 2015

1 answer

78 views

kendo.ns does not seem to work with TreeList

Hi
I am unable to use kendo.ns in combination with the TreeList. Here is a JSFiddle to reproduce the error: http://jsfiddle.net/n45h3t4p/1/. I think the data-uid attribute on the rows should contain the namespace

Thanks

TreeList

answered on 09 Sep 2015

3 answers

550 views

How to get around restriction of no record ids of "0"

According to support, Kendo will not allow the use of any record Id of "0" (number zero).

This is a major problem for us as all of our tables utilize auto identity generators that start with 0 as the first record. Since Kendo grid (and possibly other components) will behave badly when there is even a record in the data set with an Id of 0, things do not work.

For example, if there is a record Id 0 in the data set and you use a popup editor it will always go to the create operation of the transport instead of the update operation, even when editing records that have a non-zero Id.

Does anyone know of a way to get around this issue with the Kendo tools?

Changing the backend is not an option as we have dozens of installations comprising thousands of tables and millions of lines of code with client developers making additional changes to the applications, so backend changes are not an option.

We planned to use Kendo as an upgraded front end user interface to the backend systems, but if we cannot get around this issue with a reasonable amount of effort, then Kendo is unusable for us.

Thanks for any ideas,

Ed

Grid

answered on 09 Sep 2015

3 answers

278 views

Kendo and AngularJS integration not working

(function () {

'use strict';

angular

.module('prestart.services', []);

}());

(function () {

'use strict';

angular.module('prestart', [

'prestart.core',

'prestart.services',

'prestart.home'

]);

}());

(function () {

'use strict';

angular

.module('prestart')

.config(function ($stateProvider, $urlRouterProvider, $compileProvider) {

$compileProvider.debugInfoEnabled(false);

$urlRouterProvider.otherwise('/');

$stateProvider

.state('home', {

url: '/home',

cache: false,

controller: 'PrestartCtrl as prestart',

templateUrl: 'www/src/home/prestart.html'

})

});

}());

(function () {

'use strict';

angular

.module('prestart')

.run(function($rootScope, $state){

$state.go('home');

});

}());

(function () {

'use strict';

angular

.module('prestart.home')

.controller('PrestartCtrl', PrestartCtrl);

PrestartCtrl.$inject = ['$scope', 'dataLoaderService'];

function PrestartCtrl($scope, $dataLoaderService) {

var vm = this;

vm.title = "Test title"

vm.equipments = $dataLoaderService.loadPrestartData();

return vm

}

}());

(function () {

'use strict';

angular

.module('prestart.services')

.factory('dataLoaderService', dataLoaderService);

function dataLoaderService() {

return {

loadPrestartData: loadPrestartData

};

// Implementation -----

function loadPrestartData() {

return [

{

Description: 'Blah',

Category: 'Blah'

},

{

Description: 'Blah 1',

Category: 'Blah 1'

}

];

}

}());

Index.html

<body ng-app="prestart">

<div ui-view></div>

</body>

prestart.html

<kendo-mobile-list-view class="item-list" k-data-source="prestart.equipments">

<div k-template>

{{dataItem.Description}}

</div>

</kendo-mobile-list-view>

The out is printed as [Object Object]. If I build kendo datasource for vm.equipments output is blank :(

Any help appreciated.

General Discussions

answered on 09 Sep 2015

2 answers

273 views

Custom template and ownerId multiselect selected value

Hi,

I can't reproduce the default multiselect widget with ownerID field in my custom edit template.

My widget doesn't use the value of the double-clicked line (timeline view).

Can you give me the code for the default template / edit function of the timeline view ?

<div data-container-for="ownerId" class="k-edit-field">

<select id="ownerId" data-bind="value:ownerId" data-role="multiselect" data-value-field="value" data-text-field="text"></select>

</div>

edit: function(e) {

var ownerId = e.container.find("#ownerId").data("kendoMultiSelect");

ownerId.dataSource.data(e.sender.resources[1].dataSource.data());

}

Scheduler

answered on 09 Sep 2015

3 answers

140 views

kendo-mobile-list-view with k-data-source causing memory leak?

Hi,

I'm using the Mobile ListView Widget in combination with AngularJS and a binding to an observable array. Each time when I update an entry in the observable array via the "set" function (triggered by a button), it seems that a new $scope is created (see attached screenshot from AngularJS Batarang Plugin for Chrome) and never deleted again and this leads also to more and more memory consumption (this is the actual problem for my application).This behavior does not occur with other widgets (e.g. Grid).

I have created a small sample with which this behavior can be reproduced which basically is the same example as in http://docs.telerik.com/kendo-ui/AngularJS/data-source (example on the bottom), but with the additional line:

<kendo-mobile-list-view k-data-source="gridData"></kendo-mobile-list-view>

http://dojo.telerik.com/@tobias006/EGUKI/4

(When directly running in the dojo I could not see the same output in the AngularJS scope view from the Batarang plugin, so maybe it has to be run locally)

Without this line, everything seems to be ok, but when using the Mobile ListView widget with k-data-source the memory problem occurs. Is there a way to prevent this?

Thanks for any hints,

Regards,

Th

ListView (Mobile)

answered on 09 Sep 2015

1 answer

73 views

Text disappearing in IE 11

Hi

Again I have encountered a bug in TreeList (which is likely to be caused be IE). When having a TreeList that is loaded from a remote source and expanding multiple items at once in a certain order, text of the items disappears. It seems to happen only in Internet Explorer, I am using IE 11.
You should be able to reproduce the error using the following JS Fiddle: http://jsfiddle.net/n45h3t4p/2/

Thank you very much

TreeList

answered on 09 Sep 2015

3 answers

955 views

[Solved] dynamically change autoBind setting

We have a kendo grid that lists users with roles in our application. When editing a role we want to bind the kendo combobox editor control using one service method that get's the actual employee record (based on EE #) and bind the combobox to that. When creating a new role we want to dynamically search for the employee to be granted a role which requires a separate service method to pattern match on partial name typed into combobox and return the matches. The first scenario works like a charm when autoBind is set to "true" but for the second scenario it is necessary to have the autoBind set to false so it does not try to fire when the datasource is (re)initialized to point to the appropriate service method. I have this functionality being configured when the "edit" event is fired on the grid and looking to see if I'm dealing with a new model or an existing one to set the datasource as necessary but unfortunately there is no way to set the autoBind to false (via API method) and thus the service method for the "create" functionality is called immediately but errors out because the required filter parameters for the service method are not yet available. Am I missing something or is there truly no way to dynamically set/change the autoBind value?

if (e.model.isNew() == false) {

// get the empid of the current record being edited

var empID = e.model.get("EmpID");

// configure $scope.employeeDataSource

$scope.employeeDataSource =

new kendo.data.DataSource({

type: "odata-v4",

transport: {

read:

function (e) {

caoService.getEmployeeFromEmpID(empID).then(function (data) {

e.success(data);