or
1 answer
161 views
Hi,
The following link suggests us to disable the hardware acceleration on Android 4:
http://docs.telerik.com/kendo-ui/mobile/performance#disable-hw-acceleration-in-android-4
We have the following questions:
1) As we (and our users) noticed, as a result of disabling this feature the app is not working smoothly. What alternatives can you suggest us that will allow us to keep it disabled without damaging the user experience?
2) Should it also be disabled for android 5? (The link above only refers to android 4)
Thanks.
The following link suggests us to disable the hardware acceleration on Android 4:
http://docs.telerik.com/kendo-ui/mobile/performance#disable-hw-acceleration-in-android-4
We have the following questions:
1) As we (and our users) noticed, as a result of disabling this feature the app is not working smoothly. What alternatives can you suggest us that will allow us to keep it disabled without damaging the user experience?
2) Should it also be disabled for android 5? (The link above only refers to android 4)
Thanks.
Petyo
Telerik team
answered
on
16 Feb 2015
2 answers
178 views
Hi
In my example below I took your demo for multiple sorting (good one!) and created a button with which I can change the sorting type.
http://dojo.telerik.com/ARaMA
I am refreshing the grid after changing the sorting type, but the grid does not seem to refresh properly.
I have variables initially set to "multiple" and true (for multiple sort as per your example)
sortable: {
mode: sortmode,
allowUnsort: sortunsort
},
.. and I change them on button click so "single" and false and then do
$('#multipleSort').data('kendoGrid').dataSource.read();
$('#multipleSort').data('kendoGrid').refresh();
..which does not properly update.
I also tried changing
$('#multipleSort').data('kendoGrid').options.sortable.mode = "single";
$('#multipleSort').data('kendoGrid').options.sortable.allowUnsort = false;
but again I do not update correctly because it does have no effect, even though it is actually set.
Many thanks
In my example below I took your demo for multiple sorting (good one!) and created a button with which I can change the sorting type.
http://dojo.telerik.com/ARaMA
I am refreshing the grid after changing the sorting type, but the grid does not seem to refresh properly.
I have variables initially set to "multiple" and true (for multiple sort as per your example)
sortable: {
mode: sortmode,
allowUnsort: sortunsort
},
.. and I change them on button click so "single" and false and then do
$('#multipleSort').data('kendoGrid').dataSource.read();
$('#multipleSort').data('kendoGrid').refresh();
..which does not properly update.
I also tried changing
$('#multipleSort').data('kendoGrid').options.sortable.mode = "single";
$('#multipleSort').data('kendoGrid').options.sortable.allowUnsort = false;
but again I do not update correctly because it does have no effect, even though it is actually set.
Many thanks
4 answers
202 views
Hello,
Is it possible to allow the user to resize the columns by dragging the edges of their header cells (this feature works with a grid)?
Thanks,
Luc
Is it possible to allow the user to resize the columns by dragging the edges of their header cells (this feature works with a grid)?
Thanks,
Luc
4 answers
187 views
Hi
I want to load the initial first page of a grid using the first page of data bound from a server side collection. Subsequent page changes should be loaded using ajax.
My problem is how to set the total records of the collection to a number so that the correct number of pages are displayed.
So in the example below, Model.Calls may only contain 20 records, but the full collection count could be 100. How can I tell the grid there are in fact 100 records, not 20?
@(Html.Kendo().Grid<CallsViewData>(Model.Calls)
.Name("CallsGrid")
.Columns(c => {
c.Bound(m => m.TestResultId).Groupable(false).Title(@Html.Resource("HeadTestResultId"));
c.Bound(m => m.RunType).Title(@Html.Resource("HeadType"));
c.Bound(m => m.CallFlow).Title(@Html.Resource("HeadDirection"));
c.Bound(m => m.PhoneNo).Title(@Html.Resource("HeadCalledNo"));
c.Bound(m => m.ActualStart).Title(@Html.Resource("HeadStartDate"));
c.Bound(m => m.Connected).Title(@Html.Resource("HeadConnectedDate"));
c.Bound(m => m.Disconnected).Title(@Html.Resource("HeadDisconnectedDate"));
c.Bound(m => m.Duration).Title(@Html.Resource("HeadDuration"));
c.Bound(m => m.Duration).Title(@Html.Resource("HeadMinutes"));
})
.Resizable(s => s.Columns(true))
.Pageable()
.DataSource(ds => ds.Server().Total(100))
.BindTo(Model.Calls)
.Sortable()
.Scrollable()
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("calls", "report").Data("tt").Type(HttpVerbs.Post ))
.PageSize(20)
))
I want to load the initial first page of a grid using the first page of data bound from a server side collection. Subsequent page changes should be loaded using ajax.
My problem is how to set the total records of the collection to a number so that the correct number of pages are displayed.
So in the example below, Model.Calls may only contain 20 records, but the full collection count could be 100. How can I tell the grid there are in fact 100 records, not 20?
@(Html.Kendo().Grid<CallsViewData>(Model.Calls)
.Name("CallsGrid")
.Columns(c => {
c.Bound(m => m.TestResultId).Groupable(false).Title(@Html.Resource("HeadTestResultId"));
c.Bound(m => m.RunType).Title(@Html.Resource("HeadType"));
c.Bound(m => m.CallFlow).Title(@Html.Resource("HeadDirection"));
c.Bound(m => m.PhoneNo).Title(@Html.Resource("HeadCalledNo"));
c.Bound(m => m.ActualStart).Title(@Html.Resource("HeadStartDate"));
c.Bound(m => m.Connected).Title(@Html.Resource("HeadConnectedDate"));
c.Bound(m => m.Disconnected).Title(@Html.Resource("HeadDisconnectedDate"));
c.Bound(m => m.Duration).Title(@Html.Resource("HeadDuration"));
c.Bound(m => m.Duration).Title(@Html.Resource("HeadMinutes"));
})
.Resizable(s => s.Columns(true))
.Pageable()
.DataSource(ds => ds.Server().Total(100))
.BindTo(Model.Calls)
.Sortable()
.Scrollable()
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("calls", "report").Data("tt").Type(HttpVerbs.Post ))
.PageSize(20)
))
3 answers
326 views
According to this demo. http://demos.telerik.com/kendo-ui/map/geojson
Is there any method I can call to display the numbers in the tooltips for each countries area program?
The requirements of my project is like when end user selected row in the grid, it should highlight the country area and show the number in the tool tip on map.
See the attachment.
Thanks.
Is there any method I can call to display the numbers in the tooltips for each countries area program?
The requirements of my project is like when end user selected row in the grid, it should highlight the country area and show the number in the tool tip on map.
See the attachment.
Thanks.
1 answer
116 views
kendo.bind has an optional namespace 3rd param. However the typescript bindings in kendo.web.d.ts declare this 3rd param as required.
This means when using Typescript kendo.bind you always have to provide a namespace param, which is annoying.
This means when using Typescript kendo.bind you always have to provide a namespace param, which is annoying.
Alex Gyoshev
Telerik team
answered
on
13 Feb 2015
4 answers
203 views
I have the following data structure:
{
"Id": "568124DB-8702-4717-A4C5-CF069A4B0491",
"Hive": "global",
"HiveQualifier": null,
"Name": "OpenCycle OSM",
"Description": "OpenStreetMap layer from opencyclemap.org",
"Type": "OSM",
"IsBaseLayer": true,
"Params": {
"url": [
"http://a.tile.opencyclemap.org/cycle/${z}/${x}/${y}.png",
"http://b.tile.opencyclemap.org/cycle/${z}/${x}/${y}.png",
"http://c.tile.opencyclemap.org/cycle/${z}/${x}/${y}.png"
]
}
}
I'm editing it with the following template (in a grid if it matters):
The array of URLs displays just fine, but when I click the edit button I get an error in the console:
Uncaught TypeError: Cannot read property 'uid' of undefinedkendo.all.js:57092
kendo.ui.DataBoundWidget.extend.editkendo.all.js:57175
(anonymous function)jquery-2.1.1.min.js:3
n.event.dispatchjquery-2.1.1.min.js:3
n.event.add.r.handle
I have no idea how to troubleshoot this.
{
"Id": "568124DB-8702-4717-A4C5-CF069A4B0491",
"Hive": "global",
"HiveQualifier": null,
"Name": "OpenCycle OSM",
"Description": "OpenStreetMap layer from opencyclemap.org",
"Type": "OSM",
"IsBaseLayer": true,
"Params": {
"url": [
"http://a.tile.opencyclemap.org/cycle/${z}/${x}/${y}.png",
"http://b.tile.opencyclemap.org/cycle/${z}/${x}/${y}.png",
"http://c.tile.opencyclemap.org/cycle/${z}/${x}/${y}.png"
]
}
}
I'm editing it with the following template (in a grid if it matters):
<script id="map-layer-editor" type="text/x-kendo-template">
<table style="width: 100%;border-collapse: separate;border-spacing: 10px;">
<tr>
<td class="label-cell"><label>Name</label></td>
<td><input type="text" class="k-input k-textbox" style="width: 100%;" name="Name" ng-model="dataItem.Name"></td>
</tr>
<tr>
<td class="label-cell"><label>Description</label></td>
<td><input type="text" class="k-input k-textbox" style="width: 100%;" name="Description" ng-model="dataItem.Description" /></td>
</tr>
<tr>
<td class="label-cell"><label>Base Layer</label></td>
<td><input type="checkbox" name="IsBaseLayer" ng-model="dataItem.IsBaseLayer" /></td>
</tr>
<tr>
<td class="label-cell"><label>Type</label></td>
<td><select kendo-drop-down-list style="width: 200px;" k-data-source="mlc.layerTypes"
k-data-text-field="'DisplayName'" k-data-value-field="'Id'"
ng-model="dataItem.Type"></select>
</td>
</tr>
<tr>
<td class="label-cell"><label>URLs</label></td>
<td>
<div kendo-list-view id="listView" k-data-source="dataItem.Params.url"
k-editable="true" k-navigatable="true" style="height:300px; width:100%;">
<div k-template style="display:flex; flex-direction: row; align-items:center; margin:5px;">
<div style="display:inline-block;width:400px;word-wrap: break-word">{{ dataItem }}</div>
<a style="align-self: flex-end;" class="k-button k-button-icontext k-edit-button kendo-command-notext"><span class="k-icon k-edit"></span></a>
<a style="align-self: flex-end;" class="k-button k-button-icontext k-delete-button kendo-command-notext"><span class="k-icon k-delete"></span></a>
</div>
<div k-edit-template style="display:flex; flex-direction: row; align-items:center; margin:5px;">
<input type="text" ng-model="dataItem" class="k-textbox" name="URL" required="required" validationMessage="required" />
<a style="align-self: flex-end;" class="k-button k-button-icontext k-update-button kendo-command-notext"><span class="k-icon k-update"></span></a>
<a style="align-self: flex-end;" class="k-button k-button-icontext k-cancel-button kendo-command-notext"><span class="k-icon k-cancel"></span></a>
</div>
</div>
</td>
</tr>
</table>
</script>
<table style="width: 100%;border-collapse: separate;border-spacing: 10px;">
<tr>
<td class="label-cell"><label>Name</label></td>
<td><input type="text" class="k-input k-textbox" style="width: 100%;" name="Name" ng-model="dataItem.Name"></td>
</tr>
<tr>
<td class="label-cell"><label>Description</label></td>
<td><input type="text" class="k-input k-textbox" style="width: 100%;" name="Description" ng-model="dataItem.Description" /></td>
</tr>
<tr>
<td class="label-cell"><label>Base Layer</label></td>
<td><input type="checkbox" name="IsBaseLayer" ng-model="dataItem.IsBaseLayer" /></td>
</tr>
<tr>
<td class="label-cell"><label>Type</label></td>
<td><select kendo-drop-down-list style="width: 200px;" k-data-source="mlc.layerTypes"
k-data-text-field="'DisplayName'" k-data-value-field="'Id'"
ng-model="dataItem.Type"></select>
</td>
</tr>
<tr>
<td class="label-cell"><label>URLs</label></td>
<td>
<div kendo-list-view id="listView" k-data-source="dataItem.Params.url"
k-editable="true" k-navigatable="true" style="height:300px; width:100%;">
<div k-template style="display:flex; flex-direction: row; align-items:center; margin:5px;">
<div style="display:inline-block;width:400px;word-wrap: break-word">{{ dataItem }}</div>
<a style="align-self: flex-end;" class="k-button k-button-icontext k-edit-button kendo-command-notext"><span class="k-icon k-edit"></span></a>
<a style="align-self: flex-end;" class="k-button k-button-icontext k-delete-button kendo-command-notext"><span class="k-icon k-delete"></span></a>
</div>
<div k-edit-template style="display:flex; flex-direction: row; align-items:center; margin:5px;">
<input type="text" ng-model="dataItem" class="k-textbox" name="URL" required="required" validationMessage="required" />
<a style="align-self: flex-end;" class="k-button k-button-icontext k-update-button kendo-command-notext"><span class="k-icon k-update"></span></a>
<a style="align-self: flex-end;" class="k-button k-button-icontext k-cancel-button kendo-command-notext"><span class="k-icon k-cancel"></span></a>
</div>
</div>
</td>
</tr>
</table>
</script>
The array of URLs displays just fine, but when I click the edit button I get an error in the console:
Uncaught TypeError: Cannot read property 'uid' of undefinedkendo.all.js:57092
kendo.ui.DataBoundWidget.extend.editkendo.all.js:57175
(anonymous function)jquery-2.1.1.min.js:3
n.event.dispatchjquery-2.1.1.min.js:3
n.event.add.r.handle
I have no idea how to troubleshoot this.
Petur Subev
Telerik team
answered
on
13 Feb 2015
1 answer
567 views
I have the following code which adds a diagram and a couple of shapes. Is there anyway to apply a class to the underlying svg?
var element = $("#paper").kendoDiagram({
shapeDefaults: {
width: 85,
height: 110,
editable: false,
content: {
align: 'center'
},
hover: {
fill: "lightgrey"
},
stroke: {
width: 1,
color: 'black'
}
},
connectionDefaults: {
type: "polyline",
endCap: "ArrowEnd"
}
});
var diagram = element.data("kendoDiagram");
var operand = diagram.addShape({
width: 85,
height: 110,
x: 20,
y: 187,
editable: { connect: false },
fill: {
color: '#00CC00'
},
content: {
text: 'Quarter',
}
});
var operator = diagram.addShape({
width: 85,
height: 110,
x: 203,
y: 20,
fill: {
color: '#00CC00'
},
content: {
text: 'Target %'
}
});
var element = $("#paper").kendoDiagram({
shapeDefaults: {
width: 85,
height: 110,
editable: false,
content: {
align: 'center'
},
hover: {
fill: "lightgrey"
},
stroke: {
width: 1,
color: 'black'
}
},
connectionDefaults: {
type: "polyline",
endCap: "ArrowEnd"
}
});
var diagram = element.data("kendoDiagram");
var operand = diagram.addShape({
width: 85,
height: 110,
x: 20,
y: 187,
editable: { connect: false },
fill: {
color: '#00CC00'
},
content: {
text: 'Quarter',
}
});
var operator = diagram.addShape({
width: 85,
height: 110,
x: 203,
y: 20,
fill: {
color: '#00CC00'
},
content: {
text: 'Target %'
}
});
T. Tsonev
Telerik team
answered
on
13 Feb 2015
1 answer
578 views
I'm getting this null thing in the chart and I wonder if I can hide or remove it. Please note that I can't change the data..
Danail Vasilev
Telerik team
answered
on
13 Feb 2015
3 answers
171 views
Hi
I want to extend the default edit template with only one field.
I have read through the documentation and it seems I have to replace the whole edit window - and recreating the default template to then add my custom field.
http://dojo.telerik.com/IqIYI
Can you please provide me (I did not find it) with the html code for the default edit popup so that I can add my field?
Many thanks
I want to extend the default edit template with only one field.
I have read through the documentation and it seems I have to replace the whole edit window - and recreating the default template to then add my custom field.
http://dojo.telerik.com/IqIYI
Can you please provide me (I did not find it) with the html code for the default edit popup so that I can add my field?
Many thanks
