Questions on Kendo UI for jQuery Forum

2 answers

651 views

hi there,

i am evaluating the use of kendo mobile in my company and come across an issue i cannot resolve on my own. i use the latest minified version of the library from yesterday.

i have a view with a form that is bound to a viewmodel. on button click a function in the viewmodel is called which calls app.navigate to get to a listview with search results that are loaded as json array from a server based on the options entered in the form.

the single parts work for me so far. i can pull the server response, parse the json and can edit the viewmodel with the form. when the user clicks the button to send the search, the listview will be initialized (via data-init) and the datasource will be updated with the correct search options from the viewmodel.

but then the initializer is called a second time and only got the initial values from the viewmodel. i nailed it down to document.ready was called a second time and therefore the application state was lost. but i cannot figure out what is causing this.

<!DOCTYPE html>

<html>

<head>

<title></title>

<link href="styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />

<link href="inwx.css" rel="stylesheet" type="text/css" />

<script src="js/jquery.min.js" type="text/javascript"></script>

<script src="js/kendo.mobile.min.js" type="text/javascript"></script>

</head>

<body>

<div id="menu" data-role="view" data-title="Start">

<div class="head"> </div>

<ul data-role="listview" data-style="inset" data-type="group" id="listview-menu">

<li>I want to:

<ul>

<li data-icon="play"><a href="#searchform">search domains</a></li>

</ul>

</li>

</ul>

</div>

<div data-role="view" data-title="Destinations" id="domainlist" data-init="initListView">

<ul data-role="listview" data-style="inset" data-type="group" id="listview-domains">

</ul>

</div>

<div id="searchform" data-role="view" data-title="Domain Search" data-init="initForm">

<form>

<ul data-role="listview" data-style="inset">

<li>

<select id="region-value" data-bind="source: regions, value: region"></select>

search region

</li>

<li>

<input id="domain-value" type="text" data-bind="value: domain" />

domain

</li>

</ul>

<button data-bind="click: startSearch">search</button>

</form>

</div>

<script type="text/x-kendo-template" id="domainlistItemTemplate">

<li data-icon=

# if (status == 'used') { #

"globe"

#} else {#

"toprated"

#}#>

#: domain #

</li>

</script>

<script>

var template = kendo.template($("#domainlistItemTemplate").html());

</script>

<script src="domainlist.js" type="text/javascript"></script>

</body>

</html>

var initForm;

var initListView;

$(document).ready(function(){

alert("ready");

var app = new kendo.mobile.Application(document.body);

var domainsearchModel = new kendo.data.ObservableObject({

domain: "sebastian",

region: "EUROPE",

regions: ["EUROPE", "ASIA", "AMERICAS", "AFRICA", "ALL"],

startSearch: function() {

app.navigate("#domainlist");

}

});

var domainlistSource = new kendo.data.DataSource({

transport: {

read: {

url: "https://sandbox.inwx.de/en/domain/checkajax",

type: "POST",

dataType: "json",

data: {

d: function() {

return domainsearchModel.get("domain");

},

r: function() {

return domainsearchModel.get("region")

}

},

schema: {

data: function(data) {

return data.items;

},

type: "json"

},

group: {

field: "country"

},

filter: [{

field: "status",

operator: "neq",

value: "error"

}, {

field: "status",

operator: "neq",

value: "timeout"

}, {

field: "status",

operator: "neq",

value: "yours"

}, {

field: "status",

operator: "neq",

value: "unsupported"

}],

pagesize: 20

});

$("#listview-domains").kendoMobileListView({

style: "inset",

template: "#: domain #",

// template: template,

dataSource: domainlistSource

});

initForm = function () {

var body = $(".km-vertical,.km-horizontal");

kendo.bind($("#searchform"), domainsearchModel);

};

initListView = function () {

};

});

General Discussions

answered on 23 Jul 2012

1 answer

168 views

Editable grid cancel not working

Hi,

I have created a Kendo grid, which is editable(inline). For the unique id(which we specify in "model" of grid definition), i have given a column name which has numbers(unique). Now, when the user adds a new row, this particular column has " " value. So, i myself add new values. Whenever some update or delete operations are performed, i need to perform some additional functionalities. So, i use this unique column values to retrieve the old/new row. Now, when i add a row, and update it, it works fine. But, then for the newly added row, if i click on "edit" and then click on "cancel", nothing happens. When i tried searching in source code, i could find that kendo generates some unique id internally, on adding new rows. But, when i click on cancel, the id that was generated by kendo is different. And it does not get the model itself. It is undefined. Can anyone suggest what should be done?

_modelForContainer: function(container) {
            var id = (container.is("tr") ? container : container.closest("tr")).attr(kendo.attr("uid"));
            return this.dataSource.getByUid(id);
        },

In this piece of code(from kendo.grid.js), this.dataSource.getByUid(id) becomes undefined on click of cancel.

Regards,
Khushali

Grid

answered on 23 Jul 2012

8 answers

952 views

Terrible flicker when loading page

Hi,

I've got a simple mobile website with 3 separate pages. When each page renders on the iphone, it renders the page without styling and quickly flickers to the correctly rendered view. So for a grid, I see an ugly bullet list for a split second before it flickers to the nice looking grid. This happens on all my pages.

How do I avoid this?

Kind regards

Nick

General Discussions

answered on 23 Jul 2012

0 answers

52 views

How Grid Add Value in Client Side first, and submit value when I click submit

Ok, I have a form, and I have telerik RadGrid to lets user to add their information, all the information they add I want to put in session memory only. It mean if after they add the value if they click "Cancel" all information will gone. If they click " Submit Form" then all the value in the RadGrid will insert to database. How to do this? can someone show me tutorial?

Grid

asked on 23 Jul 2012

0 answers

51 views

Prevent the Listview Load Icon displaying when using Listview MVC Wrapper

I am using MVC4 with the latest Kendo UI Q2. I am trying to use the mvc wrappers to implement a list view.

How can I stop the load icon displaying on the list view when using the MVC wrappers? when not using wrappers the following code in the datasource transport worked for me but how do I achieve the equivilent with wrappers?

parameterMap: function (options) {

kendo.ui.progress($("#rolesListView"), false);

return options;

}

ListView

asked on 23 Jul 2012

0 answers

59 views

Accessing the Ajax Complete event when using the MVC Listview wrapper

I am using MVC4 with the latest Kendo UI Q2. I am trying to use the mvc wrappers to implement a list view with a view template and an edit template.

How can I access the Ajax complete event when using the MVC wrappers?

@(Html.Kendo().ListView<iProjX.Models.RoleModel>(Model.Roles)

.Name("rolesListView")

.TagName("div")

.ClientTemplateId("rolesList")

.Editable()

.Pageable()

.DataSource(dataSource => dataSource

.Model(model =>

{

model.Id("RoleId");

model.Field(f => f.ProjectId).DefaultValue(Model.ProjectId);

model.Field(f => f.Title);

model.Field(f => f.Description);;

})

.Events(e => e

.Error("rolesListViewData_error")

.Change("rolesListViewData_change")

.RequestStart("rolesListViewData_requestStart"))

.Create(create => create.Action("createRole", "Project"))

.Read(read => read.Action("getRoles", "Project", new { projectId = Model.ProjectId }))

.Update(update => update.Action("updateRole", "Project"))

.PageSize(30)

)

.Events(e => e

.Change("rolesListView_change")

.Edit("rolesListView_edit")

.DataBound("rolesListView_databound"))

)

ListView

asked on 23 Jul 2012

1 answer

290 views

Build Your Custom Download, unable to select script for download

All I can see on the "Build Your Custom Download" page is a dropdown with "Available versions", but no button/action to proceed any further (same on all browsers).

Is it not possible to download a custom library for Kendoui Mobile?

Thanks.

General Discussions

answered on 23 Jul 2012

2 answers

293 views

KendoUI vs Telerik from User Experience standpoint

Our company has to decide between the use of KendoUI and the use of Telerik.

I understand Telerik Rad Controls are serverside and comes with databinding features that can be used in ASP.NET Code behind.

I am specifically interested in knowing which one is better from the Client-Side standpoint.

Any input in this will be appreciated.

General Discussions

answered on 23 Jul 2012

5 answers

280 views

Inputs not working on Android?

I am really enjoying the KendoUI Mobile set, but I can't seem to get text or numeric inputs working on Android! I am running the "Forms" demo example code from the KendoUI Demos page. I am running inside of Phonegap.

When I focus an input field, the keyboard comes up. When I type into the keyboard (virtual or physical), nothing gets entered into the field.

Any idea what is going on? I've tried on the emulator (4.1) and real hardware (2.2.3) both without any luck. I am using KendoUI Beta v2012.2.621.

Thanks,
Brian

General Discussions

answered on 23 Jul 2012

1 answer

84 views

Checking for modifier keys

Is there any way to check if a modifier key is being pressed when an item is dropped on the drop target? I'd like to implement two different drag n drop behaviours and a modifier key is probably the easiest way to do it (although I could probably add a radio to specify the drag n drop mode if modifier keys aren't doable).

Cheers,
Jimmy

Drag and Drop

answered on 23 Jul 2012