Questions on Kendo UI for jQuery Forum

10 answers

816 views

How to template a grid cell without losing the dirty flag?

I try to change the background color if some value below 10.

like:

function getFormat (val,name) {

if (val> 10) {

return name;

}

else {

return "<div style='background:red'> "+ name +" </div>"

}

Then I use a template that call this function.
That work good, but I lost the "isDirty" flag for all my cell.
I use the gris in editable=true (batch editing).

Second try:
It is possible to intercept an event when the row is created, then got the row data to do some calculation and then add a "isDirty" custom flag (in the opposite corner)? Without login the "normal" isDirty indicator.

Thanks

Grid

answered on 06 Sep 2016

1 answer

120 views

[Solved] How to use angular syntax in chart templates

Hi,

when using angular syntax inside chart template it is getting displayed as string. Sample

$scope.text = "hi";

$scope.valueAxisConfig = {

labels: {

template: '{{text}}#= kendo.toString(value, \'c0\') #'

}

Charts

answered on 06 Sep 2016

1 answer

158 views

Nested Models and user event contexts

Hi,

we are refactoring a rather big ViewModel in order to make it more maintainable and we are splitting it in smaller objects but we are running in some problems of context when dealing with bound events in the UI.

Here is a bare example of our current situation.

With a binding like this:

<button data-bind="click: person.personMethod">personMethod</button>

we have this ViewModel (it is TypeScript 1.8 compiled to ES5):

/// <reference path="jquery.d.ts" />

/// <reference path="kendo.all.d.ts" />

class Person extends kendo.data.ObservableObject {

public personName = "John Doe";

private age = 65;

constructor() { super(); super.init(this); }

public personMethod(e) {

alert(this.personName); /* NOT POSSIBLE as 'this' is the ROOT VIEWMODEL */

alert(e.data.personName); /* NOT POSSIBLE as 'e.data' is the ROOT VIEWMODEL */

/* How to reference 'personName'? */

/* this is the hack that I am using now */

const that = (this instanceof ViewModel)

? (<ViewModel><any>this).person

: this;

/* but it is ugly and it does not permit to access private properties */

alert(that.age); /* NOT POSSIBLE BECAUSE IS PRIVATE */

}

class ViewModel extends kendo.data.ObservableObject {

public person = new Person();

constructor() { super(); super.init(this); }

}

I have written the issues into the comments.

What are your thought on this approach? Is there a recommended way to deal with big ViewModels?

Thanks.

MVVM

answered on 06 Sep 2016

3 answers

335 views

Slider Handle Changes Color

I tried to change the slider's drag handle with the following CSS entry - as it was proposed in the forum:

    .k-slider .k-draghandle {
        background-color: rgb(242, 179, 0);
        width: 20px;
        height: 20px;
        top: -8px;
        left: -8px;
    }
The color is changed indeed. But when I start to drag it turns white.

Is there a way to avoid this?

Slider

answered on 06 Sep 2016

1 answer

654 views

Grid + Subgrid : How to create calculated columns ?

Hello

I implemented a kendo grid with subgrid on row expansion.

On the grid and subgrids with numeric values :

some columns are editable (ex: columns A and B)
some columns are readonly (ex: column C)
some columns are readonly and calculated (ex: column D = A + B + C)

The purpose is to update the UI without calling a service.

To update values in calculated columns, I set dataItems. The problem is that it renders the main grid and then the subgrids and I lose modifications I made on the subgrids... I'm not sure if there's something I can do, so if someone has an idea...

Note:

I tried to use pushUpdate() on the dataSource instead of set() on dataItems, it does the same
To be able to update calculated cells by modifying the dataSource, I put these columns as editable and I call this.closeCell() to prevent edition
Modifying the <td> content manually is not an option, because the numeric content format depends of the culture

See the illustration (fake data) :

Blue = Yellow/Green (when blue and yellow are in the same line)
Pink = Sum(Blue)

01.// custom editor on an editable cell.

02.column.editor = (container: JQuery, options: kendo.ui.GridColumnEditorOptions): void => {

03. [...]

04.

05.let element = $('<input type="text" />')

06. .appendTo(container)

07. .kendoNumericTextBox({

08. change: (e) => {

09. [...]

10.

11. // updates the dataItem of the edited row.

12. let model = grid.dataItem(row);

13. model.set(options.field, e.sender.value());

14.

15. this.calculateFields([...]);

16. },

17. value: options.model.get(options.field),

18. format: '{0:n2}',

19. min: 0

20. });

21.

22. [...]

23.};

24.

25.

26.private calculateFields([...]) {

27.

28. [...]

29.

30. let mainDataItem = mainGrid.dataSource.getByUid(mainUid);

31. let subDataItems = subGrid.dataSource.data();

32.

33. // the main grid is refreshed and all edited values the subgrid are lost...

34. mainDataItem.set('main-field1', 0);

35. mainDataItem.set('main-field2', 0);

36.

37. subDataItems

38. .forEach(item => {

39. let o = item as kendo.data.Model;

40.

41. // edited values are already lost, so it's useless...

42. o.set('sub-field11',

43. 100 * o.get('sub-field10') / mainDataItem.get('vot'));

44. o.set('sub-field21',

45. 100 * o.get('sub-field20') / mainDataItem.get('div'));

46.

47. // refreshes the main grid again !

48. mainDataItem.set('main-field1',

49. mainDataItem.get('main-field1') + o.get('sub-field11'));

50. mainDataItem.set('main-field2',

51. mainDataItem.get('main-field2') + o.get('sub-field21'));

52. });

53.}

Grid

answered on 05 Sep 2016

1 answer

87 views

Kendo UI Stacked Area Chart not Stacking

Using angularjs and json data source served by php

http://dojo.telerik.com/UrOzi

Charts

answered on 05 Sep 2016

3 answers

582 views

MvvM grid how to define columns from model?

<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="styles/kendo.common.min.css" />
<link rel="stylesheet" href="styles/kendo.default.min.css" />
<link rel="stylesheet" href="styles/kendo.default.mobile.min.css" />

<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section k-content wide">
<div>
<h4>Add or update a record</h4>
<div data-role="grid"
data-editable="true"
data-toolbar="['create', 'save']"
data-columns="columns"
data-bind="source: products,
visible: isVisible,
events: {
save: onSave
}"
style="height: 200px"></div>
</div>
<div style="padding-top: 1em;">
<h4>Console</h4>
<div class="console"></div>
</div>
</div>
<div class="box wide">
<div class="box-col">
<h4>Configuration</h4>
<div>
<label><input type="checkbox" data-bind="checked: isVisible">Visible</label>
</div>
</div>
<div class="box-col">
<h4>Information</h4>
Kendo UI Grid supports the
<a href="http://docs.telerik.com/kendo-ui/getting-started/framework/mvvm/bindings/events">events</a>,
<a href="http://docs.telerik.com/kendo-ui/getting-started/framework/mvvm/bindings/source">source</a> and
<a href="http://docs.telerik.com/kendo-ui/getting-started/framework/mvvm/bindings/visible">visible</a> bindings.
</div>
</div>
<script>
var viewModel = kendo.observable({
isVisible: true,
onSave: function(e) {
kendoConsole.log("event :: save(" + kendo.stringify(e.values, null, 4) + ")");
},
columns:[
{field:"id", width:50},
{field: "name", width:200}
// ...etc
],
products: new kendo.data.DataSource({
schema: {
model: {
id: "ProductID",
fields: {
ProductName: { type: "string" },
UnitPrice: { type: "number" }
}
}
},
batch: true,
transport: {
read: {
url: "//demos.telerik.com/kendo-ui/service/products",
dataType: "jsonp"
},
update: {
url: "//demos.telerik.com/kendo-ui/service/products/update",
dataType: "jsonp"
},
create: {
url: "//demos.telerik.com/kendo-ui/service/products/create",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
}
})
});
kendo.bind($("#example"), viewModel);
</script>
</div>

</body>
</html>

Grid

answered on 05 Sep 2016

1 answer

273 views

Expanding grid's detail template and changing the style of the edited row.

I'm trying to edit the row colour of the "parent" grid's k-master-row. This normally succeeds e.g.when expanding the row, but after editing this row and cancel event things look strange:

- in my project after cancel the row where style was changed gets back to regular styling. I'm able to change other $('#.k-master-row')s , but not the key one which I want (the one that was being edited)

- I created a jsfiddle to replicate this, but here I'm experiencing a different issue. The grid after cancel event wraps back again . None of the k-master-rows are applied with the desired style.

https://jsfiddle.net/Turo/t1ctzndu/4/

Grid

answered on 03 Sep 2016

1 answer

131 views

Widget Pin

I would like to lock the position of my widget using a PIN. Is that achievable? Also how to persist position of a widget through Logins so that it appears at the same location everytime?

General Discussions