Is it any chance to have Pie Chart or other DataViz widget refreshed after property of my VM was changed?
I've tried to init charts with VM wrapped by kendo.observable like:
var viewModel = kendo.observable({
                theme: "default",
                title: { text: "Break-up of Spain Electricity Production for 2008" },
                legend: { position: "bottom" },
                seriesDefaults: { labels: { visible: true, format: "{0}%" }},
                series: [{ type: "pie",
                    data: [ { category: "Hydro", value: 10 }, { category: "Solar", value: 20 }, 
       { category: "Nuclear", value: 30 }, { category: "Wind", value: 40}]         
 }]
            });
            $("#chart").kendoChart(viewModel);

but no luck - my chart was not generated at all.
It works better if wrap only data for series
var viewModel = {
                theme: "default",
                title: { text: "Break-up of Spain Electricity Production for 2008" },
                legend: { position: "bottom" },
                seriesDefaults: { labels: { visible: true, format: "{0}%" }},
                series: [{ type: "pie",
                    data: kendo.observable([ { category: "Hydro", value: 10 }, { category: "Solar", value: 20 }, 
       { category: "Nuclear", value: 30 }, { category: "Wind", value: 40}])
 }]
            };
            $("#chart").kendoChart(viewModel); 
but no refresh happened after i changed the collection:
viewModel.series[0].data.pop();
viewModel.series[0].data.pop();
viewModel.series[0].data.push({ category: "New", value: 70 });
even after i call
$("#chart").data("kendoChart").refresh();
Is it any chance to refreshing DataViz control without recreating it?

Thank you.

PS: I want to add one more voice for knockoutJS and drill down option for charts :)

Hi,
    I'm developing a Rails Application and using KendoUI DropDownList for my dropdowns but it takes many too much time to load the page as KendoUI Dropdown list uses calls to load

Please guide me if i'm doing it wrong or any other suggestions in this regard.
Thanks

I've got an understanding of why this is happening, but it's not going to be plausible to release this to our customers with the following happening, and I can't figure out any way around our scenario without using a RowTemplate.

Example here: http://jsfiddle.net/Xxn22/2/

As you can see, the columns don't align when grouped and you can't minimize/maximize the groups.

I am receiving this error when attempting to bind data from a file with Kendo UI

TypeError: 'undefined' is not an object (evaluating 'b.length')

I'm loading the JSON from a local file (data.json) with a fairly simply datastructure.

here is my data:

{"data":{
"Product":"Bacon",
"Price":19.56123,
"Quantity":5
},
{
"Product":"Pancakes",
"Price":13.91123,
"Quantity":17
}}


and here is my Kendo initializer

$("#remote").kendoGrid({
sortable: true,
dataSource:
{
type: "json",
transport:
{
read: "data.json"
},
schema:
{
data:"data",
/*
model:
{
fields:
{
"Product": { type: "string" },
"Price": { type: "number" },
"Quantity": { type: "number" }
}
}*/
},
pageSize: 3,
serverPaging: false,
serverFiltering: false,
serverSorting: false
},
columns:
[
{
field: "Product",
title: "Product Name"
},
{
field: "Quantity",
title: "Quantity"
},
{
field: "Price",
title: "Price",
template: '#= kendo.toString(Price, "c") #'
}
],
});


The error is the same with or without that Model field commented... I feel like this might be a jQuery dependency error (1.7.1), but I am not sure... any help or thoughts would be appreciated.

Thanks

Hi Team,


I am trying to post registration information to the remote web service. I am not sure what is going wrong here. My Webservice works fine if I use normal ajax method to post.

Any assistance in this is highly appriciated.

I followed the example and I'm getting this error when I click in the Insert Image and Insert Link buttons:

Time: 27/03/12 11:23:03
Error: c.insertBefore(e[0]).toggle(b) is null
Source-code: http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js
Line: 8

Hi there,

I am just getting starting and I cant seem to make the line chart work when I bind it to a json file.

I followed your documentation and here is the code and attached the files:

function createChart() {
                    
 var dataSource = new kendo.data.DataSource({
  transport: {
   read: "sales.js",
   dataType: "json"
                        }
 });
 
 $("#chart").kendoChart({
  dataSource: dataSource,
  theme: $(document).data("kendoSkin") || "BlueOpal",
   legend: {
   position: "top",
 },
  chartArea: {
   background: "",
 },
 series: [{
  field: "value",
 }],
  categoryAxis: {
  field: "year",
 }
});
}




sales.js file:

[ { "year": "2000", "value": 200 },
  { "year": "2001", "value": 450 },
  { "year": "2002", "value": 300 },
  { "year": "2003", "value": 125 },
]

Regards
Claudia

HI i am looking at the exemple called view. This example shows how to call a remote file (remote vieew) from a path called ../../content/mobile/view/remoteview.html. I would like to call this or another at a server with a http adress. I have tryed to just copy the remote view file to a another server but i does not load the "Hi I'm a remote view. I would like to call some pages on a server and have them presented in the design (inside the div) so that it looks like it is a part of the app and not showing the browser. Is this not what this is for also?

This is this code i am using.
It just ads #http://iapp.timeplan.dk/remoteview.html to the adress
Thanks
Lars

<!DOCTYPE html>
<html>
<head>
    <title>Overview</title>
    <script src="../../../js/jquery.min.js"></script>
    <script src="../../../js/kendo.mobile.min.js"></script>
    <script src="../../content/shared/js/console.js"></script>
    <link href="../../../styles/kendo.common.min.css" rel="stylesheet" />
    <link href="../../../styles/kendo.mobile.all.min.css" rel="stylesheet" />
</head>
<body>
    <a href="../index.html">Back</a>
    <div data-role="view" data-title="Views">
    <header data-role="header">
        <div data-role="navbar">
            <span data-role="view-title"></span>
            <a data-align="right" data-role="button" class="nav-button" href="#index">Index</a>
        </div>
    </header>
    <ul data-role="listview" data-style="inset">
        <li><a href="#secondview">Local View</a></li>
    </ul>
    <ul data-role="listview" data-style="inset">
        <li><a href="http://iapp.timeplan.dk/remoteview.html">Remote View</a></li>
    </ul>
</div>

<div data-role="view" id="secondview" data-layout="mobile-view" data-title="Local View">
    <p>Hello world!</p>
</div>

<div data-role="layout" data-id="mobile-view">
    <header data-role="header">
        <div data-role="navbar">
            <a class="nav-button" data-align="left" data-role="backbutton">Back</a>
            <span data-role="view-title"></span>
            <a data-align="right" data-role="button" class="nav-button" href="#index">Index</a>
        </div>
    </header>
</div>

    <script>
        window.kendoMobileApplication = new kendo.mobile.Application(document.body);
    </script>
</body>
</html>

Hi,

Last week I came across Kendo UI and I am beginning to like it.
It's great that there is consistency between the different consoles.
At this moment I am evaluating the different components to see if I can use Kendo UI to replace my current library.

I managed to color certain dates, that was no problem. What I want to know is how you can disable certain dates in the calendar.

Hope someone can help me with this.

Best regards,

Joshua

Here's what I'm trying to achieve: I want to have a data grid on the left and a column of buttons on the right.
I want the data grid on the left to take as much space as it needs but no more.

My grid has three columns. The first two are fixed size, and the third isn't. Optimistically, I thought that would mean that the third column takes as much space as it needs.

On Chrome, this third column has a width of 0.
On IE9, this third column takes up 100% of the remaining width of the screen.

Neither of these behaviors is what I want. I want it to take up as much space as it needs to hold the content.

Here's my working example:   js fiddle example   

View this same example in Chrome and IE9 and you'll see the difference.


Can somebody provide me ideas to solve this problem?

(I could put the whole grid and the buttons in one big layout table, but that will be using a table for layout purposes - the CSS police will come knocking :-) )