Questions on Kendo UI for jQuery Forum

1 answer

157 views

Binding Issues with Angular TreeView Directive

In addition to issue just raised by Laszlo, the TreeView directive is behaving unexpectedly when child items are added to the underlying ObservableArray.

See snippet here: http://dojo.telerik.com/UCEBO

If you expand the "Foo" node before adding the child item, things work as expected. But if you add the child item before expanding "Foo", all of the existing child items disappear.

TreeView

answered on 02 Feb 2015

2 answers

119 views

Treeview display bugs in Q3 SP1 with angular templates

Hi!

In the official Q3 SP1 release, when a treeview node is expanded, the node's text changes to the unprocessed angular template. See it in action at the official example, click on any node, and it's text will become {{dataItem.text}}

In the latest ("2014.3.1328") build, templates are not evaluated consistently: root item templates show up ok, but if the item's templates contain ng-if, all the ng-ifs in the child nodes seem to evaluate to false on first load. But ng-if-ed items show up after you expand the node's child items...

TreeView

answered on 02 Feb 2015

1 answer

133 views

Issue with Kendo Grid rows multiple drag without holding Ctrl Key during drag of rows is not working, when "Selectable" option set to "Multiple".

Hi Support Team,

I have a problem in multiple dragging of Kendo Grid rows without holding Ctrl key during drag is not working, when, selectable:"multiple" is there in the KendoGrid configuration. If i remove "selectable:multiple" option then, multiple drag functionality without holding Ctrl key is working fine for me. There is some existing functionality based on Selectable:"multiple" option. So i cann't remove it.

Please let me know, How fix this issue. I tried a sample one, which reflect the same issue. Please find the attached file for reference. Your quick response is highly appreciated.

Thanks
Raj

Grid

answered on 02 Feb 2015

7 answers

468 views

[Solved] Row not highlighted after click and change event is subscribed

Hi all,

I have defined three grids on a page configured declarative way, and do data binding with a viewmodel. When I click a row in the first grid (master), the event will be handled by my custom function. This function gets the selected row and it's DataItem and sets the DataItem to a property in viewmodel. This property is bound to the second grid (details). The change event of the second grid is bound to a custom function also. When selecting a row in second grid, the function gets the selected row and it's DataItem. The DataItem will be set to a property in viewmodel, and this property is bound to the third grid.
All data lists in the viemodel are defined as kendo.dataSource, and the viewmodel is defined as kendo.obersvable.

The bindings are working fine, but the selected row in each grid are not highlighted.When I not set the properties in the custom functions, the hightlighting works.

Here are some snippets of my code (in Html and TypeScript):

First grid definition:

1.<div id="headerDataTabsGrid" style="height: 500px; width: 150px;"

2. data-role="grid"

3. data-bind="source: configJson.Tabs, events: { change: configJson.SelectedTabChange }"

4. data-selectable="row"

5. data-scrollable="true"

6. data-columns="[{ 'field': 'UniqueName', title: ' ' }]">

7.</div>

Second grid definition:

01.<div id="headerDataColumnDefinitionsGrid" style="height: 180px; width: 800px;"

02. data-role="grid"

03. data-bind="source: configJson.SelectedTab.ColumnDefinitions,

04. events: { change: configJson.SelectedColumnDefinitionChange, save: configJson.DataSaved }"

05. data-selectable="row"

06. data-scrollable="true"

07. data-editable="{ mode: 'popup' }"

08. data-columns="[{ 'field': 'InternalFieldName', title: 'Interner Feldname' },

09. { 'field': 'CustomControl', title: 'BenutzerSteuerelement' },

10. { 'field': 'OptionalText', title: 'Optionaler Text' },

11. { 'field': 'DataProvider', title: 'Datenverbindung' }]">

12.</div>

Third grid definition:

01.<div id="headerDataColumnDefinitionStatesGrid" style="height: 180px; width: 800px;"

02. data-role="grid"

03. data-bind="source: configJson.SelectedColumnDefinition.States,

04. events: { change: configJson.SelectedStateChange }"

05. data-selectable="row"

06. data-scrollable="true"

07. data-editable="{ mode: 'popup' }"

08. data-columns="[{ 'field': 'Name', title: 'Name', 'width': 300 },

09. { 'field': 'IsVisible', title: 'Sichtbar' },

10. { 'field': 'IsEditable', title: 'Änderbar' },

11. { 'field': 'IsRequired', title: 'Erforderlich' }]">

12.</div>

The viewmodel creation:

01.private _createViewModel(jsonObj: any): any {

02. var self = this;

03.

04. var viewModel = {

05. Tabs: [

06. ],

07. SelectedTab: null,

08. SelectedColumnDefinition: null,

09. SelectedState: null,

10. SelectedTabChange: (e) => { self._onSelectedTabChanged(e); },

11. SelectedColumnDefinitionChange: (e) => { self._onSelectedColumnDefinitionChanged(e); },

12. SelectedStateChange: (e) => { self._onSelectedStateChanged(e); },

13. AddNewColumnDefinition: (e) => { self._onAddNewColumnDefinition(e); },

14. EditColumnDefinition: (e) => { self._onEditColumnDefinition(e); },

15. DeleteColumnDefinition: (e) => { self._onDeleteColumnDefinition(e); },

16. DataSaved: (e) => { self._onDataSaved(e); },

17. AddNewState: (e) => { self._onAddNewState(e); },

18. EditState: (e) => { self._onEditState(e); },

19. DeleteState: (e) => { self._onDeleteState(e); },

20. Store: () => { self._onStoreConfig(viewModel); },

21. CanAddColumnDefinition: false,

22. CanEditColumnDefinition: false,

23. CanDeleteColumnDefinition: false,

24. CanAddState: false,

25. CanEditState: false,

26. CanDeleteState: false,

27. CanDeleteTab: false,

28. CanSave: true

29. };

30.

31. var tempTabs = jsonObj.Tabs[0].Tab;

32.

33. for (var index = 0; index < tempTabs.length; index++) {

34. var tab = tempTabs[index];

35. var newTap = {

36. Title: tab.title,

37. DisplayName: tab.title,

38. UniqueName: tab.UniqueName,

39. OptionalText: "",

40. DataProvider: "",

41. ColumnDefinitions: self._createColumnDefinitionsDataSource(self._getColumnsFromSource(tab.Columns[0]))

42. }

43. viewModel.Tabs.push(newTap);

44. }

45.

46. return kendo.observable(viewModel);

47. }

The change event handling functions:

01.private _onSelectedTabChanged(e: any) {

02. var selectedTab = e.sender.dataItem(e.sender.select());

03. var config = this.data.get("configJson");

04. config.set("CanDeleteTab", true);

05. config.set("CanAddColumnDefinition", true);

06. config.set("CanEditColumnDefinition", false);

07. config.set("CanDeleteColumnDefinition", false);

08. config.set("CanAddState", false);

09. config.set("CanEditState", false);

10. config.set("CanDeleteState", false);

11.

12. var lastSelectedTab = config.get("SelectedTab"); // If comment out, highlighting works.

13. if (lastSelectedTab == null || (lastSelectedTab != null && lastSelectedTab.UniqueName != selectedTab.UniqueName)) {

14. config.set("SelectedTab", selectedTab);

15. config.set("SelectedColumnDefinition", this._createColumnDefinitionsDataSource([]));

16. config.set("SelectedState", this._createStatesDataSource([]));

17. }

18. }

01.private _onSelectedColumnDefinitionChanged(e: any) {

02. var selectedColumnDefinition = e.sender.dataItem(e.sender.select());

03. var config = this.data.get("configJson");

04. config.set("SelectedColumnDefinition", selectedColumnDefinition); // If comment out, highlighting works.

05. config.set("SelectedState", this._createStatesDataSource([]));

06. config.set("CanEditColumnDefinition", true);

07. config.set("CanDeleteColumnDefinition", true);

08. config.set("CanAddState", selectedColumnDefinition.States.length > 0);

09. config.set("CanEditState", false);

10. config.set("CanDeleteState", false);

11.}

What's wrong and how to solve?
I'm using the latest version of Kendo UI (v2014.3.1316)

Regards,
Ralf

Grid

answered on 02 Feb 2015

5 answers

672 views

[Solved] Column charts, multiple x-axis when negative values present

Hi
If you look at the chart below you'll see there are 2 x-axes, they are getting merged together

http://dojo.telerik.com/AhaPI/2

This only happens when there are negative values present, if you change the first value of the series to a positive one
it works as expected

thanks

Charts

answered on 02 Feb 2015

1 answer

82 views

Kendo ui mobile themebuilder

Hello All,

i'm new to use kendo ui mobile, when i tried an application using phonegap and kendo ui mobile in android i find a very dark theme not like ios, so i decide to use the kendo ui mobile themebuilder but it seems the themebuilder it doesn't work : http://demos.telerik.com/kendo-ui/mobilethemebuilder when i inspect this page i find many files that doesn't can anyone help me ?

Best Regards,

General Discussions

answered on 02 Feb 2015

3 answers

1.2K+ views

Is there a way to completely disable kendo validation?

We're using angular and are also using angular's own validation support.

On a numeric text field such as this:

<input

kendo-numeric-text-box="name1"

type="number"

name="name1"

class="ehr-count-input"

ng-model="countValue"

ng-model-options="{ getterSetter: true, updateOn: 'default blur', debounce: {'default': 250, 'blur': 0}, allowInvalid: true}"

k-options="countOptions"

ng-readonly="model.getViewConfig().isReadOnly()"

ng-class="::EhrLayoutHelper.computeFieldClass(model)"

ng-hide="model.getViewConfig().isHidden()",

ng-required="::model.isRequired()"

min="10"

>



Kendo's validation gets triggered because of min="10", which causes the number field to reset to 10 if a user types in a number lower than that. On submit, it also triggers the error messages that display next to the field, messing up the layout.



Please note that I DO NOT register kendo validator on the form element (or any other element via <form kendo-validator="validator" ng-submit="validate($event)" class="k-content"> or anything like that, yet validation triggers regardless.



Is there any way to turn it off completely and just let angular handle it?

Validation

answered on 02 Feb 2015

3 answers

342 views

Best way : Grid + JSON + Date

Hello,

I'm struggling with dates correct.

What I have :

1) JSON generated by PHP
2) Kendo UI Grid

What I need :

1) display date in custom format
2) grid has to be sortable on the date-field
3) I have to manually add a new record in the datasource with a new Date(jQuery)

What is the best way :
1) what is the best way to put a date in a JSON file ?
    that is what I have now, a PHP datetime-object -> creatiedatum":{"date":"2015-01-29 15:38:55","timezone_type":3,"timezone":"Europe\/Brussels"}
2) How do I display the date as 'dd-MM-yyyy' in the grid and keep it sortable !
3) How do I add a new record by code in jQuery
    This is what I have now, works fine besides the date-field (???????)

$("#grid").data("kendoGrid").dataSource.insert(0, {

id: 99,

done: false,

title: 'computer',

description: "a new computer for IT-Dep.",

creationDate

: ??????????

});

Thx,
Gert

Grid

answered on 02 Feb 2015

1 answer

1.5K+ views

[Solved] kendo grid update aggregate on edit

Hi

Using a grid in batch editing mode. Have two aggregated sum in the footer (footerTemplate: "Total: #=sum#).

Is there a way to update the aggregated value when updating the grid (no postbacks)

Grid

answered on 02 Feb 2015

1 answer

100 views

[Solved] reorder detail grid columns

Hi, how can i reorder detail grid columns programatically?
On my parent grid, the user has the ability to reorder columns, the detail grid has the same columns, I want the detail grids to reorder columns when the parent grid reorder happens. Is this possible?

Thanks!
Phani

Grid

answered on 30 Jan 2015