Questions on Kendo UI for jQuery Forum

1 answer

7.7K+ views

[Solved] Conditionally set class on rows

I'm using a Kendo grid, razor style, in an MVC application, binding to an ajax data source.

Products in the grid can be one of two types, and I want to apply different styles (background color, bold text, indent) to the different types of rows. I've seen examples using the ClientRowTemplate property, but I don't want to set the entire template for all the cells, as many columns already have their own templates. Isn't there a mechanism to just set a css class on a row based on data from the item it's bound to?

Thanks in advance.

Grid

answered on 09 Sep 2015

5 answers

214 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

332 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

207 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

81 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

560 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

281 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

280 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

147 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

77 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