Questions on Kendo UI for jQuery Forum

1 answer

115 views

Web Page Grid Not Populating From SQL Server DB

I've tried some of the examples with no success. Here is my code for "manageDonor.cshmtl" and output.
Code files are attached.
Using Chrome. a very nice grid appears on the page, but it has only a single empty line saying "No items to display" Chrome not showing any script errors.
Thanks

@{

var dbRenewal = Database.Open("RenewalDataConnection");

var sql = "SELECT donorID, title, firstname, middlename, lastname, address, city, state ,zipcode, homephone, workphone, cellphone, email FROM donor";

var data = dbRenewal.Query(sql);

var json = Json.Encode(data);

Response.Write(json);

}     




[{"donorID":152,"title":"title","firstname":"firstname","middlename":"Middlename","lastname":"lastname","address":"100 Main Street","city":"Los Angeles","state":"CA","zipcode":"90067","homephone":"3105528809","workphone":"3105528809","cellphone":"3105528809","email":null},{"donorID":157,"title":"Rabbi","firstname":"Yehuda","middlename":"Lein","lastname":"Smith","address":"100 Main Street","city":"Los Angeles","state":"CA","zipcode":"91678","homephone":"3105528809","workphone":"3105528809","cellphone":"3105528809","email":null}]

Grid

answered on 03 Jan 2013

3 answers

279 views

Progress bar is not visible in IE and Firefox

Hi,

I am using Kendo UI file upload control in async mode and AutoUpload set to false.

When i click the upload button, the progress bar for each of these files is not shown in IE and Fire fox.

I observed this issue in IE 9 and Firefox (13.0.1). in Chrome it is working fine. I have verified in the DOM by debugging. There is no span element for the progress bar in the tree.

What is the issue here ?

Upload

answered on 03 Jan 2013

1 answer

546 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

438 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

256 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

171 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

221 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

130 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

173 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

127 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