I've got the following code that works well for initial load.  Once I execute .query I receive "Uncaught TypeError: Cannot read property '0' of undefined".  Kendo UI Mobile v2012.1.322

Am I using .query improperly?

Datasource/bind/sample data:

I have a grid that I want populated from a JSON callback. I also want pop-up editing. I see the callback occur to retrieve the data, but the grid isn't populated with it.

Here's a sample of the JSON result:

I see the grid appear, and I get the button to add a new item (and the pop-up appears).
Secondary question: How do I control which fields are displayed in the pop-up? I don't see a list of options available for each field in the help (are they documented someplace?). 


The HTML is a basic div tag w/ID. <div id="batchGrid"></div>

I'm not seeing any JS errors. Just an empty grid. What am I missing?

Hi,

Can you please give me an example json response that a Java web server needs to send for this autocomplete code:

$(document).ready(function() {

var dataSource = new kendo.data.DataSource({
type: "jsonp",

transport: {

read: {

    url: "<c:url value="/Control?command=ko.sp_getCourses"/>"

}

}

});

$("#autoComplete").kendoAutoComplete({

  minLength: 3,

  dataTextField: "name", // JSON property name to use

  dataSource: dataSource

});

});

Thanks!

I am familiarizing myself with the calendar and have copied the code for the demo calender from the website. (events).  The only difference is that I am using jquery 1.6.4.

My problem is that on page load firebug tells me

kendoConsole is not defined

kendoConsole.log("Navigate");

On  clicking a date I get the following:

kendoConsole is not defined

kendoConsole.log("...+ kendo.toString(this.value(), 'd'));

All required js and css files are loaded properly(according to the demo). The calendar appearance is perfect. I notice that in your example/events.html file you reference a  "kendo.console.js " file as a src for showing the calendar, that file does not exist in the zipped download. What am I missing or what other info do you need to help me?
------------------------------------------
Edit
I found the "kendo.console.js " file

Hi,
I have been trying to adapt the script found at http://www.kendoui.com/forums/ui/treeview/breadcrumbs-to-selected-node.aspx to render a simple breadcrumb below the Kendo menu - not having any luck.  Anyone care to suggest a simple way to do this?

Additionally, I am trying to add the "k-state-selected" class to each parent item of the selected item in the menu.  I can style the current menu item as selected without problems, but I want to highlight all the parent nodes so each higher level is also styled as selected. 

I think the script needed to do the breadcrumbs could also be used to add the selected class to the parent nodes too...

Thoughts?

Hi, somebody knows like using 2 combobox nested???

I have a grid with 2 combobox, and I need binding the second combobox to first combobox:

            $("#grid").kendoGrid({
                dataSource: DowsSharedDataSource,
                height: 400,
                autoSync: true,
                pageable: false,
                scrollable: false,
                navigatable: false,
                selectable: "row",
                sortable: false,
                change: onChange,
                editable: "popup",
                columns: [
                    {field: "CMFault_Desc", title: "Fault Desc" },
                    { field: "RT_Id1", editor: reasonComboEditor, title: "Reason 1" },
                    {field: "RT_Id2", editor: reasonComboEditor, title: "Reason 2" },
                    {command: ["edit"], title: " ", width: "190px" }
                ]
            });
            function reasonComboEditor(container, options) {
                $('<input name="' + options.field + '"/>').appendTo(container).kendoComboBox({
                    dataSource: ReasonTreeSharedDataSource,
                    dataValueField: "Id",
                    dataTextField: "Descr",
                    autobind: false
                });
            }
Tks.

Hi, I have recently started working with Kendo and so far have been really impressed with it. The grid is quite robust and I am looking forward to obtaining a license and using the Kendo UI elements in my next project.

I have a couple of quick questions regarding the Kendio UI Grid (Web), which I was hoping someone could assist me with.

Firstly, I have been able to work with the columns pretty well so far and have been able to switch the datasource from a static html table to an array or json style data structure, which is a good step in the right direction.

For the project I am planning on using Kendo for, I need to basically display a list of contacts with the following requirements:

1) the table will be populated either by json or xml which will be output by a separate php script, this seems quite straightforward and I have done this with various libraries already so it is really just a matter of figuring out the syntax which I need to adhere to for the same protocol to work with Kendo's grid component.

2) a column containing inline action buttons must be added to the end of the table

3) a column containing checkboxes must be prepended to the table, this is basically to allow me to select multiple items. This must be able to be shown or hidden on command.


Now, I have accomplished all of the above when using a static HTML table before initializing it as a Kendo grid. However I am stumped so far in trying to accomplish the same when initializing the table using an empty div. I have tried creating a template and then setting the column's template to be equal to that, but this has resulted in either a) the html structure I put in place simply being output as a string in the column or b) the html I put in place is not being processed correctly, mainly in the case of the class names.

By the way here is an example of the code I have tried to use to set the actions template:

<script id="actions_tmpl" type="text/x-kendo-tmpl">
<div class="table_action chat_action"></div>
<div class="table_action mail_action"></div>
<div class="table_action edit_action"></div>
</script>

columns: [  { title: "", template: kendo.template($("#check_tmpl").html()) },
{ title: "Contact Name", field: "Name" },
{ title: "Company Name", field: "Company" },
{ title: "Phone", field: "Phone" },
{ title: "Email Address", field: "Email" },
{ title: "Address", field: "Address" },
{ title: "Actions", width: 78, template: kendo.template($("#actions_tmpl").html()) } ]

When you inspect the grid after it's initialization, the html exists, but the class names dont seem to come into effect for some reason?? Each div: .chat_action, .mail_action, .edit_action should display a small icon but this doesn't seem to be processed correctly as of yet.

One more issue that I am experiencing is the following, because I need to have the multiple select option implemented in the grid, there needs to be a top-level select all option but I haven't found a way so far to set the column header template or a way around that.

Any ideas would be hugely appreciated,
Thank you!

I'm working on a data audit web applicaton which has a model containing several field sets composed of old value, new value, and current value fields. The current value is a calculated field (by KO terms) which uses fairly trivial logic to decide whether the old or new value should be used for the current value (basically if there is a new value then use it otherwise show the old value). There are about 20 of these field sets to be included in the overall form, and I'd like to avoid having to call `kendo.bind` for all of them individually.

Here's an example of what I'd like to be able to do (and the documentation sort of says should work, but doesn't):

<div id="practiceSection">
    <div id="phoneNumber">
        <h4>Phone Number</h4>
        <span>Display Value:</span>
        <input id="displayPhoneNumber" data-bind="value: phoneNumber.DisplayValue"/><br/>
        <span>Old Value:</span>
        <input id="oldPhoneNumber" data-bind="value: phoneNumber.OldValue"/><br/>
        <span>New Value:</span>
        <input id="newPhoneNumber" data-bind="value: phoneNumber.NewValue"/><br/>
    </div>
</div>​ 

String.IsNullOrEmpty = function(value) {
    var isNullOrEmpty = true;
    if (value) {
        if (typeof (value) == 'string') {
            if (value.length > 0)
                isNullOrEmpty = false;
        }
    }
    return isNullOrEmpty;
}
    
function FieldBlock(oldValue, newValue) {
    this.OldValue = oldValue;
    this.NewValue = newValue;

    this.DisplayValue = function() {
        var newValue = this.get("NewValue");
        if (String.IsNullOrEmpty(newValue))
            return this.get("OldValue");
        
        return newValue;
    };
}
    
kendo.bind($("#practiceSection"), kendo.observable({
    phoneNumber: new FieldBlock("111-111-1111", null) 
}));

jsfiddle

The code above results in `FieldBlock.DisplayValue` consistently returning undefined. Oddly enough, the dependent method does work if I pass the `FieldBlock` object to `kendo.observable` directly (not as the value of a property of an anonymous object). Here is a jsfiddle showing what does work but also what I'm trying to avoid.

Is this expected behavior? I'm using the 2012.01.322 build.

Also asked here to make sure I've avoided all of the typical non-ninja problems.

Hello,

I use remote views and I didn't succeed in debugging the js scripts that are loaded with these views. Did you know a way to debug the scripts of the remote views ?

Cordially,
Kakone.

Hi,
In Asp .NET DetailsView, i use ItemTemplate, EditItemTemplate and InsertItemTemplate.
How i can set the input control, ex TextBox how kendoDatePicker ??
In $(document).ready the TextBox control is not visibile and null

Thanks