Questions on Kendo UI for jQuery Forum

2 answers

295 views

I'm just getting around to trying out Kendo UI Web for the first time, and I've run into an error that I didn't expect, and can't see why it's coming up... I created a Kendo UI/MVC 4 project, added a couple Views to the Home controller and on the List View I added a Kendo Grid. When I run the page I get this error in the debugger:

Microsoft JScript runtime error: '$document' is undefined

What? Crazy, right? I have jquery.min.js correctly referenced in my _Layout.cshtml file, and confirmed it's loaded when the site runs. So where is this error coming from and how do I fix it? I am binding the grid to my model, which is an IEnumerable, and if I bind it to a table in the SAME VIEW, it works beautifully. So the data is good.

Here's the code I'm using in the View:

<div id="container">

<div id="grid"></div>

<script>

$document.ready(function() {

$("#grid").kendoGrid({

id: "gridList",

dataSource: model,

schema: {

model: {

fields: {

IncidentType: { type: "string" },

Location: { type: "string" },

WatchDateTime: { type: "date" },

PostDateTime: { type: "date" }

}

},

pageSize: 10

},

height: 600,

scrollable: true,

sortable: true,

pageable: { input: true, numeric: false },

columns: [

{

field: "IncidentType",

title: "Incident Type",

width: 300

},

{

field: "Location",

title: "Location",

width: 100

},

{

field: "WatchDateTime",

title: "Incident Date",

width: 100

},

{

field: "PostDateTime",

title: "Post Date",

width: 100

}

]

});

</script>

</div>

Any ideas? I'd love to get started using Kendo, if I can get past this initial issue...

Thanks!

General Discussions

answered on 03 Jan 2013

1 answer

334 views

Renderpartial inside the kendo window

Hello,

I'm new to the Kendo UI stuff, so please forgive me if this is an easy one;

I want to load the partial view inside the Kendo window, how i can do that? I tried as shown in below but it is showing the blank window. could any one please help me.

@(Html.Kendo().Window()
   .Name("windowEditPopup")
   .Title("Edit pricing")
   .Content(@<text>
   <div>
   @{
   Html.RenderPartial("EditPricingControl", Model);
   }
   </div>
   </text>)
   .Draggable()
   .Animation(true)
   .Resizable()
   .Modal(true)
   .Width(800)
   .Height(450)
   )
Regards,
Ravi.

Window

answered on 03 Jan 2013

8 answers

1.0K+ views

[Solved] Chart tooltip onserieshover...

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


It works perfectly, just as a separate chart.

Charts

answered on 03 Jan 2013

1 answer

2.7K+ views

[Solved] Adding a % sign to a percentage in a NumericTextBox

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).

NumericTextBox

answered on 03 Jan 2013

3 answers

81 views

[Solved] pane.max / pane.min do not work when percentages are used

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?

Splitter

answered on 03 Jan 2013

7 answers

634 views

Flexbox support in Kendo UI Mobile.

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?

General Discussions

answered on 03 Jan 2013

2 answers

421 views

Timepicker: Save in different format than parseFormat?

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

$('.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?

DatePicker

answered on 03 Jan 2013

2 answers

105 views

IE7 and 8 Pie Chart Problem

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.

Charts

answered on 03 Jan 2013

14 answers

4.2K+ views

[Solved] Datasource Date Format Help

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}" },

...

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?

Data Source

answered on 03 Jan 2013

6 answers

228 views

iPad: Button / element clicks ignored after series hover event

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...!

Charts

answered on 03 Jan 2013