or
8 answers
982 views
I am attempting to hurdle our last issue with moving to Kendo charting. On most of our charts, we provide a more indepth look at the data when hovering over a bar series item. Often we will popup a panel with a pie chart breaking down totals, or a grid of the data that makes up the bar item etc.
I can utilize the onserieshover and create the pie chart/grid but can't seem to figure out how to make it appear as though it is a popup/hover item of the parent chart.
My last attempt (which was a horrible idea, but I figured I'll try it), was to expand the .k-tooltip div to the size I needed, append a div tag, and call .chart on that. It works... sort of. It looks like it is drawing the chart, but then disappears.
See fiddle http://jsfiddle.net/giltnerj0/ZPEWN/5/ may hopefully describe what I am trying to do a little better.
If you comment out the
$(".k-tooltip").width(300);
$(".k-tooltip").height(400);
$(".k-tooltip").append("<br /><div id='childChart'></div>");
and then uncomment the
<!--<div id="childChart"></div>-->
It works perfectly, just as a separate chart.
I can utilize the onserieshover and create the pie chart/grid but can't seem to figure out how to make it appear as though it is a popup/hover item of the parent chart.
My last attempt (which was a horrible idea, but I figured I'll try it), was to expand the .k-tooltip div to the size I needed, append a div tag, and call .chart on that. It works... sort of. It looks like it is drawing the chart, but then disappears.
See fiddle http://jsfiddle.net/giltnerj0/ZPEWN/5/ may hopefully describe what I am trying to do a little better.
If you comment out the
$(".k-tooltip").width(300);
$(".k-tooltip").height(400);
$(".k-tooltip").append("<br /><div id='childChart'></div>");
and then uncomment the
<!--<div id="childChart"></div>-->
It works perfectly, just as a separate chart.
1 answer
2.6K+ views
Trying to add a % sign to a number in a Kendo NumericTextBox. You suggest escaping the % sign as such:
$("#numeric").kendoNumericTextBox({
format: "# \%"
});
but when I give it a value of 3, it still gives me 300%!
From your documentation:
"%" - percentage placeholder Multiplies a number by 100 and inserts a localized percentage symbol in the result string. Note: '%' symbol is interpreted as a format specifier in the format string. If you need to prevent this, you will need to precede the '%' symbol with a backslash -
'kendo.toString(12, "# \%")'-> 12 % (en-us).
Alexander Valchev
Telerik team
answered
on
03 Jan 2013
3 answers
66 views
Example jsfiddle - http://jsfiddle.net/MnjWH/
I can only get max/min to work when they are specified as pixels. It doesn't look like this is fixed in the latest internal build either. Is there something wrong with my code or is this a bug?
I can only get max/min to work when they are specified as pixels. It doesn't look like this is fixed in the latest internal build either. Is there something wrong with my code or is this a bug?
Dimo
Telerik team
answered
on
03 Jan 2013
7 answers
575 views
Hi - I am writing to find out more about the CSS FlexBox support offered by Kendo UI Mobile. As you know, Flexbox has undergone many changes in the last few years and I am wondering if you could provide some examples of flex layouts in Kendo UI Mobile currently.
Please take a look at the attached screenshot of an app we wrote using Kendo UI Mobile recently. This "dashboard" page uses a html <table> layout with two rows. The first column of the first row and the second row use scroll views. For obvious reasons, the use of a html table is not ideal as it takes away a lot of flexibility. We also had to hard code the dimensions of the table when the device orientation changed.
We would like to re-write this page using flexbox layout (specifying the div pane dimensions in %), so that the various panes are able to resize and "flex" when the device orientation changes. Could you give me some pointers/example code that I can use to accomplish this?
Please take a look at the attached screenshot of an app we wrote using Kendo UI Mobile recently. This "dashboard" page uses a html <table> layout with two rows. The first column of the first row and the second row use scroll views. For obvious reasons, the use of a html table is not ideal as it takes away a lot of flexibility. We also had to hard code the dimensions of the table when the device orientation changed.
We would like to re-write this page using flexbox layout (specifying the div pane dimensions in %), so that the various panes are able to resize and "flex" when the device orientation changes. Could you give me some pointers/example code that I can use to accomplish this?
Kamen Bundev
Telerik team
answered
on
03 Jan 2013
2 answers
351 views
Hi, in our project our server expects time values to be a string in 24-hour format (HH:mm). However we want to use timepickers that display 12-hour format with AM/PM to the end user. Right now I am using
and this works fine in terms of displaying the correct value from the database. However the problem is that the value of the field is saving back out to 12-hour format instead of 24. What can I do to display 12-hour format but save 24-hour?
$('.timePicker').kendoTimePicker({ parseFormats: ["HH:mm"]});and this works fine in terms of displaying the correct value from the database. However the problem is that the value of the field is saving back out to 12-hour format instead of 24. What can I do to display 12-hour format but save 24-hour?
Hugo
Top achievements
Rank 1
Rank 1
answered
on
03 Jan 2013
2 answers
91 views
Hi,
I got a problem with pie chart. IE7 and 8 are not drawing the pie chart with single data. I attached the sample code that I am having problem.
Thank you.
I got a problem with pie chart. IE7 and 8 are not drawing the pie chart with single data. I attached the sample code that I am having problem.
Thank you.
14 answers
3.9K+ views
I am setting up a page using MySQL/PHP on the back end, and using a DataSource + Kendo Grid for display. Having odd issues with date fields I was hoping someone could shed some light on.
I have my transport set up like this:
transport: {
read: {
url: "services/crud/tbl-read.php",
dataType: "JSON"
},
create: {
url: "services/crud/tbl-add.php",
type: "POST"
},
update: {
url: "services/crud/tbl-edit.php",
type: "POST"
} ,
...
and the schema/model setup like this:
datefld : { editable: true, type: "date"},
and I have my Grid column display setup like this (using date format to match):
columns:[
{ field: "tbl_id", title: "ID", width: "50px" },
...
{ field: "datefld", title:"My Date Field", format: "{0:yyyy-MM-dd}" },
I have my transport set up like this:
transport: {
read: {
url: "services/crud/tbl-read.php",
dataType: "JSON"
},
create: {
url: "services/crud/tbl-add.php",
type: "POST"
},
update: {
url: "services/crud/tbl-edit.php",
type: "POST"
} ,
...
and the schema/model setup like this:
datefld : { editable: true, type: "date"},
and I have my Grid column display setup like this (using date format to match):
columns:[
{ field: "tbl_id", title: "ID", width: "50px" },
...
{ field: "datefld", title:"My Date Field", format: "{0:yyyy-MM-dd}" },
...
This retrieves and displays the date field properly. Grid also shows the built in date picker and so forth.
Where I run into trouble is when I ADD or EDIT. On an Add, the request sent to my PHP script DOES NOT include a value pair for "datefld" (!!??!!). I get value pairs for all the other (non-date) fields, not the date field. Similarly on an EDIT, if I edit the date (using the grid's supplied date picker) the PHP request does not include the value pair for the date field. Oddly enough, if I edit the record in the grid BUT only change one of the other (string) fields, I DO GET a value pair for the date field (I am assuming since it was untouched by the edit). As a test, I toggled the schema TYPE clause from "date" to "string" and everything works as it should (data displays, value pairs are included, but I obviously don't get a date picker in the grid).
A further issue with this setup is that built in grid filtering does not work. If I attempt to filter on the date field (with TYPE set to "date") I am unable to get the filter to apply - I get a spinning wait/progress/hourglass deal. Obviously with type set to string I can filter, but not as a date as desired.
My best guess is that Kendu does not like the date format, but I have found limited information in the forums and documentation about date formats (and none relating to MySQL, PHP and CRUD).
Anyone have similar issues? Anyone getting datefields to work properly with MySQL/PHP/CRUD?
This retrieves and displays the date field properly. Grid also shows the built in date picker and so forth.
Where I run into trouble is when I ADD or EDIT. On an Add, the request sent to my PHP script DOES NOT include a value pair for "datefld" (!!??!!). I get value pairs for all the other (non-date) fields, not the date field. Similarly on an EDIT, if I edit the date (using the grid's supplied date picker) the PHP request does not include the value pair for the date field. Oddly enough, if I edit the record in the grid BUT only change one of the other (string) fields, I DO GET a value pair for the date field (I am assuming since it was untouched by the edit). As a test, I toggled the schema TYPE clause from "date" to "string" and everything works as it should (data displays, value pairs are included, but I obviously don't get a date picker in the grid).
A further issue with this setup is that built in grid filtering does not work. If I attempt to filter on the date field (with TYPE set to "date") I am unable to get the filter to apply - I get a spinning wait/progress/hourglass deal. Obviously with type set to string I can filter, but not as a date as desired.
My best guess is that Kendu does not like the date format, but I have found limited information in the forums and documentation about date formats (and none relating to MySQL, PHP and CRUD).
Anyone have similar issues? Anyone getting datefields to work properly with MySQL/PHP/CRUD?
Chanaka
Top achievements
Rank 2
Rank 2
answered
on
03 Jan 2013
6 answers
186 views
When DataViz charts are displayed on an iOS device, tooltips are shown on first touch of a series. The series click event is then fired on second touch.
From what I can work out, it appears that this is achieved by handling the touchEnd event and invoking event.preventDefault() to stop the click event happening, which then allows the tooltip to be shown to the user. Unfortunately, there seems to be a bug in the implementation, as once a tooltip has been displayed, any clicks to any elements on the page (even outside the chartarea) are prevented.
Has anybody found any simple workaround for this issue? I tried handling touchStart and then firing a click event against the target element (i.e. so the browser thinks it's a click event rather than a touch event, thereby bypassing touchEnd), but this causes bugs elsewhere (e.g. 'pseudo' double clicks on dropdowns causing them to open then immediately close). Beyond that, I'm running out of ideas...!
From what I can work out, it appears that this is achieved by handling the touchEnd event and invoking event.preventDefault() to stop the click event happening, which then allows the tooltip to be shown to the user. Unfortunately, there seems to be a bug in the implementation, as once a tooltip has been displayed, any clicks to any elements on the page (even outside the chartarea) are prevented.
Has anybody found any simple workaround for this issue? I tried handling touchStart and then firing a click event against the target element (i.e. so the browser thinks it's a click event rather than a touch event, thereby bypassing touchEnd), but this causes bugs elsewhere (e.g. 'pseudo' double clicks on dropdowns causing them to open then immediately close). Beyond that, I'm running out of ideas...!
Iliana Dyankova
Telerik team
answered
on
03 Jan 2013
2 answers
100 views
Hi,
I am a Kendo User i was trying out the above events and in Firefox those events are firing after doing something on the page like minimizing the Firefox . at times this fires but not always Please give some feed back why this is happening. i also have attached a Fiddler example. Run this on Firefox please.
Fiddler Example
I am a Kendo User i was trying out the above events and in Firefox those events are firing after doing something on the page like minimizing the Firefox . at times this fires but not always Please give some feed back why this is happening. i also have attached a Fiddler example. Run this on Firefox please.
Fiddler Example
8 answers
169 views
Hi
I'm use mvvm model to bind kendo ui widget's value.
and i find if set kendo ui widget's value by mvvm model then widget's _old wasn't change.
so when input the same value again, then wasn't trigger widget's change and so mvvm model's value wasn't change too.
i create a jsfiddle to display this problem.
http://jsfiddle.net/ray521/4v57S/
I'm use mvvm model to bind kendo ui widget's value.
and i find if set kendo ui widget's value by mvvm model then widget's _old wasn't change.
so when input the same value again, then wasn't trigger widget's change and so mvvm model's value wasn't change too.
i create a jsfiddle to display this problem.
http://jsfiddle.net/ray521/4v57S/
Atanas Korchev
Telerik team
answered
on
03 Jan 2013
