Questions on Kendo UI for jQuery Forum

0 answers

256 views

As an example the below code is using a kendo observable with a remote datasource model and view. I understand how to debug the ajax call to retrieve the data. But where and how do I verify that the data matches the model, then when I bind my form to my viewModel where do I debug this is for example the dropdownbox is not filling with data even though the ajax data request was a success and see the ajax response in the debugger. But can't tell where my error is??

<!DOCTYPE html>

<html>

<head>

<title></title>

<script src="js/lib/jquery/jquery-1.8.1.min.js"></script>

<script src="js/lib/kendoui/kendo.web.min.js"></script>

<link href="css/KendoUI/kendo.common.css" rel="stylesheet" />

<link href="css/KendoUI/kendo.blueopal.css" rel="stylesheet" />

</head>

<body>

<div id="example" class="k-content">

<div id="form-container">

<div class="demo-section">

Select Product: <select data-role="dropdownlist" data-option-label="Select product"

data-value-field="ID" data-text-field="lastName"

data-bind="source: productsSource, value: selectedProduct"></select>

<button data-bind="click: save, enabled: hasChanges" class="k-button">Submit All Changes</button>

</div>

<div class="demo-section product-info"></div>

<ul>

<li><label>ID</label> <span data-bind="text:selectedProduct.ID, events: { change: change }"></span></li>

<li><label>Last Name</label> <input type="text" class="k-textbox" id="lname" data-bind="value: selectedProduct.lastName, events: { change: change }" /></li>

</ul>

<button data-bind="click: remove" class="k-button">Delete Product</button>

</div>

<script>

var crudServiceBaseUrl = "http://127.0.0.1:8081/cors";

var viewModel = kendo.observable({

productsSource: new kendo.data.DataSource({

transport : {

read: function(operation) {

//alert("begin read")

$.ajax({

url: crudServiceBaseUrl + "/People",

dataType: "json",

success: function(response) {

// debugger;

//alert(response)

alert("success read"); //mark the operation as successful

},

error: function(e){

alert("error")

}

});

},

batch: true,

schema: {

data : "__ENTITIES",

model : {

id : "ID",

fields : {

__KEY : {

editable : false,

nullable : true

},

__STAMP : {

editable : false,

nullable : true

},

ID : {

editable : false,

nullable : true

},

firstName : {

validation : {

required : true

}

},

lastName : {

validation : {

required : true

}

}),

selectedProduct: null,

hasChanges: false,

save: function() {

this.productsSource.sync();

this.set("hasChanges", false);

},

remove: function() {

if (confirm("Are you sure you want to delete this product?")) {

this.productsSource.remove("1");

// this.set("selectedProduct", this.productsSource.view()[0]);

this.change();

}

},

// showForm: function() {

// return this.get("selectedProduct") !== null;

// },

change: function() {

this.set("hasChanges", true);

}

});

alert("bind")

kendo.bind($("#form-container"), viewModel);

</script>

</body>

</html>

MVVM

asked on 20 Sep 2012

0 answers

139 views

Problem binding chart dataSource in template

I'm trying to bind a chart using MVVM, but get this error: "Uncaught Error: The dataSource binding is not supported by the Chart widget"

Here is my template:
<script id="chart-template" type="script/x-kendo-template">
<div data-role="chart" data-series-field="value" data-categoryaxis-field="category" data-seriesdefaults-type="column" data-bind="dataSource: #: parent().parent().dataSource #" class="chart"></div>
</script>

I'm using parent to get back to the chart array's main object, since it has the datasource. If it would have worked, I would have switched that to a function that would return a new datasource specific to each chart. Is my template totally wrong, or can you really just not bind a chart's dataSource with templates yet? I'm a Kendo newbie, so I could easily be messing this up. Thanks!

Edit:
Ok, so now I got this when trying to declaratively bind the tabstrip's activate event: "Error: The activate binding is not supported by the TabStrip widget". This whole declarative initialization really seems half-baked. Can someone please comment on this? If this is the case, can you at least indicate in the documentation whether each property/event can be declaratively databound?

Charts

asked on 20 Sep 2012

0 answers

83 views

Binding to backgroundImage broken in ie8

On the html:

data-bind="style: {backgroundImage: imgSrc}"

On the observable:

imgSrc: function() { return 'url(' + this.get('filename') + ')'; }

In IE8:

this.element.style[a]=this.bindings.style[a].get() throws "Invalid argument."

this.bindings.style[a].get:

function(){
var a=this,b=a.source,c,d=a.path,f=b;
a.start();
if(a.observable) {
f=b.get(d);
while(f===undefined&&b)
b=b.parent(),b instanceof e&&(f=b.get(d));
typeof f=="function"&&(c=d.lastIndexOf("."),c>0&&(b=b.get(d.substring(0,c))),f=k(f,b),f=f(a.source)),b&&b

MVVM

asked on 20 Sep 2012

1 answer

192 views

Kendo MVVM and SPA - slow

I created my whole page as an SPA, all the links do Ajax calls and just refresh content areas. I have serious performance Issues with content areas that have Kendo widgets. With a lot of subsequent calls the app becomes slower and slower until it freezes. I checked whats happening and I see Kendo with each initalization adds <div> items to the bottom of the <body>, when my app changes the content area which is inside the body these divs stay and with each click they keep growing until they turn into a monster that kills the performance.

Is there some generic method to clean these up?

MVVM

answered on 20 Sep 2012

2 answers

141 views

Binding and external View

Hi,

i got a external view - linked with <a href="page2.html"> from my main page. In this view is a tag which i want to bind a variable. How do i know when the view is loaded, so i can bind my variable?

Bye

Georg

MVVM

answered on 20 Sep 2012

1 answer

173 views

Datasource vs Mvvm

Trying to wrap my head around the different data access methods. I have read all the docs on datasouce and mvvm but still am a little confused. I know mvvm is a pattern but its not just code seperation as in the examples mvvm is used for dataaccess without using a datasource.

Are datasource and mvvm two different approaches to working with data?
So you could use a datasource and templating for method 1
or Mvvm for method 2

I have read a forum where someone asked about using a datasource with mvvm why would you want to?

A datasource contains part of mvvm because it has the model as part of itself.

Just trying to pick one method for development and stick with it but not sure which one to go with.

Also in Mvvm you have all the different binding methods that are a bit confusing such as html element binding or attribute binding are these to different approaches where you just need to pick either html or attribute?

Thanks,

Dan

Data Source

answered on 20 Sep 2012

0 answers

95 views

Cancel the Request to fill the grid

Hello guys,

I would like to know, if is there any way to cancel the request that fill some data by ajax on the grid of Kendo UI web?

I mean it because I have a page where the user can change the filter (on links.. not on the grid) and sometimes I have a lot of data coming from the async request, so if my user change these filters I would like to cancel the async request and start another one.

Look my code:

var path = 'my-url';
var grid = $("#grid").kendoGridTranslated({
dataSource: {
type: "json",
transport: {
read: {
dataType: "json",
url: path,
cache: false,
type: 'POST',
data: {
parameter: true
}
}
}
/* configuration and fields*/
}).data("kendoGrid");

Thank you.

Grid

asked on 20 Sep 2012

4 answers

186 views

How to plot points on area chart

Hi Kendo Team

As a part of Dashboard in my project I need to show the sales value for a given date.I am able to plot the area using the area chart but am not able to mark the value of the sale for a given day.I need to get the output as in the file attached to this thread.Do I need to use two types of chart to achieve this kind of output.If thats the case which type of charts should i use together and how to do it.

Awaiting your response

Thanks in Advance
Ramoji

Charts

answered on 20 Sep 2012

1 answer

152 views

Debugging MVVM Attributes

Does anyone know how to debug a databound attribute in MVVM?

For example: I want to see the value of a calculated attribute.

I tried console.debug (this.get(" XXXX"));

This doesnt do anything. Anyone else?

MVVM

answered on 20 Sep 2012

1 answer

99 views

Example for using Kendo Globalization?

Hi,

we are evaluation Kendo UI. What we like about it is it's support for Globalization using Cultures. But I've got a question about that:
-> Do you have an example how to use the Kendo Globalization in an app?

We would like to be able to use Kendo Globalization for all labels. Is that possible?

Otherwise what do you suggest on that topic? Another possiblity is to use https://github.com/SlexAxton/messageformat.js.

Thanks,
Jan

General Discussions

answered on 20 Sep 2012