Questions on Kendo UI for jQuery Forum

6 answers

224 views

[Solved] Scrolling through a list of inputs checks the input

I know this is an issue on an app for android, (I am not sure about iOS). I have a view with a large number of checkboxes for the user to select multiple items. However if you attempt to scroll the view down and you touch a checkbox and scroll, that checkbox value will toggle, is there a way to prevent this?

To reproduce this you can make an view with the following ...

<ul data-role="listview" data-type="group">

<li>

Heading 1

<ul>

<li><label><input type="checkbox" checked="checked" />Lettuce</label></li>

<li><label><input type="checkbox" checked="checked" />Carrots</label></li>

<li><label><input type="checkbox" checked="checked" />Peas</label></li>

<li><label><input type="checkbox" checked="checked" />Bread</label></li

>

    <!-- repeat until you have enough to fill the whole screen -->

</ul>

</li>

</ul>

If you try to scroll anywhere except for header you will inadvertently select a checkbox, is there a way to work around this?

ListView (Mobile)

answered on 01 Apr 2013

3 answers

235 views

How to make tabstrip remember current view?

I have a tabstrip with two buttons -- call them A and B. The content of tab A lets the user click on a button and go to another view, and a back button appears.

If the user then clicks on tab B, and then on tab A, the content of tab A should still show the second view with the back button (this is how native tabstrips work). But that isn't happening -- the view gets changed to the initial view of tab A, forcing the user to re-navigate to where they were before.

How do i make it work so that the view in each tab is preserved when a user clicks a different tab button and then back again?

TabStrip (Mobile)

answered on 01 Apr 2013

2 answers

147 views

Responsive Components

Hello,

I've been reading the documentation of KendoUI mobile but there are things I couldn't find anywhere.

In this particular case I'm trying to find out how we're supposed to make a UI flexible for different screens. Take the ScrollView demo for example (http://demos.kendoui.com/mobile/scrollview/index.html#/), the height of the photos is fixed, and if you change that and use "100%" instead, it collapse and no photo is shown (at least using icenium's simulators).

What am I missing? How do you tune the UI so it works for different devices with different screens? I'm particular interested in tablets (both orientations) but I also wants to support phones (yeah, I think I can target them using custom styles for each device but I suppose it's not the idea)..

Thanks,
Matt

ScrollView (Mobile)

answered on 01 Apr 2013

3 answers

794 views

tooltip content loaded dynamically

To a listview with pictures, I attach a tooltip to every picutre and want to ajax load the tool tip content.

ToolTip:

var tooltip = $("#lvPictures").kendoTooltip({

filter: "img.imgInfo",

width: 120,

position: "top",

autoHide: false,

content: function (e) {

var target = e.target;

var fileId = target.data('identity');

return helpers.GetPictureToopTip(fileId);

}

}).data("kendoTooltip");

The helper function:

var helpers =

{

GetPictureToopTip: function (fileId) {

helpers.GetFile(fileId).done(function (json) {

var jsonObj = JSON.parse(json.d);

var html = '';

html += '<div>Picture info</div>'

html += '<div>' + jsonObj.FileName + '</div>'

return html;

});

}

Ajax call is fired just fine and returns data, however, the tool tip is show without content.

What am I doing wrong?

ToolTip

answered on 01 Apr 2013

3 answers

227 views

Combobox template on custom grid editor

I have some issue related to the template for combobox.

My combobox has template defined:
<script id="Items_template" type="text/x-kendo-template">
${data.NameLang}(${data.Code})
</script>

This is the definition of combobox:
@(Html.Kendo().ComboBox()
.Name("Item_Description")
.DataTextField("NameLang")
.DataValueField("NameLang")
.Filter(FilterType.Contains)
.DataSource(action => action.Read(read => read.Action("GetItemsForPAByName", "StockCount")))
.Value(Model.Item_Description)
.HtmlAttributes(new {style="width:240px"})
.TemplateId("Items_template")
)
As a result on the list I get undefined(undefined).
Same definition and template not located on the custom grid editor is working fine.

Is this some issue with combobox styling ?
Is there any workaround ?

Grid

answered on 01 Apr 2013

1 answer

188 views

Hyperlink mailto/tel upgrade

I would like to suggest a simple upgrade to "Insert hyperlink". It would be great if you would split out the prefix from the address and have a selector that allows the user to choose website, email, or phone.

Selector: Website/Email/Phone
Address:sales@kendoui.com
Text: Kendo UI
Tooltip: Click Here
Open Link in new window: Yes

Results:
<a href="http://www.kendoui.com">Kendo UI</a>
<a href="mailto:sales@kendoui.com">Kendo UI</a>
<a href="tel:8883652779">Kendo UI</a>

Editor

answered on 01 Apr 2013

13 answers

656 views

Binding of Data from Data table(asp.net data control) with grid

I am trying to bind data from asp.net data control(data table) to Kendo UI Grid.
but i don't know how to bind data in grid using datasource
& what should i give input parameter to datasource method of Kendo UI Grid.

Does we have any other way to bind data other than JSON ?

Please explain me with example.

Data Source

answered on 01 Apr 2013

1 answer

536 views

[Solved] KendoUI onRowDataBound replacement?

Hi,

I'm migrating a project from ASP.NET MVC Extensions to KendoUI. I'm trying to figure out the best way to re-create this grid binding using KendoUI and without any serverside code. I can't find anything to do with onRowDataBound or similar in the documentation.

As you can see, as each row is databound, it attaches the countdown jquery plugin (http://keith-wood.name/countdown.html) and uses the current dataItem's Due datetime value.

Is the only way to do this using javascript inside the <script id="rowTemplate" type="text/x-kendo-tmpl"> element?

How can I recreate this to work with KendoUI?

function onRowDataBound(e) {

e.row.cells[2].innerHTML = "<span class='countdown-" + e.dataItem.SONumber + "'></span>"

if (e.dataItem.Due != null && e.dataItem.Due < new Date(2015, 4, 1) && e.dataItem.Due > new Date(2011, 4, 1)) {

$('.countdown-' + e.dataItem.SONumber).countdown({

until: new Date(Date.parse(e.dataItem.Due)), compact: true,

layout: '<strong>{dn} {dl} {hnn}{sep}{mnn}{sep}{snn}</strong>',

});

}

This is sample output for one row once it has been rendered:

<tr style="background: none repeat scroll 0% 0% rgb(255, 134, 112);">

<td>43475</td>

<td>New</td>

<td>

<span class="countdown-43475 hasCountdown">

<strong>0 d 00:00:00</strong>

</span>

</td>

<td>Account</td>

<td>Description</td>

<td>Cons</td>

<td class="t-last">P3 - 24H</td>

</tr>

Thanks

Grid

answered on 01 Apr 2013

2 answers

153 views

[Solved] ModalView Re-Center on Orientation Change

When I have a ModalView open and change the orientation of my iPad, the ModalView is no longer centered. How do I get it to re-center? I assume I need to bind on the orientationchange event, but I don't know what code I can use to re-center.

$(window).bind('orientationchange', reCenter);

function reCenter() {
// unknown recenter code??
}

Thank you,
Jason

ModalView

answered on 30 Mar 2013

3 answers

192 views

Mouse wheel scrolling in desktop browser

For a specific reason I'd like to use my kendo mobile app also through desktop browser (webkit). Is there a way to enable mouse wheel scrolling of my views?

General Discussions

answered on 30 Mar 2013