or
0 answers
333 views
Hi,
I'm having some trouble with the behaviour of a checkbox "change" event in a Kendo Mobile app and i've run out of ideas. I apologise if this is not the right place to ask these things. Any help will be appreciated.
Basically, i have a checkbox and a "change" event handler. In the handler, i do something depending on the value of "this.checked", which should indicate if the checkbox is checked or not after it's changed its state. Nothing crazy. Here's a fiddle with a simple example of this using plain jQuery (i've tested it mostly in Chrome and an Android device).
Now, as soon as i kendoize that example, the checkbox no longer works properly. Here's another fiddle showing that.
It seems like the checkbox now works backwards (the message says "the checkbox is NOT checked" when you check it and vice versa), but what's actually happening is that the "checked" value is not being updated before the "change" event handler is called. It's being updated afterwards. So, adding an ugly setTimeout on the handler so the code executed on the next JS event cycle, the example now magically works as expected. But that's a really ugly hack.
The problem is that if i want to use the Kendo MVVM style for that example, the weird behaviour of the change event also manifests there --as seen in this fiddle--, and i'd have no idea on how to make the setTimeout hack there.
Has anyone else come across this problem? Am i doing something wrong? Or is it a Kendo bug?
Thanks!
I'm having some trouble with the behaviour of a checkbox "change" event in a Kendo Mobile app and i've run out of ideas. I apologise if this is not the right place to ask these things. Any help will be appreciated.
Basically, i have a checkbox and a "change" event handler. In the handler, i do something depending on the value of "this.checked", which should indicate if the checkbox is checked or not after it's changed its state. Nothing crazy. Here's a fiddle with a simple example of this using plain jQuery (i've tested it mostly in Chrome and an Android device).
Now, as soon as i kendoize that example, the checkbox no longer works properly. Here's another fiddle showing that.
It seems like the checkbox now works backwards (the message says "the checkbox is NOT checked" when you check it and vice versa), but what's actually happening is that the "checked" value is not being updated before the "change" event handler is called. It's being updated afterwards. So, adding an ugly setTimeout on the handler so the code executed on the next JS event cycle, the example now magically works as expected. But that's a really ugly hack.
The problem is that if i want to use the Kendo MVVM style for that example, the weird behaviour of the change event also manifests there --as seen in this fiddle--, and i'd have no idea on how to make the setTimeout hack there.
Has anyone else come across this problem? Am i doing something wrong? Or is it a Kendo bug?
Thanks!
Demian
Top achievements
Rank 1
Rank 1
asked
on
10 Aug 2012
3 answers
347 views
I have created a view model that handles a button click. in that click it calls ajax. if the ajax call is successfull, i want to hide a div and show another one. inside of the ajax callback, i cannot use this to reference the view model. I know i can call the view model by name, but should I?
what is the proper way to code the below snippet?
var viewModel = new kendo.observable({
visibleEntry: true,
visibleSuccess: false,
hideEntry: function(e) {
$.ajax('someurl').success(function(e) {
this.set("visibleEntry", false);
this.set("visibleSuccess", true);
});
}
});
kendo.bind($('#divContainer'), viewModel);​
what is the proper way to code the below snippet?
visibleEntry: true,
visibleSuccess: false,
hideEntry: function(e) {
$.ajax('someurl').success(function(e) {
this.set("visibleEntry", false);
this.set("visibleSuccess", true);
});
}
});
kendo.bind($('#divContainer'), viewModel);​
6 answers
336 views
In javascript how can you watch changes to a nested property or computed property on an observable object?
http://docs.kendoui.com/api/framework/observableobject#methods has observable.bind("change", function(e) { }); but this does not seem to update for nested properties/computed properties.
3 answers
815 views
I want to change grid font color of the grid based on the jsp data from database. How I will put condition on the changing grid color dynamically from jsp page.
For example,
I have 2 types of records and as per condition i want to change the color of one record in blue and other one in red.
Please help me.
For example,
I have 2 types of records and as per condition i want to change the color of one record in blue and other one in red.
Please help me.
0 answers
117 views
Hello,
I am using the built-in toolbar save command and batch editing. When a user edits some rows and clicks the save button, I need to find which rows were edited. How do I go about doing this? There is no documentation that explains the event passed to the saveChanges function.
I am using the built-in toolbar save command and batch editing. When a user edits some rows and clicks the save button, I need to find which rows were edited. How do I go about doing this? There is no documentation that explains the event passed to the saveChanges function.
1 answer
145 views
I see UI component demos. Are there any application demos? They would be most welcome both to show how the UI components fit into an overall application, and to show suggested patterns for a real enterprise web app.
Thanks.
Thanks.
Alex
Top achievements
Rank 1
Rank 1
answered
on
09 Aug 2012
0 answers
184 views
It looks like my other post didn't save for some reason? Anyway, let me try typing this out again!
So I'm looking for a way to have severa inputs in a form use the same validator message. This is my scenario - I have 8 input fields all requiring 1 - 100 to validate correctly. I find it unnecessary to have 8 validator messages all say the same thing, so I'm looking for a way to have one message on the top of the form that says "must be 1 - 100." However, I can't get this to work without the "data-for" attribute.
I could theoretically "hack" this by creating 8 validator messages, positioning them absolutely, so they would stack, looking like one message. That's a bit "hacky" and I'm hoping to do this the proper way.
Any recommendations would be greatly appreciated. Thanks in advance for your time.
So I'm looking for a way to have severa inputs in a form use the same validator message. This is my scenario - I have 8 input fields all requiring 1 - 100 to validate correctly. I find it unnecessary to have 8 validator messages all say the same thing, so I'm looking for a way to have one message on the top of the form that says "must be 1 - 100." However, I can't get this to work without the "data-for" attribute.
I could theoretically "hack" this by creating 8 validator messages, positioning them absolutely, so they would stack, looking like one message. That's a bit "hacky" and I'm hoping to do this the proper way.
Any recommendations would be greatly appreciated. Thanks in advance for your time.
Jeremy
Top achievements
Rank 1
Rank 1
asked
on
09 Aug 2012
0 answers
1.1K+ views
It would be nice if clearSelection() took an argument, so that I could just deslect a few rows. Right now I find that I am having to first clear all and then select, which does not perform well when the number of rows selected is over 25, and I want to deselect one (that has a column with the contents of valueOf(data.idx).
grid.select("only the desired records") did not work, i.e. if there were three previously selected, and this new list was length two, then all three would remain selected. So I have to clearSelection().
grid.select("only the desired records") did not work, i.e. if there were three previously selected, and this new list was length two, then all three would remain selected. So I have to clearSelection().
var jFilter = ":not(:contains('{0}'))";var records;jFilter = jFilter.format(data.idx);records = GridData.grid.tbody.find(">tr.k-state-selected[data-uid]").filter(jFilter);GridData.grid.clearSelection();GridData.grid.select(records);6 answers
152 views
Hello, I'm having a strange issue. I'm using the DataViz controls (both Gauge and Chart) for a dashboard application. Everything works great, except for 1 thing. The Line Charts do not work in IE8 for me. IE9 works fine, as does every other browser. Unfortunately, many of our employees are running Windows XP and are locked out of installing 3rd party browsers, so IE8 is the defacto browser I have to get this working in. Your source examples work fine in IE8, so I'm a bit dumbfounded.
I'm receiving no error in Firebug's console in Firefox, but running IE9 in IE8 Standards mode using developer tools, gives me an error of:
SCRIPT87: Invalid argument.
kendo.dataviz.min.js, line 8 character 75326
Not sure what that means...
Anyhow, any help would be greatly appreciated. I have attached screen captures to (possibly) aid in an answer. I had to blur out labels that would identify our company, but it's still easy to see what's going on. Thanks in advance for any help!
I'm receiving no error in Firebug's console in Firefox, but running IE9 in IE8 Standards mode using developer tools, gives me an error of:
SCRIPT87: Invalid argument.
kendo.dataviz.min.js, line 8 character 75326
Not sure what that means...
Anyhow, any help would be greatly appreciated. I have attached screen captures to (possibly) aid in an answer. I had to blur out labels that would identify our company, but it's still easy to see what's going on. Thanks in advance for any help!
3 answers
276 views
Hello!
Story:
I want to compare two sets of data created for two periods of time (periods have same length).
As I find out in the kendo doc I can create two X axis for scatter chart. This is the thread that inspire me
The best result I could get is (you can try this here: http://jsfiddle.net/yXXCM/):
https://www.dropbox.com/s/2qbdhz8ek5keh0j/day-large-no-hours.PNG (is it possible to inline the images into the post?)
It is quite nice I would say. I is not perfect as labels are not match dots on the chart (that is because the label is not a day, it is a day + some hours: http://jsfiddle.net/RK26K/).
( You can notice labels' template for the second x axis (template: "#= kendo.toString(new Date(value + 1728000000), 'hh:mm dd MMM') #"). The "magic number" 1728000000 is a difference between periods calculated on the server. It is surely a hack, but it is the only way I found :) )
But unfortunately this chart looks really nasty for small period of time and for week/month charts:
https://www.dropbox.com/s/xqkcwr2l94tklr5/day-small.PNG
https://www.dropbox.com/s/qamzyx3pqsix4jv/week.PNG
https://www.dropbox.com/s/98lg7asn4b2tb3w/month.PNG
Just look on 3 junes, 3 July and no August (the third dot) of months chart.
Question:
Actually, the problem is that X/Y chart is not the one that can help me.
I definitely need a categorical chart. Category is a day or a week or a month in my case. But looks like categorical carts doesn't support two categories axis. Is that true?
Could anyone help me with that %&^$^& cart? :)
Probably there is a workaround for my problem.
Thanks,
Andrei.
Story:
I want to compare two sets of data created for two periods of time (periods have same length).
As I find out in the kendo doc I can create two X axis for scatter chart. This is the thread that inspire me
The best result I could get is (you can try this here: http://jsfiddle.net/yXXCM/):
https://www.dropbox.com/s/2qbdhz8ek5keh0j/day-large-no-hours.PNG (is it possible to inline the images into the post?)
It is quite nice I would say. I is not perfect as labels are not match dots on the chart (that is because the label is not a day, it is a day + some hours: http://jsfiddle.net/RK26K/).
( You can notice labels' template for the second x axis (template: "#= kendo.toString(new Date(value + 1728000000), 'hh:mm dd MMM') #"). The "magic number" 1728000000 is a difference between periods calculated on the server. It is surely a hack, but it is the only way I found :) )
But unfortunately this chart looks really nasty for small period of time and for week/month charts:
https://www.dropbox.com/s/xqkcwr2l94tklr5/day-small.PNG
https://www.dropbox.com/s/qamzyx3pqsix4jv/week.PNG
https://www.dropbox.com/s/98lg7asn4b2tb3w/month.PNG
Just look on 3 junes, 3 July and no August (the third dot) of months chart.
Question:
Actually, the problem is that X/Y chart is not the one that can help me.
I definitely need a categorical chart. Category is a day or a week or a month in my case. But looks like categorical carts doesn't support two categories axis. Is that true?
Could anyone help me with that %&^$^& cart? :)
Probably there is a workaround for my problem.
Thanks,
Andrei.
