I'm new to Kendo UI and I'm in the early stage of evaluating it.

Coming from a Windows application perspective, good keyboard navigation is expected in an application to increase user productivity. 

In most cases, it is expected the tab key would navigate between controls on a page.  In some scenarios, the tab key may also function to move between cells in a grid.  Arrow keys typically allow movement from within a control.  There should be a means of entering edit mode of a control (e.g. a grid) with the keyboard, and a means of exiting edit mode, if it makes sense for the type of control (e.g. a grid). If a widget allows pop up of a secondary control (e.g. a date / calendar control or combo box), then it should be possible to invoke that secondary UI from the keyboard, as well as from the mouse (or by touch).


An informal testing of the various Kendo UI web widgets revealed that that the keyboard navigation performed poorly, at least as configured in the samples on the Kendo UI website.   I don't know if there are settings that can be set on the various controls to make them perform as expected/desired.  If so, I'd love to hear how to make those configuration changes.  Or perhaps I'm using the wrong navigation keys.  Below I've included my observations based on my preliminary testing.

• Autocomplete works as expected in primary (by "primary", I mean not in a grid)
• ComboBox widget works as expected in primary (up/down arrow keys to cycle choices; tab moves between fields)
• DataPicker does not seem to support keyboard navigation (how do I open pick list?) in primary
• DropDownList widget works as expected in primary (up/down arrow keys to cycle choices; tab moves between fields). EXCEPT, no keyboard focus visual cue

Grid control

• Use arrows when in edit mode to move within text field (good)
• How do I enter edit mode using keyboard?
• How do I tab into grid control, from outside control (when grid is not in edit mode)?
• How do I tab between cells in the grid? NOTE: If the grid cells already in 'edit' mode, then tabbing between editable cells works (as in 'inline editing' grid sample)
• Up/down arrow keys increase/decrease values in NumericTextBox control; left/right arrow keys allow navigation within cell (good)
• How do I delete row using keyboard?
• Popup edit does not set keyboard focus to any field in the popup window editor

NumericTextBox

• Up/down arrow keys increase/decrease values in NumericTextBox control; left/right arrow keys allow navigation within cell (good)
• After tabbing out of NumericTextBox, have strange visual cue that implies (to me) that the NumericTextBox still has keyboard focus (but it does not)

Slider

• Left/right and up/down arrow keys increment decrement slider value (good)
• Once you tab into slider control, you cannot exit the control via the keyboard

TimePicker

• Can enter free form dates (good)
• How do I open the dropdown via the keyboard?

TabStrip

• Can tab into edit control within tab page (good)
• How do I switch between tabs in the tab strip with the keyboard?

Thanks for reading through this long list.  Comments are welcome.

Notre

how can i populate a grid whit json data in razor?

Hello, i use MVC4 and i create a window (with dynamic content) first invisible :

               @(Html.Kendo().Window()
                        .Visible(false)
                        .Name("mywindow")
                           .....
                )

Then i open it on button's click but it always opens with empty content (no problem if the window is first visible)

var window = $("#mywindow");

        $("#mybutton").click(function (e) {
            $("#formulaire").kendoWindow({
                visible: true
            }).data("kendoWindow");

            window.data("kendoWindow").refresh().center().open();
        });

i tried several things like this 



    $(document).ready(function () {
        var window = $("#mywindow").kendoWindow({
            visible: true
        }).data("kendoWindow");
...

but it never works : the window opens but empty 

Using the example set out in the following page: 

http://demos.kendoui.com/web/grid/hierarchy.html

I have tried to get this to use XML instead of oData.  I get "a.replace is not a function" and "a is not defined" javascript errors.

I have managed to get the customers working but I do not know how to link the orders XML file.  I think the problem is with the line:   filter: { field: "customer", operator: "eq", value: "id/text()" }  but I cannot find any examples of the Grid using XML, and do not know what to put for the "value" to get this to match up to the value of the "id" node in the customers XML file - can anyone help?

1. Using Chrome, go here: http://demos.kendoui.com/web/grid/editing-popup.html 
2. Right-click and inspect element, and then search for the word 'window' (no quotes). Note that it finds 2 instances.
3. Click on Add new record, and then Cancel
4. Right-click and inspect element, and then search for the word 'window' (no quotes). Note that it now finds 8 instances. If you repeat 3 and 4, it will go up by 6 instances each time, which means that the DOM elements are being left when dismissing the popup dialog.

This is an issue for us because we are using a Template with some javascript to do some dynamic display of other controls based on a combobox value. Because of this issue, we aren't making the proper controls (in)visible because it is finding other instances of the controls from the other windows that are still in the DOM.

Can you suggest a workaround until this gets resolved? Thanks.

I had a treeview, I got the json data from server side, and tried to bind it to treeview, but it didn't work, return all "undefined", but the same data I copied them into local, then hard code them into the treeview, it work fine, why ?

 1) below is my code.
<script type="text/javascript">
    $(function () {
        $.getJSON('@Href("~/api/TrackingCodes/action/GetPageTree/?orgID=17&typeIds={\"1\", \"2\", \"10\"}")', function (ret) {
            var Sitetrees = new kendo.data.HierarchicalDataSource({
                data: ret,
                schema: {
                    model: {
                        id: "Value",
                        children: "Node"
                    }
                }
            });
            $("#DivPageTree").kendoTreeView({
                dataSource: Sitetrees,
                dataTextField: "Text"
            });
        })
    })
</script>


2) It works when I copied these data into local

<script type="text/javascript">
             var Sitetrees = new kendo.data.HierarchicalDataSource({
                data: [...................],
                schema: {
                    model: {
                        id: "Value",
                        children: "Node"
                    }
                }
            });
            $("#DivPageTree").kendoTreeView({
                dataSource: Sitetrees,
                dataTextField: "Text"
            });
</script>

Hey guys,

I was looking at the latest internal build (808), and it looked like you guys implemented RequestEnd on the DataSource, which is going to solve a number of problems I'm having in my app. So I set up the following code:


The problem is, this event appears to only fire on the first read. My grid is using a remote datasource in batch mode, and the event does not fire when I add, update, or delete a row (with the built-in toolbar buttons), nor does it fire when I hit the built-in refresh button in the footer.

Digging through the code, it appears the event is wired into the sync, success, and error functions... but the only place the success function appears to be wired into is the Read function on the RemoteTransport class. If you look at the create, update, and destroy methods on RemoteTransport, you'll see they don't appear to leverage the success or error functions at all... at least, not the way you would expect.

It seems to me that an easier implementation of all of this would be to modify the Transports to start the CRUD methods by throwing the requestStart event, then passing in wrapped success and error functions that work similarly to the existing read method, where requestEnd is thrown before the passed in success or error handler is executed.

Then, the dataSource would handle these events from the Transport, and re-throw them back down to the implementer.

So 1) is the feature in its current state considered complete?
2) Did I hit a bug or am I doing something wrong?
3) Does my explanation of a "better" approach make sense?

Thanks!

Edit: I was doing something wrong. Mental note: Next time, test new Kendo feature on page with one Grid, not seven. I pasted in the wrong GridID, to the bind function, so I was testing the results in a different grid than the one that was wired up. My bad.

Hi,

Is there a way to prevent Grid's AJAX call when no results are returned. Looks like this is the default behviour.

Thanks
Ritu

I have an data model for a recursive parent-child relationship like this:

    public class ActivityCategory
    {
        public int CategoryID { get; set; }
        public string CategoryName { get; set; }
        public int? ParentCategoryID { get; set; }
        public ActivityCategory Parent { get; set; }

...

    }

The parent may be null.  I'm trying to set my grid up like this:
        @(Html.Kendo().Grid(Model)
                    .Name("ActivityCategoryGrid")
                    .Columns(columns =>
                    {
                        columns.Bound(resource => resource.CategoryName).Title("Name");
                        columns.Bound(r => r.Parent != null ? r.Parent.CategoryName : "");

which fails with
Bound columns require a field or property access expression.
How should I handle this?

HI,

I'm using kendoTreeView  and  "coloricons-sprite.png" to show images(like folder/pdf... ) .  But, i want to show custom image (like close) .  Plz suggest me how can i make use of other images (say close button) instead of sprite Image .

Im using code :