Questions on Kendo UI for jQuery Forum

3 answers

58 views

bug report: Q3 1316: iOS7 appMode bug resulting in 20px white footer when run in cordova

There is a bug in Kendo Mobile where Kendo tries to be smart and work around the Mobile Safari bug where the footer obscures the bottom 20px in certain scenarios, which leads to a white strip appearing when run as a cordova application.

The Kendo workaround is defined in kendo.mobile.js as BROKEN_WEBVIEW_RESIZE ( line 16876 ). This line currently reads
BROKEN_WEBVIEW_RESIZE = OS.appMode && OS.ios,
but it should probably be either
BROKEN_WEBVIEW_RESIZE = ! OS.appMode && OS.ios,
or OS.appMode has a bug that leads it to return the wrong value.

Either way, the bug leads to the 20px "correction" to take place, resulting in a 20px high white strip at the bottom of the app.

This has been tested with cordova 3.3.1-0.1.2 and iOS 7.0.3 (simulator and device).

Thanks,
Max

General Discussions

answered on 21 Jan 2014

2 answers

115 views

Return input from ModalView to caller

I have a kendo view that is bound to a kendo.observable with accept and reject actions. When reject is selected, I pop up a modalview that includes an input which requires comments as why they are rejecting. The modal has two buttons, Reject and Cancel. If the users hits accept, I want to send the input back to the original views viewModel. I also expect all execution to stop when the modal is open, but it continues to run.

Here is a snippet of the viewModel and the modal view.
vm:

var viewModel = kendo.observable({

accept: function () {

// ajax call

},

reject: function () {

utils.showReject(); // modalview

// get response from showReject (i.e., if they hit Reject,

// give me their comments from the input)

// ajax call with comments from above

}

});

utils.showReject();

var showReject = function () {

$("#reject-view").show().data().kendoMobileModalView.open();

}

html:

<div data-role="modalview" id="reject-view" style="display: none; width: 70%;">

<div data-role="header">

<div data-role="navbar">

<span>Are you sure?</span><br />

<textarea rows="3" placeholder="Enter Reject Reason" style="width: 95%; padding: 5px;"></textarea><br />

<a data-click="app.closeModal" data-modalid="#reject-view" data-role="button">Reject</a>

<a data-click="app.closeModal" data-modalid="#reject-view" data-role="button">Cancel</a>

</div>

ModalView

answered on 21 Jan 2014

1 answer

102 views

listview reached end, call to datasource.fetch creates error

I'm so much frustrated using kendo mobile... there's so many issues. I'm not sure whether I'm coding bad,,,,

Here's my another problem....

when listview (binds to remote datasource) reaches end, and user can click the detail button from the list to see more information.
It works fine when listview didn't reach end, but when it reaches end (using 'load more' button) and user clicks the detail button to see more information, I get

Uncaught TypeError: undefined has no properties

(anonymous function)

b.isFunction.i jquery.min.js:3

C.render kendo.mobile.min.js:12

b.isFunction.i jquery.min.js:3

y.extend._renderItems kendo.mobile.min.js:18

y.extend.insertAt kendo.mobile.min.js:18

y.extend.append kendo.mobile.min.js:18

g.Class.extend.init kendo.mobile.min.js:18

$.item kendo.mobile.min.js:18

g.Observable.extend.refresh kendo.mobile.min.js:18

(anonymous function) kendo.mobile.min.js:18

i.extend.trigger kendo.mobile.min.js:12

lt.Observable.extend._change kendo.mobile.min.js:15

(anonymous function) kendo.mobile.min.js:15

i.extend.trigger kendo.mobile.min.js:12

ut.extend._process kendo.mobile.min.js:14

ut.extend.success kendo.mobile.min.js:14

b.isFunction.i jquery.min.js:3

n.success kendo.mobile.min.js:14

c jquery.min.js:3

p.fireWith jquery.min.js:3

k jquery.min.js:5

r jquery.min.js:5

This error is generated when calling DataSource.fetch ...

app.noteDetail = function(e){

var view = e.view,

noteDetailTemplate = kendo.template($("#detailTemplate").text());

app.noteDS.fetch(function(){ //still causing issue to collapse listview

var item = app.noteDS.get(view.params.id);

view.scrollerContent.html(noteDetailTemplate(item));

kendo.bind(view.element, item, kendo.mobile.ui);

});

};

any clue?

General Discussions

answered on 21 Jan 2014

9 answers

836 views

two way binding for selected item in listview

Is there a way to do two way binding for the selected item between a view model and a list view.

Currently I get the selected item by doing like below
but I also want if I change the selected item in the ViewModel for it to change in the view.

data-bind="source: MenuItems,

visible: isVisible,

events: {change: SectionSelect,}"

var AdminPanelViewModel = kendo.observable(

{

// data source

MenuItems: new kendo.data.DataSource(

{

data: [

{ title: "Alerts", URI: "j", className: "k-widget MainMenuItem_Bogus" },

{ title: "Nodes", URI: "j", className: "" },

{ title: "Map", URI: "j", className: "" },

],

}),

SelectedMenuItem: null,

// visible settings

isVisible: true,

selectable: "single",

SectionSelect: function (e) {

this.set("SelectedMenuItem",e.sender.dataSource.view()[e.sender.select().index()])

},

}

);

ListView

answered on 21 Jan 2014

1 answer

130 views

change datasource url and reload the existing listview

for the existing listview (datasource already binded), I want to change the existing datasource's (transport.read.url) and refresh the listview.

I tried to look for any example codes, but couldn't find it. Any advise? or code example might help.

General Discussions

answered on 21 Jan 2014

1 answer

157 views

How to fill area between two series in radar chart

I have two series in a radar chart: one with the minimum values and the other with the maximum values.

I would like to get a radar chart with the area filled between the minium and the maximum values.

Actually the image should look like generating the area for the maximum values and cut away the minium value area...

How could I achieve that?

Thanks for any hint!

Charts

answered on 21 Jan 2014

1 answer

119 views

Change background of .km-drawer-button

I am creating an app in which I dont want to use font glyphs as background images.

Trying to use an image instead was not that easy actually, it will not show up.
what is the preferred way of doing this?

This is what I tried

.km-icon.km-drawer-button.km-notext

background: url("img/menu_button.png");

width: 19px;

height: 16px;

display: block;

}

General Discussions

answered on 21 Jan 2014

7 answers

608 views

Tooltip with passing object to Controller action

Hi All

How to pass object to controller action through LoadContentFrom method or is there any alternative option to pass object to controller action.

Right now I am able to pass the string value to controller action but I want to pass the @model.ClientInfo object to action from controller.

So please help me how do I achieve this scenario. Here is my all code.

@model ViewModel

<div class="f-group">

<div>
<ul id="Section">
<li><a class="Tooltip" href="#" data-id="Client1">@Model.Client1.Name</a></li>
<li><a class="Tooltip" href="#" data-id="Client2">@Model.Client2.Name</a></li>
<li><a class="Tooltip" href="#" data-id="Client4">@Model.Client3.Name</a></li>
<li><a class="Tooltip" href="#" data-id="Client4">@Model.Client4.Name</a></li>
</ul>
</div>

@(
Html.Tooltip()
.For("#Section")
.Filter("a")
.LoadContentFrom("LoadPopup", "Client")
.Position(TooltipPosition.Bottom)
.Width(250)
.Events(events => events.RequestStart("requestStart").Show("showTooltip"))
)

function requestStart(e) {
e.options.data = {
baseModel: e.target.data("id")
};
}

function showTooltip() {
this.refresh();
}
</div>

public ActionResult LoadPopup(ClientInfo baseModel)
{
return this.PartialView("_ClientPopup", baseModel);
}

ToolTip

answered on 21 Jan 2014

3 answers

186 views

Cascading combo boxes and timed out authentication

Can anyone advise on the recommended approach to cascading combo boxes when the user could be "timed out" from their session when they select from the first list.

Basically, the first list is populated by being bound to the mvc model on page load. However, the second is defined to pull data from the server via a json Response.

The issue is that if, between loading the first page and the user selecting something from that list, the user is timed out of their session the list doesn't get populated, not error is display, and the list is populated with a lot of "undefined" values.

So, my question is, what's the best practice for handling this situation with kendo mvc?

here's the code for the view..

<div class="row">

<div class="leftbox">

@Html.LabelFor(m => m.OrganisationId)

</div>

<div class="rightbox">

@(Html.Kendo().ComboBoxFor(m => m.OrganisationId)

.BindTo(Model.OrganisationList)

.Placeholder("Select Organisation")

.Suggest(true)

.Filter(FilterType.Contains)

.HtmlAttributes(new { @class = "kendoDropdown wideDropdown", selectWidth = "400" }))

</div>

<div class="row">

<div class="leftbox">

@Html.LabelFor(m => m.UserId)

</div>

<div class="rightbox">

@(Html.Kendo().ComboBoxFor(m => m.UserId)

.Placeholder("Select User")

.DataSource(source => source.Read(read => read.Action("GetUsers", "Auth").Data("getOrganisationId")).ServerFiltering(true))

.DataTextField("value")

.DataValueField("id")

.HtmlAttributes(new { @class = "kendoDropdown wideDropdown"})

.Enable(false)

.AutoBind(false)

.CascadeFrom("OrganisationId")

.Events(e => e.Change("enableButton") )

</div>

ComboBox

answered on 21 Jan 2014

1 answer

366 views

using 'template' property with grid with typescript

Using the official Kendo UI typescript definitions, trying to use the "grid" in the following manner refuses to compile; The error points to the toolbar property. This code works fine in normal javascript, and has never given me any trouble until I tried to use TypeScript.

this.elements.grid = $('#grid').kendoGrid({

dataSource: {

transport: {

read: {

url: "/administrator/data/items",

dataType: "json",

type: 'GET',

cache: false

}

},

schema: {

total: "total",