Questions on Kendo UI for jQuery Forum

2 answers

1.3K+ views

reload data and update listview on select change

On a page I have a listview and a pager that both get populated just fine with data from a kendo.data.DataSource. The kendo.data.DataSource calls a asmx webservice with a couple of parameters (_date and _dateSource). The _date and _dateSource parameters get values from a datepicker and a select box.

I can't figure out how to reload the listview and pager when either the datepicker or the select box value changes. I have tried to read the datasource in the onChange event of the datepicker but the values in the data param holds the original values.

Question: how do I reload the datasource (with the changed input parameters) and update both the listview and the pager?

// date picker
$("#dpDate").kendoDatePicker({
format: "dd-MM-yyyy",
value: new Date(),
change: dpDate_onChange
});
var dpDate = $("#dpDate").data("kendoDatePicker");

var lDataSource = new kendo.data.DataSource({
data: {
_date: kendo.toString(dpDate.value(), 'yyyy-MM-dd'),
_dateSource: $("#ddlDateSource").val()
}
...
$(".pager").kendoPager({ dataSource: lDataSource, ...
$("#lvPictures").kendoListView({ dataSource: lDataSource, ...

function dpDate_onChange() {
// calling read on datasource reloads data with original datepicker value
// lDataSource.read();

// calling refresh on listview reloads datasource (with original datepicker value)
// var lvPictures = $("#lvPictures").data("kendoListView");
// lvPictures.refresh;
}

ListView

answered on 26 Mar 2013

3 answers

181 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

470 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

70 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

186 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

175 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

574 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

132 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

117 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

99 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