Questions on Kendo UI for jQuery Forum

1 answer

89 views

Is it possible to embed a DropDownList or ComboBox in the Kendo menu? I've done some searching and have not found an answer to this.

Menu

answered on 17 Aug 2012

0 answers

107 views

drag and dropped treeview node can't be selected

I have bound the "select" method of my treeview to show some extra info about the node in another pane.
Clickng on a node highlights it and shows the info just fine.
However when I drag a node:
- First of all, does this cause it to be selected?
Since you start a drag by click then mouse down, does that "click" select it?
- In any case, the dropped node is not highlighted, but clicking on it does not highlight it
and does not call the "select" event.that I've defined.

- If I call my treeview.select(some_kitem) is that suppose to call the method that I have bound to the select method
for the treeview?

- Related to all of this,. when a node IS selected (and highlighed), I'd like it if when the user clicks on it,
it calls the select method that I've bound to the treeview, but it does not.
Apparently if a node is selected, it can't be reselected.
I consider this a bug, but I can imagne an app where you wouldn't want this to happen.

TreeView

asked on 17 Aug 2012

0 answers

104 views

Grid using XML datasource cannot show only one record

Here is my scripts:

<!doctype html>
<html>
    <head>
        <link href="http://cdn.kendostatic.com/2011.2.804/styles/kendo.common.min.css" rel="stylesheet"/>
        <link href="http://cdn.kendostatic.com/2011.2.804/styles/kendo.kendo.min.css" rel="stylesheet"/>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script src="http://cdn.kendostatic.com/2011.2.804/js/kendo.all.min.js"></script>
    </head>
    <body>
        <div id="grid"></div>
        <script type="text/javascript">
                $(document).ready(function() {
                    $("#grid").kendoGrid({
                        dataSource: new kendo.data.DataSource({
                            transport: {
                                // specify the XML file to read. The same as read: { url: "books.xml" }
                                read: "books.xml"
                            },
                            schema: {
                                // specify the the schema is XML
                                type: "xml",
                                // the XML element which represents a single data record
                                data: "/books/book",
                                // define the model - the object which will represent a single data record
                                model: {
                                    // configure the fields of the object
                                    fields: {
                                        // the "title" field is mapped to the text of the "title" XML element
                                        title: "title/text()",
                                        // the "author" field is mapped to the text of the "author" XML element
                                        author: "author/text()",
                                        // the "url" field is mapped to the text of the "url" XML element
                                        url: "url/text()",
                                        // the "cover" field is mapped to the "id" attribute of the "book" XML element
                                       cover: "@cover"
                                    }
                                }
                            }
                        }),
                        scrollable: false,
                        sortable: true
                    });
                });
            </script>
    </body>
</html>

the books.xml contains valid xml record. The web page correctly show the result if the books.xml contain more than one record.
However, if there is only one record in the books.xml, the web page show nothing.

Is it a bug? Is there any way to avoid/fix it?

Thank you.

Grid

asked on 17 Aug 2012

2 answers

164 views

Is there onBind event for DDL?

If I have below js code for a DDL, which means defaultly select 1st one after rebind DDL:

DDLDataSource.read();
DDL.select(0);

It will select 1st one of previous datasouce.
I guess when running DDL.select(0), DDL rebind is not fully complete.

so questions:
1. why DDL hasn't a OnBind event so that we can walk around this situation?

DropDownList

answered on 17 Aug 2012

1 answer

113 views

Backbone example for views

The backbone integration sample on Github only integrates backbone models and collections to KendoUI. Is there a way to integrate backbone views (especially for mobile) and use KendoUI's mobile native look and feel? Thanks in advance.

General Discussions

answered on 16 Aug 2012

1 answer

171 views

Tabstrip: load a content using jquery

I'm tryiing to "play" with mobile example to see how can be easy is to make a port to kendo an application that use another framework.

I have added:
<div data-role="footer">
<div data-role="tabstrip">
<a href="#tabstrip-profile" data-icon="contacts">Profile</a>
<a href="#tabstrip-sales" data-icon="history">Sales</a>
<a href="#tabstrip-rating" data-icon="favorites">Rating</a>
<a href="#tabstrip-settings" data-icon="settings">Settings</a>
<a onclick="javascript:apriFig();" data-icon="settings">Fig</a>
</div>
</div>

and made a javascript that do:
<script>
function apriFig() {
$("#tabstrip-profile").empty().html('<img src="/static/indicator.gif"/>');
$('#tabstrip-profile').load('/newtab/');
}
</script>

but it don't work: in the response of url /newtab/ i tryed to replace tabstrip-profile... but i don't understand why it don't work.

TabStrip (Mobile)

answered on 16 Aug 2012

1 answer

139 views

Support for multiple series types when binding to local grouped data?

I want to render a chart where all but one of the series are stacked columns. The other series is a line. This works fine if I embed the series data within the JSON object passed to kendoChart(), but if I want to bind to a local variable holding grouped data, I don't see a way to associate a chart type to each of the groups. Is this a shortcoming of the tool, or am I missing something?

Here's what the code looks like when I embed the series data within the JSON object (the chart CORRECTLY renders the "Expenses" series as a line chart...and the others are CORRECTLY rendered as stacked columns):

function createChart() {

$("#chart").kendoChart({

seriesDefaults: {

type: "column",

stack: true

},

series: [{

name: "Expenses",

data: [50000, 50000, 50000, 50000],

type: "line"

}, {

name: "Pension Annuity",

data: [12000, 12000, 12000, 12000]

}, {

name: "Social Security",

data: [24000, 24000, 24000, 24000]

}],

categoryAxis: {

categories: [65, 66, 67, 68]

}

});

}

However if I switch this code to bind to local grouped data, I can't see a way to set the 2 different chart types to match this. Any ideas?

Charts

answered on 16 Aug 2012

1 answer

76 views

New User paging questions

I am using the grid to display some json data returned from an ajax datasource
in the query I am returning between 50 and 100 rows of data
I have pagesize = 10
I have tried everything I could think of but it always says 1 page no matter how many records are actually in the result set.

How do I let the pager know how many pages there are?

the attached json.php shows the response I typically receive from a call
and the index.html is what I am using to generate the grid

Grid

answered on 16 Aug 2012

0 answers

53 views

different ui elements with a common data source and different page size

I have a list of data that I want to use both in a grid and in a dropdownlist simultaneously. On the grid, I want it to have a pageSize of 10, but on the dropdownlist I want it to have all of the data items.

I don't want to specify two data sources for the same data just to get different page sizes. How would I set only the grid pageSize independent of the dataSource?

Thanks in advance,
Matt

Data Source

asked on 16 Aug 2012

2 answers

93 views

Possible bug: loosing reference to datasource

I'm not the most adept with Javascript or Kendo, so this may be a bug, or it might just be my noobism showing.

I have a Kendo Grid created from the MVC stuff in the fluent library. It's named "DocumentsGrid". It works fine. No complaints, until I created a Custom Command on the grid that executes a javascript function named showRevisions.

<div id="RevisionWindow"></div>

<script language="javascript">

function showRevisions(e) {

var documentId = 1234;

var wnd = $("#RevisionWindow").kendoWindow({

content: "somecrazyurl?documentId=" + documentId ,

title: "Revisions for Document " + documentId,

width: "750px",

height: "480px",

modal: true,

actions: ["Close"]

}).data("kendoWindow");

wnd.center().open();

}

</script>

This all executes fine. Unfortunately, however, sometime after this function has completed, any javascript that relies on $("#DocumentsGrid").data("kendoGrid").dataSource fails. I debugged through the code and the exact line of code where $("#DocumentsGrid").data("kendoGrid").dataSource begins returning null is in the jquery.js library, approximately line 8324:

complete(status, statusText, responses, responseHeaders);

The consequence of this is that I'm unable to do any paging or advanced manipulation of data in javascript once the window has been opened because most of the attributes on the DocumentsGrid object don't appear to be there anymore.

Is this a bug in jquery, kendo, or am I expected to reconstruct the grid every time I after I manipulate windows?

Thanks,

Jason

Data Source

answered on 16 Aug 2012