or
2 answers
89 views
After doing two separate side by side examples of our apps and doing user acceptance testing with them. I have a couple issues I would like help with.
1. The buttons within the NavBar are not the same tappable area. I can fix some of this with css to make with wider or taller. However it seems full native apps NavBar buttons in iOS can be tapped when tapping on the bottom portion of the status bar. For example try to tap the back button by hitting closer to the carrier text on a full native app and it will go back. With Kendo UI within a Cordova shell it won't work unless you tap lower.
Can you help me make this more native like? Watching people tap the back button sometimes 4 times makes for a lesser user experience. Also have you seen this same effect in your internal testing?
I also have tested other known hybrid apps, which also exhibit this behavior, and wanted to know if this is a limitation to hybrid apps that use html for navigation.
2. Email Sending upon completion or cancel does not return to app
In a full native app in iOS when sending an email or trying to and canceling it goes back to the app. I am currently using a mailto: link to create an email and it just goes to the email app after sending an email.
How can I get full native behavior using Cordova and Kendo on iOS?
3. Best practices for sliding transitions
What are the best practices for getting transitions to appear native like in iOS? Some times the screen scrolls inefficiently or jittery screaming a non native experience on a modern iPhone.
What are best practices on view initializations or other framework settings to minimize view transition speed/quality?
4. Text Selection
I want certain areas of my app to be selectable for users to copy and paste data, can this be done, or does this create lots of opportunities for undesired app behavior?
1. The buttons within the NavBar are not the same tappable area. I can fix some of this with css to make with wider or taller. However it seems full native apps NavBar buttons in iOS can be tapped when tapping on the bottom portion of the status bar. For example try to tap the back button by hitting closer to the carrier text on a full native app and it will go back. With Kendo UI within a Cordova shell it won't work unless you tap lower.
Can you help me make this more native like? Watching people tap the back button sometimes 4 times makes for a lesser user experience. Also have you seen this same effect in your internal testing?
I also have tested other known hybrid apps, which also exhibit this behavior, and wanted to know if this is a limitation to hybrid apps that use html for navigation.
2. Email Sending upon completion or cancel does not return to app
In a full native app in iOS when sending an email or trying to and canceling it goes back to the app. I am currently using a mailto: link to create an email and it just goes to the email app after sending an email.
How can I get full native behavior using Cordova and Kendo on iOS?
3. Best practices for sliding transitions
What are the best practices for getting transitions to appear native like in iOS? Some times the screen scrolls inefficiently or jittery screaming a non native experience on a modern iPhone.
What are best practices on view initializations or other framework settings to minimize view transition speed/quality?
4. Text Selection
I want certain areas of my app to be selectable for users to copy and paste data, can this be done, or does this create lots of opportunities for undesired app behavior?
Petyo
Telerik team
answered
on
09 Apr 2013
5 answers
234 views
Hello,
I have a problem in IE8 with pie chart when I have an item that occupies almost 100% of chart. In this case chart disappears but this occurs depending on chart size. You can resize window to find when the problem appears.
I have found that problem does not exists neither in Chrome nor in IE9.
The following code reproduces the problem:
---
<!DOCTYPE html>
<html>
<head>
<link href="Styles/kendo/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="Styles/kendo/kendo.default.min.css" type="text/css" rel="stylesheet" />
<style>
body, html
{
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<script src="Scripts/jquery-1.7.2.js" type="text/javascript"></script>
<script src="Scripts/kendo/kendo.dataviz.js" type="text/javascript"></script>
<script type="text/javascript">
$(function()
{
$("#chart").kendoChart(
{
title:
{
text: "Break-up of Spain Electricity Production for 2008"
},
legend:
{
position: "bottom",
labels:
{
template: "#= text # (#= value #%)"
}
},
seriesDefaults:
{
labels:
{
visible: true,
format: "{0}%"
}
},
series:
[
{
type: "pie",
data:
[
// {
// category: "Hydro",
// value: 22
// },
// {
// category: "Solar",
// value: 2
// },
// {
// category: "Nuclear",
// value: 49
// },
{
category: "Wind",
value: 27
}
]
}
],
tooltip:
{
visible: true,
format: "{0}%"
},
transitions: false
});
});
$(window).resize(function()
{
var chart = $("#chart").data("kendoChart");
if (chart)
{
chart.redraw();
}
});
</script>
<div id="chart" style="width: 100%; height: 100%">
</div>
</body>
</html>
---
I've check your code and have seen that the problem occurs in VMLRing.renderPoints() method in case when outerStartPoint conisides with outerEndPoint. I think you should draw a circle in this case instead of an arc.
Hristo Germanov
Telerik team
answered
on
09 Apr 2013
1 answer
717 views
I'm not really sure what is going on here, it's driving me crazy. I have a template attached to an autocomplete, and this template works correctly when the data is loaded in the drop down.
It appears that it is ignored when an item is actually selected though, and instead of seeing the item I see the string [object Object] in the input field. Did I miss something? I know that the data item is selected correctly, as I manipulate it with other page events after it is selected.
Here is my code:
http://jsbin.com/opuwav/1/edit
It appears that it is ignored when an item is actually selected though, and instead of seeing the item I see the string [object Object] in the input field. Did I miss something? I know that the data item is selected correctly, as I manipulate it with other page events after it is selected.
Here is my code:
http://jsbin.com/opuwav/1/edit
Dimiter Madjarov
Telerik team
answered
on
09 Apr 2013
1 answer
205 views
I have mapped the double click and keydown event in a dataBound event for a kendo popup grid. I faced some issues which was mentioned below,
1. Binding Doubleclick event for grid row in dataBound event as,
self.tbody.find("tr").on("dblclick", function (e) {
if (!$(this).hasClass('k-grid-edit-row')) {
self.editRow($(this));
}
});
After popup open, while clicking cancel, next time double click not firing for that row.
2. Binding KeyDown event for grid row in dataBound event for deleting the row,
self.tbody.find("tr").on("keydown", function (e) {
if (e.keyCode == 46) {
self.removeRow($(this));
}
});
The delete key event is not firing for the selected row.
Thanks and Regards,
Thirumurthi
1. Binding Doubleclick event for grid row in dataBound event as,
self.tbody.find("tr").on("dblclick", function (e) {
if (!$(this).hasClass('k-grid-edit-row')) {
self.editRow($(this));
}
});
After popup open, while clicking cancel, next time double click not firing for that row.
2. Binding KeyDown event for grid row in dataBound event for deleting the row,
self.tbody.find("tr").on("keydown", function (e) {
if (e.keyCode == 46) {
self.removeRow($(this));
}
});
The delete key event is not firing for the selected row.
Thanks and Regards,
Thirumurthi
Atanas Korchev
Telerik team
answered
on
09 Apr 2013
1 answer
51 views
Hi,
Facing an issue with Grid. Grid is getting displayed on firefox, but not on ie9/ie10. Can anyone please provide the solution
Facing an issue with Grid. Grid is getting displayed on firefox, but not on ie9/ie10. Can anyone please provide the solution
Nikolay Rusev
Telerik team
answered
on
09 Apr 2013
2 answers
260 views
Hello:
I have a custom html helper as:
in razor view:
it's definition:
it's html output to Browser is either:
or
it basically a language toggle link to change interface language between english and french, by injecting \en-ca or \fr-ca to the route. {language}/{controller}/{action}/{id}
I don't know how to add this control to the menu. Please advise,
Thank you,
I have a custom html helper as:
in razor view:
@Html.LanguageToggleLink(null)public static MvcHtmlString LanguageToggleLink(this HtmlHelper helper, IDictionary<string, object> htmlAttributes){...}it's html output to Browser is either:
<a href="/projectname/fr-ca">français</a>or
<a href="/projectname/en-ca">english</a>it basically a language toggle link to change interface language between english and french, by injecting \en-ca or \fr-ca to the route. {language}/{controller}/{action}/{id}
I don't know how to add this control to the menu. Please advise,
Thank you,
2 answers
1.4K+ views
Is there a way to show paging both top and bottom of grid?
1 answer
214 views
Hi,
Below is my code to open a window which shows details of a tree node selected. The treeview is only in kendo while all other components are telerik.
But the window does not come up, we get an error in the console as :
TypeError: $(...).data(...) is undefined$('body > #Window').data('kendoWindow').center().open();
What are we missing ?
.delegate(".details-icon", "click", function (e) {
e.preventDefault();
$("body > #Window > .t-window-titlebar > .t-window-title").text("Group Details"); // Change the header
var groupId = $(this).closest(".k-item").find("input[type = checkbox]").val();
var groupName = $(this).closest(".k-item").find(".k-in:first").justtext();
var iconPath = $(this).closest(".k-item").find(".k-in:first").find(".k-image").attr("src");
$("body > #Window > .k-content").css({ "width": "350px", "height": "150px" }).html("<div>Group Name : <strong style='color:#2A43B5;font-family:Georgia'>" + groupName + "</strong><br/><br/>Group Icon: <img style='vertical-align:middle;' src='" + iconPath + "'/> </div>");
$('body > #Window').data('kendoWindow').center().open();
return false;
Below is my code to open a window which shows details of a tree node selected. The treeview is only in kendo while all other components are telerik.
But the window does not come up, we get an error in the console as :
TypeError: $(...).data(...) is undefined$('body > #Window').data('kendoWindow').center().open();
What are we missing ?
.delegate(".details-icon", "click", function (e) {
e.preventDefault();
$("body > #Window > .t-window-titlebar > .t-window-title").text("Group Details"); // Change the header
var groupId = $(this).closest(".k-item").find("input[type = checkbox]").val();
var groupName = $(this).closest(".k-item").find(".k-in:first").justtext();
var iconPath = $(this).closest(".k-item").find(".k-in:first").find(".k-image").attr("src");
$("body > #Window > .k-content").css({ "width": "350px", "height": "150px" }).html("<div>Group Name : <strong style='color:#2A43B5;font-family:Georgia'>" + groupName + "</strong><br/><br/>Group Icon: <img style='vertical-align:middle;' src='" + iconPath + "'/> </div>");
$('body > #Window').data('kendoWindow').center().open();
return false;
Dimiter Madjarov
Telerik team
answered
on
08 Apr 2013
1 answer
193 views
Hi Kendo team,
I have a page with a KendoUI grid. Above the grid is a textbox which allows custom searches using comma-separated values. In all other pages which use the grid without the custom search textbox, the built-in "AND" and "OR" filters work great.
When using this page, "OR" is always treated as "AND".
Here's an example of the form data being posted via ajax using "OR" for a column in the grid called "ToolDefinitionName". I am also filtering on FacilityId = 39. When this filter is run, it returns no data even though both ToolDefinitionNames are valid:
take:50
skip:0
page:1
pageSize:50
sort[0][field]:EntityCode
sort[0][dir]:asc
filter[logic]:and
filter[filters][0][field]:FacilityId
filter[filters][0][operator]:eq
filter[filters][0][value]:39
filter[filters][1][logic]:or
filter[filters][1][filters][0][field]:ToolDefinitionName
filter[filters][1][filters][0][operator]:eq
filter[filters][1][filters][0][value]:PIZio
filter[filters][1][filters][1][field]:ToolDefinitionName
filter[filters][1][filters][1][operator]:eq
filter[filters][1][filters][1][value]:KIJos
Here is the code for the custom filtering:
var kendoGrid = $("#grid").data("kendoGrid");
var searchText = $("#tool-search").val();
var searchParts = searchText.split(",");
var search = { logic: "and", filters: [] };
search.filters.push({ field: "FacilityId", operator: "eq", value: _selectedFacilityId });
if (searchParts.length > 0)
search.filters.push({ field: "EntityCode", operator: "contains", value: $.trim(searchParts[0]) });
if (searchParts.length > 1)
search.filters.push({ field: "ProcessName", operator: "contains", value: $.trim(searchParts[1]) });
if (searchParts.length > 0)
kendoGrid.dataSource.filter(search);
kendoGrid.dataSource.pageSize(_selectedPageSize);
kendoGrid.dataSource.read();
Any help would be greatly appreciated.
I have a page with a KendoUI grid. Above the grid is a textbox which allows custom searches using comma-separated values. In all other pages which use the grid without the custom search textbox, the built-in "AND" and "OR" filters work great.
When using this page, "OR" is always treated as "AND".
Here's an example of the form data being posted via ajax using "OR" for a column in the grid called "ToolDefinitionName". I am also filtering on FacilityId = 39. When this filter is run, it returns no data even though both ToolDefinitionNames are valid:
take:50
skip:0
page:1
pageSize:50
sort[0][field]:EntityCode
sort[0][dir]:asc
filter[logic]:and
filter[filters][0][field]:FacilityId
filter[filters][0][operator]:eq
filter[filters][0][value]:39
filter[filters][1][logic]:or
filter[filters][1][filters][0][field]:ToolDefinitionName
filter[filters][1][filters][0][operator]:eq
filter[filters][1][filters][0][value]:PIZio
filter[filters][1][filters][1][field]:ToolDefinitionName
filter[filters][1][filters][1][operator]:eq
filter[filters][1][filters][1][value]:KIJos
Here is the code for the custom filtering:
var kendoGrid = $("#grid").data("kendoGrid");
var searchText = $("#tool-search").val();
var searchParts = searchText.split(",");
var search = { logic: "and", filters: [] };
search.filters.push({ field: "FacilityId", operator: "eq", value: _selectedFacilityId });
if (searchParts.length > 0)
search.filters.push({ field: "EntityCode", operator: "contains", value: $.trim(searchParts[0]) });
if (searchParts.length > 1)
search.filters.push({ field: "ProcessName", operator: "contains", value: $.trim(searchParts[1]) });
if (searchParts.length > 0)
kendoGrid.dataSource.filter(search);
kendoGrid.dataSource.pageSize(_selectedPageSize);
kendoGrid.dataSource.read();
Any help would be greatly appreciated.
Alexander Valchev
Telerik team
answered
on
08 Apr 2013
1 answer
95 views
I am currently evaluating the grid control and am having trouble implementing one of the requirements we have. Our server side data source contains data that is continually updating. When using the virtual scrollbar, the first time you scroll through the dataset, it will request data for the missing rows which is good. The problem is, when you scroll back through the dataset, no new data is requested. It seems to be cached internally in the control. In our case this data is stale and needs to be requested again.
Here is what I have tried so far:
Here is what I have tried so far:
- Using pageable.refresh and clicking the refresh button manually does request new data. But I need to do this programatically.
- Using the refresh api on the grid in response to a scroll event does not request new data. It does not appear to be performing the same operation as the refresh button above.
Is there any way to clear the cache or otherwise force a read() of my datasource in this scenario?
Alexander Valchev
Telerik team
answered
on
08 Apr 2013
