Questions on Kendo UI for jQuery Forum

1 answer

526 views

perform action on kendo window custom button click

Hello,

by using the below code i am trying to open the kendo window on button click this is working fine.
function OpenWindow() {
        var dialog = $("#window-prototype").clone().kendoWindow({
            width: "500px",
            height: "280px",
            modal: false,
            resizable: true,
            actions: ["Custom", "Minimize", "Maximize", "Close"],
            title: "OrderEntry"
        }).show().data("kendoWindow").open().center();

my requirement is i need to perform some action on custom button click on kendo window.So I added event in the javascript function

function OpenOrderEntry() {
            var dialog = $("#window-prototype").kendoWindow({
            width: "500px",
            height: "280px",
            modal: false,
            resizable: true,
            actions: ["Custom", "Minimize", "Maximize", "Close"],
            title: "OrderEntry"
        }).data("kendoWindow").wrapper.find(".k-custom").click(function (e) {
            alert("Custom action button clicked");
            e.preventDefault();
        });
        dialog.data("kendoWindow").open();   <== Error
    }

but it is throwing the below given error "Microsoft JScript runtime error: 'data(...)' is null or not an object".

Regards,
Ravi

Window

answered on 02 Jan 2013

12 answers

427 views

Hyperlinks with data-rel="external" not working on iOS

This example works perfect with chrome http://www.grapto.com/mobile/publication/65 but if you test it with an iOS device the link seems to start loading but it stops without doing anything.

General Discussions

answered on 02 Jan 2013

2 answers

244 views

How to scroll listview to top?

I feel stupid that I have to ask a similar question to my earlier question here, but I hope someone can help. I have wasted valuable family time to get this working. I even had no success making a jsbin example for it (kendo ui seems not to be applied to the style): http://jsbin.com/amijij/2/edit

Edit: I found a jsfiddle with which I can demonstrate what is happening here: http://jsfiddle.net/NuyuV/2/

My app consist of 2 pages (Kendo UI mobile views). The first view shows a listview with categories. When a user clicks an item in the list, a listview on the 2nd page is being populated with items in the selected category and then the 2nd page is shown (through an app.navigate). So far this is working well.

However, when the user has arrived on the 2nd page and follows these steps (follow the steps in this fiddle):
- scroll down
- go back to first page with categories
- click the same category again

Then the listview is populated again, but not showing the first item, but the item that was visible when he left the 2nd page. If don't click the same category, but one with just enough items so that scrolling is not possible then you don't even see the items on the page.

I would be happy to post more information if needed!

Thank you in advance

General Discussions

answered on 02 Jan 2013

1 answer

165 views

Switch cursor to pointer cursor when hovering over the bars in bar chart.

I have a bar chart for which I wish to show the pointer (hand) cursor when hovering over the bars on the chart. When moving off the bars in the chart the cursor should return to the standard arrow pointer. I noticed that the cursor turned into the text cursor when hovering over the axis labels (left, right, and bottom) and on the legend. So in addition to the above I would like the cursor to remain the standard cursor (arrow) when hovering over the axis labels and legend (since you cannot edit these). I would also like the cursor to switch to the pointer cursor when hovering over the x-axis (bottom) labels.

I can easily show a pointer cursor for the entire chart when hovering anywhere over the chart but that is NOT desired.

I have tried various strategies using the seriesHover event but so far nothing has worked.

How do I achieve the above?

Thanks,

Addie

PS -- The reason for showing the pointer cursor for the bars and the x-axis label is to clue the user in that he can click on this area to show and additional "driill-down" chart when the particular bar or x-axis label is clicked. If there is an alternative way to clue the user in then that may be acceptable as well.

Charts

answered on 02 Jan 2013

1 answer

210 views

click: function(e) - Selected ITEM: e.dataItem is NOT defined

Using 'kendoMobileListView' with endlessScroll: true

Only the LAST page of fetched items have their 'dataItem' objects defined.

http://jsfiddle.net/jmucci/LrQau/

Run the fiddle - note console.log of dataItem when taped.
Scroll to fetch next page of items.
Note that the first page of items no longer have their dataItem(s) defined (when tapped) and only the new page of items do (as expected).

ListView (Mobile)

answered on 02 Jan 2013

1 answer

124 views

Sort Formatted Number

Using format string in number to show decimal seprator in a grid column by this :

columns.Bound(p => p.quantity).Format("{0:#,0}")

make numbers unsortable in a right sorting

Grid

answered on 02 Jan 2013

6 answers

164 views

Form issues in Android

I have created an app that utilizes kendo mobile using Icenium. I have a form on one view that is too long to fit on one page. I have run into an issue where when a text field is active (shows a white input box) and the user scrolls the white input box stays still while the rest of the form scrolls. Then when another field is selected the input box is not in the correct place (it should be directly above the field being edited). This makes for a very confusing form entry if the user accidentally or purposely scrolls while a field is selected. Is there a workaround for this?

On attached example html doc form is under the "settings" view on line beginning on line 100. Though I think the issue lies within the "kendo/js/kendo.mobile.min.js" file which I did not include since it is the default min file (unaltered).

Any help would be greatly appreciated.

General Discussions

answered on 02 Jan 2013

1 answer

123 views

displaying different categoryAxis values than the dataSource

I'm displaying a chart that shows values by the day of week. The JSON payload I get back includes 1-7 as the day of week. How can I either use the 1-7 as indexers into an array of the daysOfWeek, or can I use a static list of values?

var daysOfWeekArray = new Array();

daysOfWeekArray[0] = "Mon";

daysOfWeekArray[1] = "Tue";

daysOfWeekArray[2] = "Wed";

daysOfWeekArray[3] = "Thu";

daysOfWeekArray[4] = "Fri";

daysOfWeekArray[5] = "Sat";

daysOfWeekArray[6] = "Sun";

var daysOfWeekJSON = [

{ "DayOfWeek": "Mon" },

{ "DayOfWeek": "Tues" },

{ "DayOfWeek": "Wed" },

{ "DayOfWeek": "Thur" },

{ "DayOfWeek": "Fri" },

{ "DayOfWeek": "Sat" },

{ "DayOfWeek": "Sun" }];

var customersByDayOfWeek =

[

{ "DayOfWeek": 1, "TableType_Id": "Bar ", "Seated": 285 },

{ "DayOfWeek": 1, "TableType_Id": "Lounge ", "Seated": 39 },

{ "DayOfWeek": 1, "TableType_Id": "Dining ", "Seated": 36 },

{ "DayOfWeek": 2, "TableType_Id": "Bar ", "Seated": 195 },

{ "DayOfWeek": 2, "TableType_Id": "Lounge ", "Seated": 32 },

{ "DayOfWeek": 2, "TableType_Id": "Dining ", "Seated": 18 },

{ "DayOfWeek": 3, "TableType_Id": "Bar ", "Seated": 193 },

{ "DayOfWeek": 3, "TableType_Id": "Lounge ", "Seated": 28 },

{ "DayOfWeek": 3, "TableType_Id": "Dining ", "Seated": 21 },

{ "DayOfWeek": 4, "TableType_Id": "Bar ", "Seated": 199 },

{ "DayOfWeek": 4, "TableType_Id": "Lounge ", "Seated": 30 },

{ "DayOfWeek": 4, "TableType_Id": "Dining ", "Seated": 12 },

{ "DayOfWeek": 5, "TableType_Id": "Bar ", "Seated": 195 },

{ "DayOfWeek": 5, "TableType_Id": "Lounge ", "Seated": 29 },

{ "DayOfWeek": 5, "TableType_Id": "Dining ", "Seated": 19 },

{ "DayOfWeek": 6, "TableType_Id": "Bar ", "Seated": 195 },

{ "DayOfWeek": 6, "TableType_Id": "Lounge ", "Seated": 23 },

{ "DayOfWeek": 6, "TableType_Id": "Dining ", "Seated": 24 },

{ "DayOfWeek": 7, "TableType_Id": "Bar ", "Seated": 191 },

{ "DayOfWeek": 7, "TableType_Id": "Lounge ", "Seated": 30 },

{ "DayOfWeek": 7, "TableType_Id": "Dining ", "Seated": 21 }

]

$("#customersByDayOfWeek").kendoChart({

theme: $(document).data("kendoSkin") || "default",

dataSource: {

data: customersByDayOfWeek,

//transport: {

// read: {

// url: reportsAPI,

// dataType: "json"

// }

//},

group: {

field: "TableType_Id"

}

},

title: {

text: "Customers Per Month, By Table Type"

},

legend: {

position: "bottom"

},

seriesDefaults: {

type: "column",

labels: {

visible: true,

format: "{0:n0}"

}

},

series: [{

field: "Seated",

name: "",

colorField: "userColor"

}],

valueAxis: {

labels: {

format: "{0}"

}

},

categoryAxis: {

data: daysOfWeekJSON,

field: "DayOfWeek"

}

});

Charts

answered on 02 Jan 2013

2 answers

231 views

Serious Bug with Mobile Switch with custom labels

Hi,

We ran into a serious issue with the switch, when applying custom labels (a must for international support).

If the on/off labels are changed - after initialization ($("#my...").kendoMobileSwitch({...})

it all works well.

If we change the value in code (either by referencing the checked attribute of the tag or by doing $("#my....").data("kendoMobileSwitch").options.checked = .... the visual display gets crazy, it loses the custom values, and in iOS seems to also lose the blue color for on.

The solution we found was to initialize the tag each time we are trying to set it's value. It works well, but we get a DOM leak, we get junk tags created in the DOM from the previous executions.

Suggestions for a workaround or fixes would be greatly appreciated.

Switch (Mobile)

answered on 02 Jan 2013

3 answers

544 views

Kendo upload not working correctly.

HI ,

I am using kendoUpload() in menual upload method, not auto upload. 1st i select file, it is correctly added after am upload another file, i select only one file but show one file more time in file selection.( i attached copy of this.)

use, autoupload: false,

Upload

answered on 02 Jan 2013