or
1 answer
103 views
Hello,
I have a mobile application with login functionality (a login view, in addition to other views that should only be visible to logged in users).
After a user logs in, they are taken to another view, let's call it the main view. Now, at least on android, if I tap the system's back button (the first one on the left here) then I am returned to the login view!
How can I prevent this from happening? Instead I want the app to be minimized if that button is tapped from the main view. Is this something that is outside the scope of kendo? Perhaps to be handled by phonegap?
Thanks
I have a mobile application with login functionality (a login view, in addition to other views that should only be visible to logged in users).
After a user logs in, they are taken to another view, let's call it the main view. Now, at least on android, if I tap the system's back button (the first one on the left here) then I am returned to the login view!
How can I prevent this from happening? Instead I want the app to be minimized if that button is tapped from the main view. Is this something that is outside the scope of kendo? Perhaps to be handled by phonegap?
Thanks
Petyo
Telerik team
answered
on
11 Jul 2013
1 answer
117 views
I am currently programing a blog reader application using HTML5 KendoUI Mobile & JavaScript currently i am able to use Json to list all my post in a list view and currently once an item is clicked on it takes me to the actual url of the post within the application. What i want to be able to do is once an item is clicked on display post content in a different view. Please help me!!!
<div data-role="view" data-init="mobileListViewPullToRefresh" data-title="What's New" id="tabstrip-whatsnew" data-layout="mobile-tabstrip"> <ul id="pull-to-refresh-listview"></ul></div><script id="pull-to-refresh-template" type="text/x-kendo-template"> <div class="post"> <a href="#= url #"><img class="menuimage" src="#= thumbnail_images.full.url #" alt="#= title #" /></a> <a href="#= url #"><span class="title">#= title #</span> </a> </div></script><script> function mobileListViewPullToRefresh() { var dataSource = new kendo.data.DataSource({ serverPaging: true, pageSize: 10, transport: { read: { url: "http://www.iviewsource.com/?json=recentstories", // the remote service url - Twitter API v1.1 dataType: "jsonp" // JSONP (JSON with padding) is required for cross-domain AJAX }, parameterMap: function(options) { return { q: "javascript", count: options.pageSize }; } }, schema: { // describe the result format // the data which the data source will be bound to is in the "results" field data: function(data) { return data.posts || []; } } }); $("#pull-to-refresh-listview").kendoMobileListView({ dataSource: dataSource, pullToRefresh: true, appendOnRefresh: true, template: $("#pull-to-refresh-template").text() }); }</script>
Petyo
Telerik team
answered
on
11 Jul 2013
1 answer
372 views
Hello,
For some reason, I can't find a way to apply the min-height style to a grid row.
I tried several way without success but here's one of the best example I can provide:
I thought that would be an easy thing to do so I must be missing something obvious here...
For some reason, I can't find a way to apply the min-height style to a grid row.
I tried several way without success but here's one of the best example I can provide:
.k-grid tbody tr, .k-grid tbody tr td{ min-height: 20px;}I thought that would be an easy thing to do so I must be missing something obvious here...
Dimo
Telerik team
answered
on
11 Jul 2013
1 answer
100 views
I have a list view, with a combo box templated for an add action. When I add the item, then make a selection in the combo box, the selected animation jumps to the top of the browser window. Made a quick video here.
http://screencast.com/t/FuY5TDGc2b
http://screencast.com/t/FuY5TDGc2b
Alexander Valchev
Telerik team
answered
on
11 Jul 2013
1 answer
192 views
Hi
I am attempting to build a scatter line for grouped data and multi-axis from a remote source. Each grouped series is rendering to each Y-axis.
Group S1 should render to X & Y1 axis
Group S2 should render to X & Y2 axis
What is actually happening is:
Group S1 & S2 are rendering to X & Y1 axis
Group S2 & S2 are rendering to X & Y2 axis
Is it possible to render groups to specific axis?
Data:
I am attempting to build a scatter line for grouped data and multi-axis from a remote source. Each grouped series is rendering to each Y-axis.
Group S1 should render to X & Y1 axis
Group S2 should render to X & Y2 axis
What is actually happening is:
Group S1 & S2 are rendering to X & Y1 axis
Group S2 & S2 are rendering to X & Y2 axis
Is it possible to render groups to specific axis?
var stocksDataSource = new kendo.data.DataSource({ transport: { read: { url: function () { return <%= url %>; }, dataType: "json" } }, group: { field: "GroupId" }, sort: { field: "X1", dir: "asc" }, schema: { model: { fields: { X1: { type: "date" } } } }});function createChart() { $("#chart").kendoChart({ title: { text: "Stock Prices" }, dataSource: stocksDataSource, series: [{ type: "scatterLine", xField: "X1", yField: "Y1", yAxis: "abc", name: "Y1", groupNameTemplate: "#= group.value # (#= series.name #)" }, { type: "scatterLine", xField: "X1", yField: "Y2", yAxis: "torque", name: "Y2", groupNameTemplate: "#= group.value # (#= series.name #)" }], legend: { position: "bottom" }, yAxes: [{ name: "abc", title: { text: "Power (bhp)" } }, { name: "torque", title: { text: "Torque (lb-ft)" } }], xAxis: { labels: { format: "dd MMM yy" } } });}$(document).ready(function () { setTimeout(function () { // Initialize the chart with a delay to make sure // the initial animation is visible createChart(); $("#example").bind("kendo:skinChange", function (e) { createChart(); }); }, 400);});[{"X1":"2012-01-20T00:00:00","Y1":100.0,"GroupId":"S1"},{"X1":"2013-01-02T00:00:00","Y1":110.0,"GroupId":"S1"},{"X1":"2013-01-03T00:00:00","Y1":110.0,"GroupId":"S1"},{"X1":"2013-01-03T00:00:00","Y1":110.0,"GroupId":"S1"},{"X1":"2013-01-03T00:00:00","Y1":110.0,"GroupId":"S1"},{"X1":"2013-01-04T00:00:00","Y1":120.0,"GroupId":"S1"},{"X1":"2013-01-05T00:00:00","Y1":130.0,"GroupId":"S1"},{"X1":"2013-01-06T00:00:00","Y1":140.0,"GroupId":"S1"},{"X1":"2013-01-10T00:00:00","Y1":150.0,"GroupId":"S1"},{"X1":"2013-01-01T00:00:00","Y2":1.0,"GroupId":"S2"},{"X1":"2013-01-02T00:00:00","Y2":2.0,"GroupId":"S2"},{"X1":"2013-01-03T00:00:00","Y2":3.0,"GroupId":"S2"},{"X1":"2013-01-03T00:00:00","Y2":4.0,"GroupId":"S2"},{"X1":"2013-01-03T00:00:00","Y2":5.0,"GroupId":"S2"},{"X1":"2013-01-04T00:00:00","Y2":6.0,"GroupId":"S2"},{"X1":"2013-01-05T00:00:00","Y2":7.0,"GroupId":"S2"},{"X1":"2013-01-06T00:00:00","Y2":8.0,"GroupId":"S2"},{"X1":"2013-01-07T00:00:00","Y2":9.0,"GroupId":"S2"}]
Iliana Dyankova
Telerik team
answered
on
11 Jul 2013
2 answers
177 views
Hello,
I am using Auto complete inside a form. When the form returns Kendo UI AutoComplete remembers the last input value and fills it in. But I would like to initialize it manually (in the code) instead. I tried setting the value to a variable but failed. Setting Autobind(false) did not work either.
Can you give me an example in Razor please?
I also like to do the same for dropdownlist and datepicker.
Thanks,
I am using Auto complete inside a form. When the form returns Kendo UI AutoComplete remembers the last input value and fills it in. But I would like to initialize it manually (in the code) instead. I tried setting the value to a variable but failed. Setting Autobind(false) did not work either.
Can you give me an example in Razor please?
I also like to do the same for dropdownlist and datepicker.
Thanks,
Daniel
Top achievements
Rank 1
Rank 1
answered
on
10 Jul 2013
0 answers
78 views
I'm using the same code as the kendoui demo, but with a WCF service instead of JSON. But the data is not being displayed.
The method call is returning exactly the same data as [spain-electricity.json] used in your demo. In my case it's http://localhost:4916/Service1.svc/getList and it displays exactly the same thing in the browser.
My IService1 interface looks like this:
[OperationContract]
[WebGet(ResponseFormat = WebMessageFormat.Json)]
IList<myStruct> getList();
The method looks like this:
public IList<myStruct> getList()
{
IList<myStruct> StructSpain = new List<myStruct>();
StructSpain.Add(new myStruct
{
country = "Spain",
year = "2008",
unit = "GWh",
solar = 2578,
hydro = 26112,
wind = 32203,
nuclear = 58973
});
...
return StructSpain;
}
My html looks like this:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.default.min.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" class="k-content absConf">
<div class="chart-wrapper" style="margin: auto;">
<div id="chart"></div>
</div>
<script>
function createChart() {
$("#chart").kendoChart({
dataSource: {
transport: {
read: {
type:"post",
url: "http://localhost:4916/Service1.svc/getList",
dataType: "json"
}
},
sort: {
field: "year",
dir: "asc"
}
},
title: {
text: "Spain electricity production (GWh)"
},
legend: {
position: "top"
},
seriesDefaults: {
type: "area"
},
series: [{
field: "nuclear",
name: "Nuclear"
}, {
field: "hydro",
name: "Hydro"
}, {
field: "wind",
name: "Wind"
}],
categoryAxis: {
field: "year",
labels: {
rotation: -90
}
},
valueAxis: {
labels: {
format: "N0"
},
majorUnit: 10000
},
tooltip: {
visible: true,
format: "N0"
}
});
}
$(document).ready(function() {
setTimeout(function() {
createChart();
// Initialize the chart with a delay to make sure
// the initial animation is visible
}, 400);
$(document).bind("kendo:skinChange", function(e) {
createChart();
});
});
</script>
</div>
</body>
</html>
The method call is returning exactly the same data as [spain-electricity.json] used in your demo. In my case it's http://localhost:4916/Service1.svc/getList and it displays exactly the same thing in the browser.
My IService1 interface looks like this:
[OperationContract]
[WebGet(ResponseFormat = WebMessageFormat.Json)]
IList<myStruct> getList();
The method looks like this:
public IList<myStruct> getList()
{
IList<myStruct> StructSpain = new List<myStruct>();
StructSpain.Add(new myStruct
{
country = "Spain",
year = "2008",
unit = "GWh",
solar = 2578,
hydro = 26112,
wind = 32203,
nuclear = 58973
});
...
return StructSpain;
}
My html looks like this:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.default.min.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" class="k-content absConf">
<div class="chart-wrapper" style="margin: auto;">
<div id="chart"></div>
</div>
<script>
function createChart() {
$("#chart").kendoChart({
dataSource: {
transport: {
read: {
type:"post",
url: "http://localhost:4916/Service1.svc/getList",
dataType: "json"
}
},
sort: {
field: "year",
dir: "asc"
}
},
title: {
text: "Spain electricity production (GWh)"
},
legend: {
position: "top"
},
seriesDefaults: {
type: "area"
},
series: [{
field: "nuclear",
name: "Nuclear"
}, {
field: "hydro",
name: "Hydro"
}, {
field: "wind",
name: "Wind"
}],
categoryAxis: {
field: "year",
labels: {
rotation: -90
}
},
valueAxis: {
labels: {
format: "N0"
},
majorUnit: 10000
},
tooltip: {
visible: true,
format: "N0"
}
});
}
$(document).ready(function() {
setTimeout(function() {
createChart();
// Initialize the chart with a delay to make sure
// the initial animation is visible
}, 400);
$(document).bind("kendo:skinChange", function(e) {
createChart();
});
});
</script>
</div>
</body>
</html>
Vaughn Myers
Top achievements
Rank 1
Rank 1
asked
on
10 Jul 2013
4 answers
142 views
The grid is on a panelBar. In configuration of the grid, grid height is set to 444px. PanelBar height is also set to 444px in its configuration:
When the grid is rendered, there is an outline rectangle in gray, and the grid's rows "spill over" it. Please see attached screen shots. I would like the outline either not to be visible or to be at the same location as the top of the grid footer rectangle.
What CSS settings do I need to change to fix that issue? How to set the grid's height so it occupies 100% of the panelBar's content pane?
When the grid is rendered, there is an outline rectangle in gray, and the grid's rows "spill over" it. Please see attached screen shots. I would like the outline either not to be visible or to be at the same location as the top of the grid footer rectangle.
What CSS settings do I need to change to fix that issue? How to set the grid's height so it occupies 100% of the panelBar's content pane?
1 answer
238 views
Hi guys
As we know, there's a problem with Kendo UI charts (and gauges and other widgets) being rendered that are underneath tabs. On load, the chart is unable to detect the size of it's parent container and defaults to 600 width.
So as a workaround, I'd like to bind an event to my tabs (Bootstrap NavBar) that refreshes EVERY Kendo UI chart/gauge etc onscreen at once. This code will go into a controller that will control multiple dashboards with configurable charts - so it's impossible to know ahead of time the IDs of the charts, or the count. There may be no charts, or 50.
That means I need some method of retrieving all Kendo UI objects (or all charts, all gauges, whatever) on the screen at once, preferably as an array so that I can iterate through this array and call refresh() on them.
The pages are being generated by PHP, so I don't have any selectors available. I'd like to place this code onto the bottom of the template so it's a 'drop-in', if possible.
I tried looking at the common classes, such as k-chart, when but I pushed that into a jQuery selector I was unable to call refresh().
Does anyone have any ideas on how I might accomplish this?
As we know, there's a problem with Kendo UI charts (and gauges and other widgets) being rendered that are underneath tabs. On load, the chart is unable to detect the size of it's parent container and defaults to 600 width.
So as a workaround, I'd like to bind an event to my tabs (Bootstrap NavBar) that refreshes EVERY Kendo UI chart/gauge etc onscreen at once. This code will go into a controller that will control multiple dashboards with configurable charts - so it's impossible to know ahead of time the IDs of the charts, or the count. There may be no charts, or 50.
That means I need some method of retrieving all Kendo UI objects (or all charts, all gauges, whatever) on the screen at once, preferably as an array so that I can iterate through this array and call refresh() on them.
The pages are being generated by PHP, so I don't have any selectors available. I'd like to place this code onto the bottom of the template so it's a 'drop-in', if possible.
I tried looking at the common classes, such as k-chart, when but I pushed that into a jQuery selector I was unable to call refresh().
Does anyone have any ideas on how I might accomplish this?
1 answer
76 views
When "AutoHide" is set to False, the ShowOn configuration only delays the display of the tooltip.
Expected functionality is that ShowOn will prevent the display of the tooltip until it has been hovered over for the specified interval.
How can I achieve the expected functionality?
Expected functionality is that ShowOn will prevent the display of the tooltip until it has been hovered over for the specified interval.
How can I achieve the expected functionality?
Petur Subev
Telerik team
answered
on
10 Jul 2013
