Questions on Kendo UI for jQuery Forum

3 answers

172 views

List-view generated from data is not rendering

Hi!

I have a link which is typically a listview (can be a button too etc) that Kendo Mobile can't render its listview-look. I am querying data which contains the listview-link from the mobile's sqlite (synced from a remote CMS)

Here in an example code:

<div data-role="view" id="page-skade" data-title="" data-show="pageShow" data-model="pageViewModel">

<h1 data-bind="text: title"></h1>

<p data-bind="html: content"></p>

<!-- THIS CONTENT IS QUERIED FROM SQLITE: CONTENT CONTAINS CORRECT FORMATED LISTVIEW LINK -->

</div>

Best regards,
James

ListView (Mobile)

answered on 26 Mar 2013

8 answers

458 views

Scatter chart with different point colors

Hi,

I am specifying the series for my remote data source using the following format:

series: [{

xField: "X",

yField: "Y"

}]

Now I want to specify scatter point colors in the series.I want something similar to the following:

series: [{

xField: "X",

yField: "Y",

colorField: "Color"

}]

my Json data would be like:

[{Label:"India",X:120,X:102,Color:"red"},{Label:"China",X:160,X:118,Color:"green"},{Label:"USA",X:1000,X:137,Color:"blue"},{Label:"Russia",X:170,X:125,Color:"yellow"}]

Thanks

Madani

Charts

answered on 26 Mar 2013

3 answers

69 views

BUG: hideColumn broken in 2012.3.1315

If you set up a grid with a column defined as hidden and then use grid.hideColumn( n ) later, the column title is hidden, but not the data cells.

This worked in the previous version 1114

Here is a demo on JSBin: http://jsbin.com/urapoc/1/edit

Grid

answered on 26 Mar 2013

2 answers

179 views

Using WCF RIA with DataSource

I am trying to use WCF RIA with Kendo dataSource.
I am able to Read the Data from Json End Point of WCf RIA, but Sorting, filtering and Paging are not working as expected.
I do see that a call to WCF RIA is made when i click on the Header of the Column, but comes back with original Data, seems like Order by is Ignored.

<body>
<div id="grid2"></div>
<script type="text/javascript">
$(document).ready(function () {
$("#grid2").kendoGrid({
dataSource: { type: "json",
transport: { read: "http://localhost:52878/ClientBin/KendoUI-Web-Services-DomainService1.svc/JSON/GetSecurity_Users" },
schema: {
data: "GetSecurity_UsersResult.RootResults",
model: {
fields: {
First_Name: { type: "string" },
Last_Name: { type: "string" }
}
}
},
pageSize: 10,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
height: 250,
filterable: true,
sortable: true,
pageable: true,
columns: ["First_Name", "Last_Name"]
});
});
</script>
</body>

Data Source

answered on 26 Mar 2013

1 answer

172 views

kendo equivalent of jquery mobile page() for innerHTML

I am trying to migrate a jquery mobile app to kendo mobile.

The app makes extensive use of arbitrary HTML coming in from ajax requests, inserted into the dom using innerHTML, and then when you call $('#somenewcontainer').page(); anything with mobile bindings gets rendered.

For example, injecting the following into the dom using innerHTML:
<div id="somenewcontainer">
<a data-role="button" href="javascript:go();">go</a>
<a data-role="button" href="javascript:go2();">go2</a>
</div>

When i call $('#somenewcontainer').page(), the two buttons get rendered as a mobile buttons.

How, in kendo mobile, do i initialize new dom elements like i can in jquery mobile?

General Discussions

answered on 25 Mar 2013

1 answer

569 views

Input type - Date set value in html

Hi,

I am dynamically adding controls by building the HTML and then inserting it. I need to insert a date input box with a value already selected

strHTML ='<input type="date" id="' + val["ID"] + '" name="Date-' +val["Description"]+ '" datatype="date" att="' + val["ID"] +'" onblur="doneEditing(this)" value ="' + val["value"]+ '"/>';

val["value"] is a valid date string.

What should I do to get this working?

Thank you.

General Discussions

answered on 25 Mar 2013

1 answer

127 views

Combobox dropdown template

I have two questions about styling the Combobox dropdown panel.

First, how would I style the panel with the dropdown values be wider than the text input box?

Second, how can I style the dropdown values to be a table with column headers?

Here's a simple example image I found that illustrates what I'm talking about:

http://i.imgur.com/Uu8Dk2t.png

ComboBox

answered on 25 Mar 2013

1 answer

110 views

Multiple row selection doesn't work well in Safari

If a grid has multiple row selection enabled, you can toggle individual rows on or off using Ctrl-Select. However, on Safari on a Mac Ctrl-Select brings up the browser context menu. It turns out if you click again the selection toggles. This should be changed to follow the Mac paradigm, which I think is Option-Select.

Grid

answered on 25 Mar 2013

2 answers

94 views

List view click stops working when databound more than once

I've got 2 list views on my page...

<div id="contents" data-role="view" data-title="Contents" data-layout="main-layout">

<ul id="primaryMenu"></ul>

<ul id="subMenu"></ul>

</div>

and 3 js functions. The first to load the first menu onDeviceReady, the second to load the 2nd list view on click of the first, and the 3rd to load content on click of the 2nd list view.

function loadMenu()

{

var primaryMenu = new kendo.data.DataSource({

transport: {

read: {

url: "http://dsdmservices.azurewebsites.net/dsdmRest.svc/GetPrimaryMenu",

dataType: "json"

}

});

primaryMenu.read();

$("#primaryMenu").kendoMobileListView({

template : "<strong>#:data.MenuTitle#</strong>",

dataSource: primaryMenu,

click: function(e) {

loadSubMenu(e.dataItem.BookMenuID);

}

});

}

function loadSubMenu(bookMenuID)

{

var subMenu = new kendo.data.DataSource({

transport: {

read: {

url: "http://dsdmservices.azurewebsites.net/dsdmRest.svc/GetSubMenu",

dataType: "json",

data: {BookMenuID : bookMenuID},

}

});

subMenu.read();

$("#subMenu").kendoMobileListView({

template : "<i>#:data.MenuTitle#</i>",

dataSource: subMenu,

click: function(e) {

alert(e.dataItem.ChildCount);

if (e.dataItem.ChildCount == 0)

{

loadContent(e.dataItem.BookMenuID);

app.navigate("#content");

}

});

}

function loadContent(bookMenuID)

{

$.ajax({

url: "http://dsdmservices.azurewebsites.net/dsdmRest.svc/GetContent",

dataType: "json",

data: {

BookMenuID: bookMenuID

},

success: function (data, textStatus, jqXHR) {

$('#selectedContent').html(data.Content);

},

error: function (jqXHR, textStatus, errorThrown) {

alert(jqXHR + ', ' + textStatus + ', ' + errorThrown);

}

});

}

The 1st list view loads OK, and you can click on this as many times as you like and the 2nd list view always loads correctly.

However the click event of the 2nd list view only works the first time it is loaded, then each time it is refreshed by clicking on the 1st list view the 2nd list view click event stops working...

Do I need to put something in place to remove the 2nd list view and recreate it?

ListView (Mobile)

answered on 25 Mar 2013

1 answer

150 views

Can I attach a animation one window minimize?

Hi,

Is there a way I can perform an animation effect when a user clicks the minimize button? I would like the window to scroll up when it minimizes rather than just popping.

Window

answered on 25 Mar 2013