Questions on Kendo UI for jQuery Forum

1 answer

98 views

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

223 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

96 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

90 views

integration with other technologies

Is there integration with other technologies?

General Discussions

asked on 27 Jul 2012

0 answers

168 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

143 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

219 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

1 answer

870 views

Nullable boolean fields are always converted to true or false

Hi there,

I'm using a datasource with a grid an I need to be able to handle null values in boolean fields differently from false. However, when the DataSource gets its data and runs through convertRecords() it converts all the boolean fields to true or false even if I've marked the field as nullable:true. Is there a way to get around this and actually show nulls for boolean fields?

Here's a JS fildde with a nullable boolean being converted to false: http://jsfiddle.net/mtrichards26/wCd4T/21/

Thanks!
Matt

Data Source

answered on 27 Jul 2012

1 answer

348 views

Textfield not focusing properly

Hi,
I have an application with a text field that needs to be programmatically focused when its view is shown. This in turn brings up the virtual keyboard on mobile devices (as is expected whenever a text field is ever brought into focus).

This feature worked perfectly before the latest Kendo UI upgrade. Once upgraded, android no longer brings the keyboard into view. iOS does not even focus the text field.

I have created a test application to demonstrate the mechanism:

<!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>Text Field Autofocus</title>

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

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

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

</head>

<body>

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

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

Page 1

</div>

<br />

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

<br />

<a class="km-button" href="#two">Go To Page 2</a>

</div>

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

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

<a class="km-button km-back" onclick="javascript:history.go(-1)" data-align="left">Back</a>

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

</div>

<br />

<span>The text field should be programatically focused on the view's show event.</span><br />

<br />

<button onclick="focusTextbox()">Manually Focus</button> 

</div>

</body>

<script type="text/javascript">

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

function focusTextbox() {

$("#input").focus();

}

</script>

</html>

When calling the same function from a button, it works as expected. It seems that calling the event through the view's show event somehow suppresses default behaviours.

To further explore this issue, I wrapped the focus() call in a setTimout function. Seeing as the call from the button happens at a much later time then when the view's show event is fired, it may behave differently.

setTimeout(function () {

$("#input").focus();

}, 500);

Unfortunately, this is also unable to focus the text field from the view's show event. In fact, doing this also makes the button's call no longer work. After doing some research, I found that Mobile Safari has a feature that limits multi-threading functionality (such as those created by setTimeout) for usability/secuirty reasons. Perhaps there is a threading issue with the view show event.

Hope this helps. Any help with a fix is greatly appreciated.

Thanks,
John

Application

answered on 27 Jul 2012