Questions on Kendo UI for jQuery Forum

3 answers

483 views

I have combobox control on Angular 2 project. but after set value for it, the text does not show up, but the option in the dropdown gets selected. here is the code:

=====================

<kendo-combobox spellcheck="false" *ngIf="editable" [data]="filteredEarningTypes" [textField]="'DisplayName'" [valueField]="'Code'" [value]="selectedEarningType"
[valuePrimitive]="false"
(selectionChange)="earningTypeChange($event)" >
<template itemTemplate let-dataItem>
{{ dataItem.Code }} - {{ dataItem.Name }}
</template>
</kendo-combobox>

=====================

screen shot attached. can someone help please?

Thanks

ComboBox

answered on 24 Jan 2017

4 answers

703 views

Change TreeView Datasource from remote to local

Hi,

I have a treeview which loads its nodes dynamically on expand, which works fine. I also have a button to 'Expand All' to open all nodes as far as the tree goes.

Unfortunately I have no way of knowing how big the tree is or how deep it goes until the data is loaded. So instead of recursively calling '.expand()' until there are no more closed nodes (which would make 10's of server requests for data), I would rather Retrieve the entire tree, and reset the dataSource to a local one that contains all the entire tree.

I'm having some trouble though, when I reset the DS to local and expand a node, the tree is still making a request call which retrieved the entire tree again as node contents. Note that I am also trying to set loadOnDemand to false, but its having no affect.

Any advice on this scenario would be great.

Thanks,
Grant

TreeView

answered on 24 Jan 2017

1 answer

2.1K+ views

keypress event and NumericTextBox / datepicker

Based on a previous forum post, I now have custom keypress bindings working via typescript for text-boxes and text-areas. I would very much like to extend numerictextbox and datepicker/datetimepicker to support this as well, but the same bindings do not seem to work for those controls. I believe this has to do with the way the actual input gets wrapped for those controls.

I'm currently doing this:

module kendo.data.binders.widget {

export class keypress extends kendo.data.Binder {

init(widget, bindings, options) {

//call the base constructor

kendo.data.Binder.fn.init.call(this, widget.element[0], bindings, options);

}

refresh() {

var that = this,

value = that.bindings["keypress"].get(); //get the value from the View-Model

that.element.custom(value);

}

... and then in the cshtml file, I'm trying to bind the numerictextbox like so:

<div>

<input type="text"

name="SortOrder"

data-role="numerictextbox"

data-bind="value:assetType.SortOrder, events: {change: detailChange, keypress: detailChange}"

data-format="n0"

style="width: 100%;" />

</div>

... but the keypress event does not fire when I do this. Is there a mechanism I can use to get the keypress event to fire/respect MVVM bindings for non-textbox controls?

Thanks in advance!

MVVM

answered on 24 Jan 2017

3 answers

1.1K+ views

Excel export of multiple detail levels

Hi.

I have a Kendo Grid with two detail levels.

Main row (top level)
Details
Details of details

Using this example I am able to export the "Main row" along with the "Details" row. But I am having a hard time exporting the "Details of details" row. I know it should be possible using the approach in the example, but cannot seem to shuffle the code "the right way". Has anyone done this before, and can provide an example?

Thanks.

Grid

answered on 24 Jan 2017

1 answer

592 views

Formatting Date in Detail Template

I have a grid that displays some data. The date column in this schema is never null but shows as :
Created :'/Date(1482849165710)/'

I tried this and it does not change anything:
<li><label>Created :</label>'#= kendo.toString(CreatedDateTime, "dd/MM/yyyy") #'</li>

How can I format this date? And is there something else needed?

Thanks,

Reid

Grid

answered on 24 Jan 2017

1 answer

214 views

Validator requires name attribute

Hi, following on from http://www.telerik.com/forums/why-is-the-span-position-static#NeKbtFbNzUGLtgZqX1kKmg

I notice that if the name attribute is removed, for example, http://dojo.telerik.com/IyoVU/5 then the tooltip is again disappearing. Does the validation require that elements have the name attribute?

Validation

answered on 24 Jan 2017

7 answers

1.1K+ views

[Solved] How to specify a schema for a data with 3 levels for a TreeView

I'm trying to represent a data with 3 level in a TreeView. The documentation about schema shows just one example with one level only. The data goes like this:

components: kendo.observableHierarchy({

data: [

{

label1: "label A", description: "this is label A", subcomponents: [

{labelI: "label AA", value: 1.4 },

{labelI: "label AB", value: 1.68 }

]

},

{

label1: "label B", description: "this is label B", subcomponents: [

{labelI: "label BA", value: 1.7},

{

labelI: "label BB", value: 2.8 , parts:[

{name:"part1"},

{name:"part2"}

]

}

]

}

],

schema:{

model

{

[?????]

}

});

I want to know how to specify the schema in this case. In the case of 2 levels is like this : schema:{model:{children:"subcomponents"}}, but the documentation doesn't help me to determinate how is in a general case. I declare the TreeView like this:

<div id="treeview-div"

data-role="treeview"

data-bind="source: components"

data-checkboxes="{checkChildren: true}"

data-text-field="['label1','labelI','name']">

</div>

How should I specify schema in this case?

TreeView

answered on 24 Jan 2017

3 answers

392 views

ColorPicker has no method refresh().

Hello.

For the 'ColorPicker', 'ColorPalette' there is no method 'refresh()'.
Because of it, I can not change settings ('palette', 'tileSize' and etc) of these components at runtime.
Is there an alternative way to solve this problem?

My code:

01.<div ng-switch-when="ColorPalette" class="demo-item">

02. <div kendo-color-palette="$parent.demoColorPalette"

03. k-options="dataInputOptions">

04. </div>

05.</div>

06.

07.....................................

08.....................................

09.

10.<div ng-switch-when="ColorPalette">

11. <div class="options-section">

12. <div class="options-field">

13. <label for="paletteInput">Palette: </label>

14. <input id="paletteInput"

15. kendo-drop-down-list="$parent.paletteList"

16. required="required"

17. k-options="paletteOptions" />

18. </div>

19.

20. <div class="options-field">

21. <label for="columnsInput">Columns: </label>

22. <input id="columnsInput"

23. kendo-numeric-text-box="columnsNumericBox"

24. k-options="columnsOptions"

25. ng-model="$parent.dataInputOptions.columns" />

26. </div>

27.

28. <div class="options-field">

29. <label for="tileSizeInput">Tile size: </label>

30. <input id="tileSizeInput"

31. kendo-numeric-text-box="tileSizeNumericBox"

32. k-options="tileSizeOptions"

33. ng-model="$parent.dataInputOptions.tileSize" />

34. </div>

35. </div>

36.</div>

01.var vm = $scope;

02.

03.vm.initialize = function () {

04. vm[`demo${vm.selection}`].setOptions(vm.dataInputOptions);

05.

06. if (vm.selection == "AutoComplete" ||

07. vm.selection == "ComboBox" ||

08. vm.selection == "DropDownList" ||

09. vm.selection == "MultiSelect")

10. {

11. vm[`demo${vm.selection}`].setDataSource(vm.dataInputOptions.dataSource);

12. }

13.

14. vm[`demo${vm.selection}`].refresh();

15.}

16.

17.vm.columnsOptions = {

18. min: 5,

19. max: 20

20.}

21.

22.vm.tileSizeOptions = {

23. min: 20,

24. max: 50

25.}

26.

27.vm.paletteOptions = {

28. autoBind: false,

29. dataTextField: "title",

30. select: function(e){

31. var selectedItem = e.sender.dataItem(e.item);

32. vm.dataInputOptions.palette = selectedItem.palette;

33. },

34. dataSource: {

35. data: [

36. {

37. title: 'Office',

38. palette: [

39. "#ffffff", "#000000", "#eeece1", "#1f497d"

40. ]

41. },

42. {

43. title: 'Apex',

44. palette: [

45. "#ffffff", "#000000", "#c9c2d1", "#69676d"

46. ]

47. },

48. {

49. title: 'Austin',

50. palette: [

51. "#ffffff", "#000000", "#caf278", "#3e3d2d"

52. ]

53. },

54. {

55. title: 'Clarity',

56. palette: [

57. "#ffffff", "#292934", "#f3f2dc", "#d2533c"

58. ]

59. },

60. {

61. title: 'SlipStream',

62. palette: [

63. "#ffffff", "#000000", "#b4dcfa", "#212745"

64. ]

65. }

66.

67. ]

68. }

69.}

ColorPicker

answered on 24 Jan 2017

2 answers

589 views

[Solved] Browser crash !! (stack overflow)

Hi,

When I run the sample in the DoJo ( http://dojo.telerik.com/@Insad/uBARI ) on the Opera browser you will see that an infinite loop starts, crashing with a stack overflow.

On other browser you might see the issue as well if the appropriate devtools are used :)

Can someone please explain what is wrong in this straight forward sample?

I can't figure out why this happens.

It is stopping large parts of our development at the moment so please can someone help me with this..

Best regards,

Insad

MVVM

answered on 24 Jan 2017

3 answers

376 views

scheduler browser zoom bug

I have noticed that when I zoom in and out on both firefox and chrome, the time slot cells at times align and are misaligned with the header cells. I understand that a similar issue exists with the kendo grid (http://www.telerik.com/forums/2-bugs-when-zooming-a-grid), however our application needs to be compliant with WCAG 2.0. There is a resize clause specifying that "1.4.4 Resize text: Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality. (Level AA)" ( https://www.w3.org/TR/WCAG20/#visual-audio-contrast-scale).

Please advise.

Scheduler

answered on 24 Jan 2017