Questions on Kendo UI for jQuery Forum

4 answers

374 views

[Solved] TreeView insertAfter/insertBefore not doing anything

Hi there,

I've got a problem with inserting new nodes into the TreeView. The context is that I am doing drag and drop operations from one tree to another, and I want the action to be a copy rather than move, so I need to e.preventDefault the action and handle the copying myself (see issue: http://www.kendoui.com/forums/ui/treeview/re-two-trees----allowing-the-drop-but-preventing-the-draggable-from-moving.aspx) . This is fine, I thought I had it working, as the "over" part of the code works just fine, using .append.

However, it would seem that insertBefore and insertAfter simply don't do anything. Most likely I am doing something wrong, but I can't figure out what. See below the code for all three actions, (data is an object returned from ajax call fitting the schema of the tree).

if (e.dropPosition == 'before') {
    theOtherTree.insertBefore(data, $(e.dropTarget));
}
else if (e.dropPosition == 'over') {
    theOtherTree.append(data, $(e.dropTarget));
}
else if (e.dropPosition == 'after') {
    theOtherTree.insertAfter(data, $(e.dropTarget));
}

There is no error throw, the insert functions simply do nothing. The append function works just fine. Any thoughts?

TreeView

answered on 26 Mar 2013

2 answers

1.4K+ 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

232 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

516 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

90 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

231 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

213 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

629 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

162 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

145 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