Questions on Kendo UI for jQuery Forum

2 answers

135 views

i'm trying to create an input widget similar to a datepicker. It should have an icon. When its clicked it should show a window popup (rather than a calender).

can anyone point me to a good example.
thanks
kashim

General Discussions

answered on 25 Apr 2012

0 answers

28 views

Simple problem with <form> tag

Hi,

I'm porting a simple Energy cost calculator made in Javascript.
When i use the <form> tag Kendo UI isn't correcly displayed. This simple tag ins't supported or im wrong?

How can i fix this code to work with kendo ui? how can i access to my fields

 watts, hours and how to call the javascript function?

<div data-role="view" id="forms" data-title="Calculadora de Consumo" data-layout="layout" data-transition="slide" data-init="initForm" >

<ul data-role="listview" data-style="inset" data-type="group">

<li>

Sepa cuánto consumen sus artefactos.

<ul>

<li>

<input type="tel" name="watts" size="5" value="0" />Watts del artefacto

</li>

<li>

<input type="tel" name="hours" size="5" value="0" />Horas de funcionamiento

</li>

<li>

<input type="tel" name="unitcost" size="9" value="105" />Costo KWh

</li>

<li>

<input type="button" value="Calculate" onclick="workitout(this.form)" />

</li>

<li>

<input type="text" name="daycost" size="7" />Costo diario

</li>

<li>

<input type="text" name="qtrcost" size="7" />Costo mensual

</li>

<li>

<input type="text" name="yrcost" size="7" />Costo anual

</li>

</ul>

</li>

</ul>

</div>

<script language="JavaScript" type="text/JavaScript">

<!--

function workitout(form)

{

var kw = form.watts.value / 1000;

var hrs = parseInt(form.hours.value);

var cost = (form.unitcost.value * kw * hrs) / 100;

var annual = cost * 365;

var quarter = annual / 12;

cost = round(cost);

annual = round(annual);

form.daycost.value = cost;

form.qtrcost.value = quarter;

form.yrcost.value = annual;

}

function round (num) {

num = Math.round(num * 100) / 100;

num = (num + 0.001) + '';

return num.substring(0, num.indexOf('.') + 3);

}

// End -->

</script>

General Discussions

asked on 25 Apr 2012

1 answer

522 views

keyup event

is there a way to fire keyup event in editor? also how to use onChange? but still onchanges uses blur right? and i need to know if someone changed one letter without blur.

Editor

answered on 25 Apr 2012

1 answer

289 views

Documentation for Pager?

I'm using a ListView in my page, and since upgrading to 2012.1 it's working! However, I can't find any documentation on kendoPager. Right now, the paging is the default: hyperlinks to individual pages in list elements. Can pager use templates? Can I change it to arrow buttons for next and previous page? What are its events, methods, configuration?

Thank you!

General Discussions

answered on 25 Apr 2012

2 answers

395 views

Dynamically selecting data templates

I'm attempting to use the MVVM framework to bind an array of objects to some templates. In my scenario, assume I have an array of animals. I want to use a different template for each animal. How can this be accomplished?

The code might look like this:

var vm = kendo.viewModel({

animals: []

});

vm.animals.push(new Cat());

vm.animals.push(new Dog());

kendo.bind("#farm", vm);

With HTML that looks like:

<div id="farm">

<div data-template="animal-template" data-bind="source: animals"></div>

</div>

Here is where I would define the different templates for each animal

Templates

answered on 25 Apr 2012

4 answers

1.0K+ views

Dynamic chart control sizing example, please?

I have multiple charts on the screen, each in a div. I am resizing the divs that contain them when the iPad orientation switches, landscape to portrait or back, and I want the charts contained within the divs to resize to match their containing div size. I have googled, and not found an example that works for me yet. Is there one available you could point me to?

Thanks!

Charts

answered on 25 Apr 2012

0 answers

77 views

Product offer

Hi! Do you also offer developing of existing website?

General Discussions

asked on 25 Apr 2012

4 answers

396 views

Pie Chart does not render correctly when updating DataSource

Hi All,

I have a problem with the DataViz Pie Chart.

Here is the idea: I have a global variable where I store key/value pairs. Keys represent the id of the div where the chart will be rendered and the value is the array for the dataSource.

Example:
['chart1' : [ { category :"Category1", value:"value1", color: "#BBBBBB" }....]

here I have the configuration for the chart and the creation of DataSource:

var newDataSource = new kendo.data.DataSource({ data: GLOBAL_ALL_PIE_DATA[controlID] });

var chartConfiguration = {

theme: $(control).attr("theme"),

title: { text: $(control).attr("title") },

legend: {

position: $(control).attr("position")

},

seriesDefaults: {

labels: {

visible: $(control).attr("showLabels"),

format: "{0}%"

}

},

dataSource: newDataSource,

series: [{

type: "pie",

categoryField: "category",

field: "value",

colorField: "color"

}],

tooltip: {

visible: $(control).attr("showTooltip"),

format: "{0}%"

}

};

//create the chart

$(jqControlID).kendoChart(chartConfiguration);

}

First time the Chart is rendered correctly.

When I want to update the datasource (let's say I create a new Instance of kendo.data.DataSource or I use the add(model) method of the datasource) the chart loads as seen on the attached picture. After updating the datasource or using the add method am using the refresh() method of the chart to redraw.

I am pretty sure that I am not doing something ok with the datasources, but I can't figure it out.

Thanks in advance,
Gergő

Charts

answered on 25 Apr 2012

2 answers

214 views

URGENT: Preparing Observable Collection from remote resources

Hi Team,

I want to prepare an observable collection which will be populated from remote resources. I tried so many ways to do so using your web demos and other help but failed in all corner.

Here is what I want to do:

I want to have an observable collection somewhat like:

var viewModel = kendo.observable({

gridSource: [

// Grid Data

],

cityDataSource: [

// City dropdown data

]

});

In above code, both gridSource and cityDataSource will be populated by remote web service which will return data in JSON format.

After that, I want to bind my viewModel to my view.

I tried doing so in so many ways but all in vain.

My web service method looks like:

[WebMethod]

[ScriptMethod(ResponseFormat = ResponseFormat.Json)]

public ADVBrokerList[] GetADVBrokerList()

{

try

{

string jsonData = string.Empty;

objService = new SourceDataServices();

ADVBrokerList[] data = objService.GetADVBrokerList();

return data;

}

finally

{

objService = null;

}

Although I'm able to populate a single data source using below code:

var dataSource = new kendo.data.DataSource({

transport: {

read: {

// the remote service url

url: "http://localhost/WebServices/MyWebService.asmx/GetADVBrokerList",

contentType: "application/json; charset=utf-8",

type: "POST",

dataType: "json"

}

}, // -- END OF TRANSPORT

// describe the result format

schema: {

data: "d"

},

change: function () { // subscribe to the CHANGE event of the data source

$("#main").html(kendo.render(template, this.view()));

}

}); // -- END OF DATASOURCE BLOCK

dataSource.read();

But when I try to put this datasource inside an observable collection, it fails.

Can you please urgently share complete working code with me on how to achieve the above said functionality? Please share a sample code. This is really urgent and I'm really short of time.

Please please help me.

Thanks,
Shiva

MVVM

answered on 25 Apr 2012

2 answers

197 views

problem with using data visualization (pie chart) in mobile layout.

Hi Guys,

I am running two different applications, one is mobile layout and other is pie chart application from demo.
I have observed following things while using these applications.

1>See the attachment file try1.html having code for pie chart. running this application working fine for pie chart.
But, if i change the sequence in head tag from


<link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="styles/kendo.default.min.css" rel="stylesheet" type="text/css" />


<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/kendo.web.min.js" type="text/javascript"></script>


<link href="styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<script src="js/kendo.mobile.min.js" type="text/javascript"></script>


<link href="styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />


<script src="js/kendo.dataviz.min.js" type="text/javascript"></script>
to



<link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="styles/kendo.default.min.css" rel="stylesheet" type="text/css" />


<link href="styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />


<script src="js/kendo.dataviz.min.js" type="text/javascript"></script>


<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/kendo.web.min.js" type="text/javascript"></script>


<link href="styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<script src="js/kendo.mobile.min.js" type="text/javascript"></script>

then its not working. Giving following error.
Uncaught ReferenceError:jQuery is not defined
Uncaught TypeError: Object [object Object] has no method 'kendoChart'

2>See the attachment file try2.html having code for mobile layout. running this application working fine for mobile layout.
But when I add data visualization in the head tag.

<link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="styles/kendo.default.min.css" rel="stylesheet" type="text/css" />


<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/kendo.web.min.js" type="text/javascript"></script>
<script src="js/kendo.mobile.min.js" type="text/javascript"></script>

<link href="styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />

<script src="js/kendo.dataviz.min.js" type="text/javascript"></script>

then its not working. And throwing following following error.
Uncaught TypeError: undefined is not a function at var app = new kendo.mobile.Application(document.body);

My requirement is that i want to use pie chart in mobile layout. Whether it is possible in kendoui or not?
Or whether it creates problem while importing dataviz js/styles and mobile js/styles in sequence.?

Charts

answered on 25 Apr 2012