Questions on Kendo UI for jQuery Forum

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

571 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

196 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.0K+ 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

378 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

566 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

350 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

1 answer

64 views

Kendo UI R1 2017 custom gradients bug

Hello guys,

Seems like the custom gradients stopped working after the last release. Here is the links:

http://docs.telerik.com/kendo-ui/controls/charts/how-to/appearance/create-left-to-right-gradient-multi-color-values

http://dojo.telerik.com/

It looks like the chart API doesn't get the all dataviz gradients and instead it uses the default gradients. Any ideas how to fix this issue?

Charts

answered on 24 Jan 2017

3 answers

310 views

scheduler with large data

we are trying to use kendo ui mvc scheduler control to display all the events. Even after using filters, the number of records to display are around 10000. Currently the control is working properly with the records less than 1000.Is there a way to load all the 10k records at a time?

Scheduler

answered on 24 Jan 2017