Questions on Kendo UI for jQuery Forum

1 answer

128 views

[Solved] Does the Angular 2 version support css flex?

As this is not supported in the jquery version, is it supported in the new angular 2 control?

http://kendoui-feedback.telerik.com/forums/127393-kendo-ui-feedback/suggestions/18624256-add-support-for-css-flex-to-kendo-grid

Grid

answered on 17 Mar 2017

1 answer

182 views

[Solved] Area chart rendering vertical lines instead of area

Hello,

I am trying to display an area chart, using dates as categories with values every 30min and xAxis label every hour.

However, areas are not rendered properly : it's showing vertical lines instead. I think it's a bug, because it's rendering fine with another chart type (for example line chart).

You can see the issue on the attached screenshot and code/demo here : http://jsbin.com/votegowidu/edit?html,output

Thanks in advance.

Best regards

Charts

answered on 17 Mar 2017

15 answers

2.6K+ views

Calculated fields in model of Datasource

Is it possible to have calculated fields in the datasource items? Kind of like the observable calculated fields?

So for a simple example would be a Orders dataset that returns this in JSON:

- ItemDescription
- Qty
- Amt

But then I want to bind this to a data grid and have a column for total that is Qty * Amt and I want the grid to be editable in batch mode so that if the Qty changes, it updates the Total. What I am looking for is something way more complex as far as calculations and number columns involved but wanted to give a very simple example.

Could you do this basically with a collection of kendo observable objects where the total property looked something like this:

Total: function() { return Qty * Amt}

Or what is the best practice on stuff like this, I am sure I am not the only one running into this. I am trying to minimize defining my model for the Datasource and again for the View model in MVVM. I would like to do it just once to say what columns are coming across and fill the view model/ datasource.

Data Source

answered on 17 Mar 2017

2 answers

469 views

kendo.drawing.drawDOM freezes when parsing dom with svg image

while capturing the screenshot of the DOM below with kendo.drawing.drawDOM function as PNG with the js script provided below,

the then callback is executed, however, the done callback never executes. The image tag has a src attribute pointing to an SVG image. I understand that the SVG will be ignored, but i am expecting to get an image without SVG content in the end. However again the done callback never gets called.

<span class="grouping-field label label-primary" data-fieldkey="*SERVER.FLD0000007">

<img src="http://localhost:183/Content/images/svg/dimensionAsc.svg">

Month

<span aria-hidden="true" class="field-close glyphicon glyphicon-remove"></span>

</span>

// js code

var draw = kendo.drawing;

draw.drawDOM($(".grouping-field"))

.then(function(root) {

// Chaining the promise via then

return draw.exportImage(root);

})

.done(function(data) {

// Here 'data' is the Base64-encoded image file

kendo.saveAs({

dataURI: data,

fileName: "calendar.png"

});

while capturing the screenshot of the DOM snippet above with kendo.drawing.drawDOM function as PNG with the following script

Drawing API

answered on 16 Mar 2017

1 answer

393 views

Two export buttons (Excel and PDF)

Hi All,

I'm a beginner in kendo UI and i want to implement two export buttons ( excel and pdf) on my grid. Can someone help me?

Best regards

Grid

answered on 16 Mar 2017

26 answers

1.4K+ views

Install Kendo UI Professional Bower Package

The documentation here...

http://docs.telerik.com/kendo-ui/install/bower#install-kendo-ui-professional-bower-package

Says that this repository exists...

https://bower.telerik.com/bower-kendo-ui.git

But I don't see that it does.

Which causes errors and keeps me from managing my kendo-ui js libraries the same as my other client-side libraries. Is there some trick to getting access to this repository? (I have a DevComplete License)

Thanks.

General Discussions

answered on 16 Mar 2017

3 answers

528 views

JSON Data Source Issue

Hi,
I'm working on MultiSelect + JSON as data source, i'm having issue to display the json result in Multiselect.
It display to me as undefined.

Below is my multiselect code

var multiselect = $("#ddlSelectCostCenter").data("kendoMultiSelect")

var dataSource = new kendo.data.DataSource({

data: [],

pageSize: 500

});

multiselect.setDataSource(dataSource);

if (result !== "") {

dataSource = new kendo.data.DataSource({

type:"json",

data: JSON.stringify(result),

pageSize: 500

});

multiselect.setDataSource(dataSource);

multiselect.dataTextField = "Name";

multiselect.dataValueField = "Value";

}

My Json is like below.
[{"Value":"0000","Name":"ALL"},{"Value":"0111","Name":"0111 ~ Facility Management"},{"Value":"0113","Name":"0113 ~ NP Logistics Setup"},{"Value":"1001","Name":"1001 ~ TV KL Tec President Office"},{"Value":"2001","Name":"2001 ~ North Chip Engineering"},{"Value":"2002","Name":"2002 ~ TV AM CHIP"},{"Value":"2003","Name":"2003 ~ AutoMount Metecon"},{"Value":"2004","Name":"2004 ~ HM Office"},{"Value":"2005","Name":"2005 ~ BOARD BIZ-HM Office"},{"Value":"2006","Name":"2006 ~ Sony MFC Sys"},{"Value":"2007","Name":"2007 ~ AM North Oth"},{"Value":"2009","Name":"2009 ~ TV AM Office"},{"Value":"2010","Name":"2010 ~ AM North DISC"},{"Value":"2011","Name":"2011 ~ AM North CHIP"}]

What do I missed out?

Thank

MultiSelect

answered on 16 Mar 2017

1 answer

427 views

Selecting rows using non-editable cells

Kendo Team,

Is there a way to make a row selectable, even if the user clicks on an non-editable row? From my perspective, it seems I need to utilize a click event handler on the grid and progammatically select the row. Is there an easier way?

As a follow up to a related issue, I noticed there are some performance issues in IE with grids having many columns, particularly when the grid's selectable property is set. Do you have any more insight about this phenomenon? How do you think manually selecting the rows via the grid's click event will affect performance IE, assuming you know the deeper cause of IE's slow response with large grids?

Thank you..

Grid

answered on 16 Mar 2017

3 answers

452 views

Stop CHANGE event on Databound??!

Hi All,

I have a ui selection widget made up of a 1. radiobutton group, 2. kendoDropDownList, 3. Another kendoDropDownList

Each control is dependent on the latter. the dropdownlists have default dataitems with "Select..." options.

I cannot get this to work because of the chain of events that are fired. I mean.. it works but change events are fired on databound which causes screwd up calls to the corresponding datasource read functions.

I need this sequence of events to happen.

1. User changes radiobuttongroup value
2. dropdownlist #1 ds read is called and result is bound
3. dropdownlist #1 is ENABLED and dataitem at index 0 is selected programmatically. dropdownlist #2 ds read is NOT called yet.
4. User changes dropdownlist#1 value, dropdownlist value#2 ds read is called
5. dropdownlist #2 is ENABLED and dataitem at index 0 is selected programmatically. CHANGE EVENT for dropdownlist #2 IS NOT FIRED
6. User changes dropdownlist #2 and change event for it is fired.

If user selects new value from radiobuttongroup the following should happen. ddl#2 is disabled with dataitem at index 0 selected. NO EVENTS should be fired for ddl#2

Based on how the events work for both the datasource and the ddl i cannot make this work. I have observed strange behavior where changing the radiobuttongroup causes the next mouse click ANYWHERE on the page, including empty elements causes the change event of the ddl#1 is fired??

Is there some way to have a dropdownlists ds read be called without the dropdownlist's change event being fired??

Is there some way to programatically change the selected value/dataitem of the dropdownlist without the the dropdownlist's change event being fired??

Thanks!

General Discussions

answered on 16 Mar 2017

2 answers

176 views

Display Issue - Frozen Columns + Toolbar

Hi Guys,

I have just tripped over a display issue when using frozen columns along with a toolbar.

To illustrate the problem please see the following dojo

http://dojo.telerik.com/okUSa

If you run this example and hit the 'refresh' button the toolbar gets moved down by 1px causing the display of a 2px border at the top and the removal of the bottom border.

With the 'locked' attribute commented out the toolbar remains static.

Investigations show the problem looks to be caused be the injection of the 'k-load-mask' div.

Without frozen columns this div gets inserted after the 'k-grid-content' div, but with frozen columns the div gets inserted before the 'k-grid-toolbar' div causing the unsightly display issue.

Regards
Alan

Grid

answered on 16 Mar 2017