Questions on Kendo UI for jQuery Forum

1 answer

126 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

462 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

662 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

73 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

338 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

96 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

7 answers

123 views

Drawer animation flickers after upgrading to 2014.1.318

Hi,

Since upgrading to the 2014.1.318 build from the 2013.3.1324 build, when I click on a view link in my drawer, I am noticing a skip or flicker as the drawer closes and view is displayed. It is driving me crazy trying to figure out what is causing this.

I am viewing my test page on mobile safari on the iPhone simulator as well as iPhone5. Has anyone else noticed it as well?

Here is a test page with the 2014.1.318 build
http://serenekhaos.com/temp/drawer/index.php?version=2014.1.318

Here is a test page with the 2013.3.1324 build
http://serenekhaos.com/temp/drawer/index.php?version=2013.3.1324

Thank you for any help.
Kelvin

Drawer (Mobile)

answered on 30 Jan 2015

3 answers

428 views

[Solved] Can't Get Editor to Display

I am attempting to display the Kendo Editor on a simple form however despite the fact there are no errors the editor does not display. The following shows the HTML for the page and the script to display the Editor;

Angular view;

01.@{

02. ViewBag.Title = "Project Controls Reporting - Report Options";

03. Layout = null;

04.}

05.<!DOCTYPE html>

06.<html ng-app="reportFormsApp">

07.<head>

08. <meta charset="utf-8" />

09. <meta name="viewport" content="width=device-width, initial-scale=1.0">

10. <title>@ViewBag.Title</title>

11.

12. @Styles.Render("~/Content/css")

13.

14. <link rel="stylesheet" href="~/Content/kendo/kendo.common.min.css" />

15. <link rel="stylesheet" href="~/Content/kendo/kendo.default.min.css" />

16. <link rel="stylesheet" href="~/Content/kendo/kendo.dataviz.min.css" />

17. <link rel="stylesheet" href="~/Content/kendo/kendo.dataviz.default.min.css" />

18. <link rel="stylesheet" href="~/Content/kendo/kendo.default.mobile.min.css" />

19.

20. @Scripts.Render("~/bundles/modernizr")

21.

22. <script src="~/Scripts/jquery-1.10.2.js"></script>

23. <script src="~/Scripts/angular.js"></script>

24. <script src="~/Scripts/angular-route.js"></script>

25. <script src="~/Scripts/angular-ui/ui-bootstrap-tpls.js"></script>

26. <script src="~/Scripts/kendo/kendo.all.min.js"></script>

27.

28. <script src="~/App/ReportFormsApp.js"></script>

29. <script src="~/App/DataService.js"></script>

30. <script src="~/App/ValidationDirective.js"></script>

31.

32. <script src="~/App/ReportForm/rfController.js"></script>

33. <script src="~/App/ReportForm/rfDirective.js"></script>

34.</head>

35.

36.<body>

37. <div class="navbar navbar-default navbar-fixed-top">

38. <div class="container">

39. <div class="navbar-header">

40. <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

41. <span class="icon-bar"></span>

42. <span class="icon-bar"></span>

43. <span class="icon-bar"></span>

44. </button>

45. </div>

46. <div class="navbar-collapse navbar-default collapse">

47. <img class="navbar-left" height="50" src="/Images/Origin_100x143.jpg" />

48.

49. <p class="navbar-brand">Project Controls Reporting</p>

50.

51. <img class="navbar-right" height="50" src="/Images/APLNG_143x143.jpg" />

52.

53. <ul class="nav navbar-nav">

54. <li><a href="index">Home</a></li>

55. <li><a href="dashboard">Options</a></li>

56. <li><a href="ReportForm/Shared.html">Reporting</a></li>

57. <li><a href="analysis">Analysis</a></li>

58. </ul>

59. </div>

60. </div>

61. </div>

62.

63. <div class="container body-content">

64. <ng-view>

65.

66. </ng-view>

67.

68. <div id="footer" class="row">

69. <hr />

70. <div class="col-sm-6">

72. </div>

73.

74. <div class="col-sm-6">

75. <p class="text-muted credit pull-right">@User.Identity.Name</p>

76. </div>

77. </div>

78. </div>

79.

80. <script src="~/App/ReportForm/rfKendo.js"></script>

81.</body>

82.</html>

Angular template;

01.<div class="lead">

02. <h4>Internal Monthly Cost and Progress Report</h4>

03.</div>

04.

05.<form name="rptForm" role="form" class="form-horizontal" novalidate>

06. <fieldset>

07. <legend>Report Text</legend>

08.

09. 

10. <div class="form-group" show-errors>

11. <label for="cboVersions" class="col-sm-2 control-label">Version</label>

12.

13. <div class="col-sm-6">

14. <select id="cboVersions" name="cboVersions" autofocus class="form-control"

15. ng-model="rptVersionId"

16. ng-options="version.id as version.rptDate for version in rptVersions"

17. ng-required="true"

18. ng-change="updateRptVersion()"></select>

19. </div>

20.

21. <div class="col-sm-4">

22. <alert type="danger" class="help-block" ng-if="rptForm.cboVersions.$error.required">Report version is required</alert>

23. </div>

24. </div>

25.

26. 

27. <div class="form-group" show-errors>

28. <label for="cboSections" class="col-sm-2 control-label">Section</label>

29.

30. <div class="col-sm-6">

31. <select id="cboSections" name="cboSections" class="form-control"

32. ng-model="rptSectionId"

33. ng-required="true"

34. ng-options="section.id as section.caption for section in rptSections"

35. ng-change="updateRptSection()"></select>

36. </div>

37.

38. <div class="col-sm-4">

39. <alert type="danger" class="help-block" ng-if="rptForm.cboSections.$error.required">Report section is required</alert>

40. </div>

41. </div>

42.

43. 

44. <div class="form-group" show-errors>

45. <label for="txtNarrative" class="col-sm-2 control-label">Section Text</label>

46.

47. <div class="col-sm-10" ng-class="{'has-error' : rptForm.txtNarrative.$invalid && rptForm.txtNarrative.$dirty}">

48. <textarea id="txtNarrative" name="txtNarrative" class="form-control" rows="20" ng-model="rptSectionText.narrative" ng-required="true"></textarea>

49. </div>

50.

51. <div class="col-sm-offset-2 col-sm-10">

52. <alert type="danger" class="help-block" ng-if="rptForm.txtNarrative.$error.required">Report text is required</alert>

53. </div>

54. </div>

55.

56. <div class="pull-right">

57. <input type="submit" class="btn btn-success" value="Save" ng-click="submitForm()" title="Save any changes made to the report text" />

58. <input type="button" class="btn btn-default" value="Cancel" ng-click="cancelForm()" title="Discard any changes made to the report text" />

59. <input type="reset" class="btn btn-warning" value="Clear" ng-click="clearForm()" title="Discard any changes made to the report text and clear the fields" />

60. </div>

61. </fieldset>

62.</form>

rfKendo.js;

1.$(document).ready(function () {

2. $("#txtNarrative").kendoEditor();

3.});

The form displays correctly except for the Kendo Editor control - the textarea continues to be displayed.

Any help would be greatly appreciated.

Editor