Questions on Kendo UI for jQuery Forum

5 answers

315 views

Back button fires double-click on touch devices. Possible Bug?

Hi,
I have found that if you navigate to a view, and use the back button on the second view to jump back to the first, if you are using a touch device and hold the back button too long, it will trigger a double-click event and activate any controls on the original page that are in the same spot as the back button.

I have constructed an isolated application that can reproduce this erroneous behavior using kendo v2012.2.710.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

<title>Kendo Link Double Clicking</title>

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

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

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

</head>

<body>

<div id="one" data-role="view">

<div class="km-navbar" data-role="navbar">

<input id="searchInput" type="search" data-align="left" placeholder="Search Box"/>

Page 1

</div>

<br />

<span>Click the button to be taken to the 2nd page</span>

<br />

<a data-role="button" href="#two">Go To Page 2</a>

</div>

<div id="two" data-role="view">

<div class="km-navbar" data-role="navbar">

<a data-role="backbutton" class="km-button km-back" href="#:back" data-align="left">Back</a>

Page 2

</div>

<br />

<span>Possible Bug: On a touch device, holding the back button for too long will trigger a double click.</span><br />

<span>If there is an textbox in the same place on the new page as the button pressed, it will be set into focus.</span><br />

<span>If there is a soft keyboard, it will also activate.</span><br /><br />

</div>

</body>

<script type="text/javascript">

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

</script>

</html>

Any help with a fix is greatly appreciated.

Thanks
John

Button (Mobile)

answered on 27 Jul 2012

2 answers

679 views

[Solved] How to reload tabstrip when datasource changes?

I'm trying to filter a tabstrip using the selection of a local datasource. How do you completely reload the tabstrip, adjusting for the new filtered datasource?

Attached is a fiddle with an example... obviously I didn't wire up the reload event because I didn't know where to go with it.

http://jsfiddle.net/clechner/pnRnA/

TabStrip

answered on 27 Jul 2012

1 answer

99 views

Styling, Stretching, and DataBinding

I tried to CSS style the slider with a percentage width of it's container (100%), this made the slider go for three lines (since the top level window is very large).

I am actually using this as a progress meter, So I suppose I should disable it, but the faded look is not what I am looking for. All I want to do is remove the thumb of the slider, not a big issue, but it might be something to consider.

Also, since it is a progress meter, data-binding would be nice.

Slider

answered on 27 Jul 2012

0 answers

227 views

Refresh a view of a tabstrip

Hi,

i put a form inside a view... in a tabstrip, now i want to try to change the view content (with a listview).... i tryed this but it don't work, the refresh with jquery fully break kendo ui!:

<div id="figa" data-role="view" data-title="Form Elements" data-init="initForm" data-layout="mobile-tabstrip">
<form action="/newOrdine/" method="post">
<ul data-role="listview" data-style="inset">
<li>
<select>
<option value="First Option">First Option</option>
<option value="Second Option">Second Option</option>
<option value="Third Option">Third Option</option>
<option value="Fourth Option">Fourth Option</option>
</select>
Select element
</li>
</ul>
</form>
<a class="button" data-role="button" type="submit">Home</a>
<a class="button" data-role="button" onclick="javascript:submitForm();">Facility</a>
<a class="button" data-role="button" href="#sports" style="background-color: #f60">Sports</a>
</div>

<script>
function submitForm() {
alert('a');
//$("#container").empty().html('<img src="/static/indicator.gif"/>');
var nome = 'pippo';
$('#figa').load('/newOrdine/', {'nome':nome});
}
</script>

TabStrip (Mobile)

asked on 27 Jul 2012

0 answers

97 views

Event for sorting

Hi,

I know that the dataBound event is fired when sorting occurs. This event is generic however, and I cannot tell whether it is being fired as a consequence of sorting.

Is there a way to handle only the sorting event?

Thanks

Grid

asked on 27 Jul 2012

0 answers

93 views

integration with other technologies

Is there integration with other technologies?

General Discussions

asked on 27 Jul 2012

0 answers

174 views

Server Paging

I'm trying to set up server paging for remote data that I'm accessing via an ajax call. My dataSource looks like this:

var data = new kendo.data.DataSource({

transport: {

read: function(options) {

$.ajax( {

url: "http://localhost/Projects/rpc",

contentType: "application/json",

dataType: "json",

data: JSON.stringify({"method": "breq.getBreqs"}),

type: 'POST',

success: function (result) {

//alert("success");

options.success(result)

},

error: function (jqXHR, textStatus, errorThrown) {

alert("Error: " + textStatus);

options.error(jqXHR, textStatus, errorThrown)

},

});

}

},

serverPaging: true,

pageSize: 10,

schema: {

data: "result"

},

});

I understand that the server has to handle the paging itself however when I look at the AJAX request through chrome developer tools all I can see in the request payload is "{"method": "breq.getBreqs"}". Is the positioning of my paging settings correct and what is sent in the request to represent it so that I can pick it up on my server?

Grid

asked on 27 Jul 2012

1 answer

7.6K+ views

[Solved] Grid Select By Id

Hi all!
I created this helper function to select rows by id, it works well in FF and Chrome, but not in IE.

function gridSelectById(gridName, id) {
    var grid = $("#" + gridName);
    var data=grid.data("kendoGrid");
    var row = data.tbody.find(">tr:not(.k-grouping-row)").filter(function (i) {
      return (this.dataset.id == id);
    });
    data.select(row);
}

Seems like "dataset" is not defined on the row for IE9. Is this a known issue? Is there a better way of achieving the same result that I'm missing?

Cheers,
Andrés

Grid

answered on 27 Jul 2012

1 answer

150 views

Missing "}" kendo.common.min.css

Missing closing } in kendo.common.min.css
at
.k-floatwrap,.k-slider-items,.k-grid-toolbar{ display:inline-block;

General Discussions

answered on 27 Jul 2012

1 answer

225 views

[Solved] ComboBox Autocomplete with Webservice

I am in the process of switching a Telerik MVC ComboBox with the Kendo equivalent.

How to I accomplish the below code in KENDO?

@(Html.Telerik()
.ComboBox()
.HtmlAttributes(new { style = "width: 300px" })
.Name("cbCountry")
.AutoFill(true)
.DataBinding(dataBinding => dataBinding.WebService().Select("~/Code/WCF/LoadOnDemand.svc/LoadCountry"))
.Filterable(filtering =>
{
filtering.FilterMode(AutoCompleteFilterMode.StartsWith);
})
.HighlightFirstMatch(true)
)

ComboBox

answered on 27 Jul 2012