Questions on Kendo UI for jQuery Forum

1 answer

256 views

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

365 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

958 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

65 views

Product offer

Hi! Do you also offer developing of existing website?

General Discussions

asked on 25 Apr 2012

4 answers

372 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

202 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

184 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

2 answers

402 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

59 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

179 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