or
3 answers
333 views
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?
Magdalena
Telerik team
answered
on
06 Sep 2016
1 answer
648 views
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: 020. });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. subDataItems38. .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.}
Stefan
Telerik team
answered
on
05 Sep 2016
1 answer
86 views
Using angularjs and json data source served by php
http://dojo.telerik.com/UrOzi
Dimiter Topalov
Telerik team
answered
on
05 Sep 2016
3 answers
579 views
<!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>
<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>
Dimiter Topalov
Telerik team
answered
on
05 Sep 2016
1 answer
271 views
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/
Missing User
answered
on
03 Sep 2016
1 answer
124 views
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?
Rumen
Telerik team
answered
on
02 Sep 2016
6 answers
357 views
When I programmatically change a grid it sends a POST with JSON for every field currently on the screen to the root of my REST web service.
This grid is not editable and there's no reason for it to ever send POST, PUT, PATCH, etc. There's nothing to insert or update.
How do I disable this feature?
5 answers
311 views
how do i set the datasource in the pivotgrid to the correct data generate in the pivotgrid in the paging?
for example: in my datasource i have 500 rows which generate into 250 rows and 250 colums in the pivot grid.
how to i take the new data size which was created in the pivotgrid and not from the datasource for calculation the paging for the pivotgrid?
i use this:
$("#pager").kendoPager({
dataSource: result.data, /* not correct*/
pageSizes: [10, 25, 50]
});
when the result.data is the 500 rows that was arrived from the original datasource.
for example: in my datasource i have 500 rows which generate into 250 rows and 250 colums in the pivot grid.
how to i take the new data size which was created in the pivotgrid and not from the datasource for calculation the paging for the pivotgrid?
i use this:
$("#pager").kendoPager({
dataSource: result.data, /* not correct*/
pageSizes: [10, 25, 50]
});
when the result.data is the 500 rows that was arrived from the original datasource.
Alex Hajigeorgieva
Telerik team
answered
on
02 Sep 2016
1 answer
225 views
I want to upload a file, add a comment against each upload and show the comment with file list. Is this doable with Kendo?
Thanks
Dimiter Madjarov
Telerik team
answered
on
02 Sep 2016
1 answer
286 views
Hello,
I want to implement some custom functionality for the grid: adding column sort orders to the column header and aligning them (along with the sort arrow) to the left.
Dojo: http://dojo.telerik.com/IWInE
From the code you can see that I'm doing this one the dataBound event. I don't want to have to put this code into every single grid I have.
Is there anyway to easily add this code to the kendo library so that it is called before the grid's individual dataBound function is called?
Thank you,
Dan
