Questions on Kendo UI for jQuery Forum

3 answers

1.0K+ views

Get selected Color Value from Color Picker

Hi All,
I am using Kendo UI ColorPicker...In the samples provided, I am using Keyboard support HSV Picker.
How to get the selected color value ???
Like I need to assign the selected color as a background color to a div...
How to achieve this???

ColorPicker

answered on 11 Jul 2013

1 answer

367 views

sorting the group programmatically

Hello,

I need to sort the groups of a grid (and not the rows in the groups) programmatically.
I've seen that there's this functionality by clicking (after a grouping action) on the groupIndicator in the groupBar.

There's some function that i can call to use that functionality? Or some workaround?

Thanks

Fabio

Grid

answered on 11 Jul 2013

1 answer

83 views

OS Back Button Shouldn't Navigate to Login View

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

Application

answered on 11 Jul 2013

1 answer

103 views

Creating a blog reader app

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>

General Discussions

answered on 11 Jul 2013

1 answer

326 views

Row min-height

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:

.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...

Grid

answered on 11 Jul 2013

1 answer

81 views

Combo box selection animation happens at the top of the browser

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

ComboBox

answered on 11 Jul 2013

1 answer

176 views

Scatter line with multi axis for grouped data

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?

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);

});

Data:

[{"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"}]

Charts

answered on 11 Jul 2013

2 answers

149 views

How to manually initialize AutoComplete while loading instead of automatic loading.

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,

AutoComplete

answered on 10 Jul 2013

0 answers

64 views

Trying to display data in chart coming from WCF service?

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>

General Discussions

asked on 10 Jul 2013

4 answers

127 views

what CSS settings would remove this outline rectangle from grid which has been put on a panelBar

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?

Grid

answered on 10 Jul 2013