Questions on Kendo UI for jQuery Forum

4 answers

1.1K+ 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

86 views

Product offer

Hi! Do you also offer developing of existing website?

General Discussions

asked on 25 Apr 2012

4 answers

431 views

[Solved] 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

249 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

224 views

[Solved] 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

2 answers

493 views

DropDownList not showing client side validation message

Hello guys!

I cannot get kendo dropdownlist to show builtin mvc validation message on client side when clicking submit button.
If i remove the kendo initializer the dropdownlist gets rendered as default html select and the validation message is showing client side when clicking submit button.
Strange thing the builtin mvc validation message works for other kendo initialized controls like calendar or autocomplete, but cant get it to work for dropdownlist.
I'm stuck on this one and would surely appreciate your help guys :)

The model entity Person has a int field CompanyID with validation attribute [Required].
The view markup is as follows.
.......................................................
@Html.DropDownListFor(m => m.CompanyID, (IEnumerable<SelectListItem>)ViewBag.CompanyID)
@Html.ValidationMessageFor(m => m.CompanyID)
.......................................................
$(document).ready(function () {
$("#CompanyID").kendoDropDownList()
});
.......................................................

DropDownList

answered on 25 Apr 2012

0 answers

86 views

how can we use pie chart in grid for mobile apps?

Hi Guys,
how can we use pie chart in grid for mobile apps?

Charts

asked on 25 Apr 2012

0 answers

220 views

Can't delete numeric value and have null value??

I have moved this original thread to the MVVM area: http://www.kendoui.com/forums/framework/mvvm/unable-to-delete-numeric-or-date-value-and-have-model-update.aspx#2084418.

After more investigation, the controls (DatePicker and NumericTextBox) appear to be doing their part. Both control types do indeed have their values set to NULL and appear to be triggering the change event. It would seem the datasource is ignoring the change event if the value is NULL for numerics and dates.

Mike

NumericTextBox

asked on 25 Apr 2012

1 answer

221 views

DatePicker and jquery validation error

Hi All,

We're experiencing a problem with the DatePicker control that ships with Kendo when using jQuery validation that ships with ASP.NET MVC. This is my best attempt at describing the problem:

When using jquery.validation that ships with MVC, and you call $(‘form’).valid() it marks the outer span of the datepicker (the one with the k-datepicker class on it) with the error class. Then, when you validate the form again (i.e: change another field, or click save), the jquery.validation goes and removes any element with the .error class (not sure why, just the way it works). Because this class was put onto the datepicker itself, calling .hide() actually removes the datepicker from view.

Any ideas on how to solve this?

DatePicker

answered on 25 Apr 2012

0 answers

108 views

Unable to delete date value and have a null??

I have moved this original thread to the MVVM area: http://www.kendoui.com/forums/framework/mvvm/unable-to-delete-numeric-or-date-value-and-have-model-update.aspx#2084418.

After more investigation, the controls (DatePicker and NumericTextBox) appear to be doing their part. Both control types do indeed have their values set to NULL and appear to be triggering the change event. It would seem the datasource is ignoring the change event if the value is NULL for numerics and dates.

Mike

DatePicker

asked on 25 Apr 2012