I'm trying to follow your Grid / ForeignKey column Add new record and adapt it to my own model. However, when I click on the foreign key column to edit it, all I get it is a numeric up down control. I have seen suggestions that I have to create an editor template for the foreign key with a ComboBox, but shouldn't the example mention this somewhere. I can't find any mention of a ForeignKey column anywhere in the documentation either. It seems some things just never improve.

Hi guys,
  I am working with the ScrollView and trying to prevent users from scrolling to certain pages.  I created an event handler for changing.  According to the docs, there should be currentPage and nextPage numbers available in the event.  It appears that only the currentPage is available when I dump out the event object.  Can you help me out with this?

Using Q1 2013 release
Reference: http://docs.kendoui.com/api/mobile/scrollview#events-changing

Thanks!
Seth

I am using Kendo Q3 2012 release and jQuery 1.8.2.  Keyboard navigation is not working on any of the DropDownLists in my project.

Here's the JavaScript configuration of one of them:

            $("#TradeItemId").kendoDropDownList({
                dataTextField: "Name",
                dataValueField: "Id",
                dataSource: {
                                type: "json",
                                transport: {
                                    read: getTradeItemsUrl
                                }            
                },
                change: biTradeItemIdChanged
            });

And here's the configuration of one in Razor:

            @(Html.Kendo().DropDownListFor(m => m.CrewId)
                  .DataTextField("Name")
                  .DataValueField("Id")
                  .DataSource(s => s.Read("GetCrews", "Task"))
                  .Events(e => e.Change("crewChanged"))
            )

Keyboard navigation works on neither.  Is there something else that must be added to the configuration?  Are there problems with keyboard navigation when using a DataSource (most of the demos seem to use BindTo)?

Any help in resolving this issue would be greatly appreciated.

Hi I have found an issue with links duplicating that manifests in 2 ways. I've reproduced it on the demo. See either attached screenshot - I accidently attached it twice.

To reproduce in the demo:

Method 1:

1. Put your cursor at the beginning of one of the links.
2. Click 'enter' twice (this is important because it happens when the link is at the start of a 'p')
3. Observe two links in the html

Method 2:

1. Put your cursor at the end of one of the links and click 'enter' once
2. Put your cursor back to the end of the same link and click 'enter' once
3. Observe two links in the html

It appears that when a user selects a value from a dropdown list, the selected data source object is being assigned to the model property instead of assigning the selected value property to the model property. I am able to correct this issue by binding to the change event of the view model and if the property of the model that is bound to the dropdown is changed then correct the value. However, I would like to avoid that type of if at all possible. Please let me know if you have any questions or need sample code.

At the kendo version v2013.1.514, the NumericTextBox has an error in language de-DE.

You can test it at http://demos.kendoui.com/web/globalization/index.html

1. Change culture de-DE
2. Set "Initial price" to "10,5"
3. Focusout textbox, value change to "10,50 €"
4. Focus textbox, value change to "11.5" (problem is the point)
5. Focusout textbox, value change to "105,00 €"

I have change the NumericTextBox.prototype._update and it works... Have you a better idea?

(function () {
    NULL = null;
    round = kendo._round;
    window.kendo.ui.NumericTextBox.prototype._update = function (value) {
        var that = this,
            options = that.options,
            format = options.format,
            decimals = options.decimals,
            culture = that._culture(),
            numberFormat = that._format(format, culture),
            isNotNull;

        if (decimals === NULL) {
            decimals = numberFormat.decimals;
        }

        value = that._parse(value, culture);

        isNotNull = value !== NULL;

        if (isNotNull) {
            value = parseFloat(round(value, decimals));
        }

        that._value = value = that._adjust(value);
        that._placeholder(kendo.toString(value, format, culture));

        if (isNotNull) {
            value = value.toString();
            if (value.indexOf("e") !== -1) {
                value = round(+value, decimals);
            }
        } else {
            value = "";
        }

        that.element.val(kendo.toString(parseFloat(value), format, culture)).attr("aria-valuenow", value);
    }
})()

Thanks

I have objects to bind to an AutoComplete. They have Id and Name properties. I want to auto-complete on the Name and get access to the corresponding Id when an item is selected. For test purposes I'm including the Id in the string that gets bound as the Name. For test purposes I'm issuing an alert() with the details of the dataItem selected.

    @(Html.Kendo().AutoCompleteFor(model => model.SelectedItem)
        .BindTo(Model.AvailableItems.Select(x => new { x.Id, Name = string.Format("{0} ({1})", x.Name, x.Id) }))
        .DataTextField("Name")
        .Events(e => e.Select("onSelect"))
        .Filter("contains")
    )

<script>
    function onSelect(e) {
        var dataItem = this.dataItem(e.item.index());
        alert(dataItem.Id + ":" + dataItem.Name + "(" + e.item.index() + ")");
    }
</script>

What I'm seeing is that in most cases (not all cases, which is even more curious to me), the Id and Name of the apparently selected dataItem don't correspond. The Id seems to (usually) be that of the NEXT item in the list after the one with the selected Name.

Any ideas? I can try to reproduce it in a standalone sample when I get the chance..

Setting the wrap configuration to false doesn't works.
Wrapping by default with a div element braks the percent height feature of css.

Here is the patch:

(function($, undefined) {
    var kendo = window.kendo,
        Observable = kendo.Observable,
        SCRIPT = "SCRIPT",
        INIT = "init",
        SHOW = "show",
        HIDE = "hide";

    var View = Observable.extend({
        init: function(content, options) {
            var that = this;
            options = options || {};

            Observable.fn.init.call(that);
            that.content = content;
            that.tagName = options.tagName || "div";
            that.model = options.model;
            that.wrap = (options.wrap === undefined) ? true : false;

            that.bind([ INIT, SHOW, HIDE ], options);
        },

        render: function(container) {
            var that = this,
                element,
                content;

            if (!that.element) {
                element = $("<" + that.tagName + " />");
                content = $(document.getElementById(that.content) || that.content); // support passing id without #
                element.append(content[0].tagName === SCRIPT ? content.html() : content);
                that.element = (that.wrap === false) ? element.children() : element;
                kendo.bind(that.element, that.model);
                this.trigger(INIT);
            }

            if (container) {
                this.trigger(SHOW);
                $(container).append(that.element);
            }

            return that.element;
        },

        hide: function() {
            this.element.detach();
            this.trigger(HIDE);
        },

        destroy: function() {
            if (this.element) {
                kendo.unbind(this.element);
                this.element.remove();
            }
        }
    });

    var Layout = View.extend({
        init: function(content, options) {
            View.fn.init.call(this, content, options);
            this.regions = {};
        },

        showIn: function(container, view) {
            var previousView = this.regions[container];

            if (previousView) {
                previousView.hide();
            }

            view.render(this.render().find(container), previousView);
            this.regions[container] = view;
        }
    });

    kendo.Layout = Layout;
    kendo.View = View;
})(window.kendo.jQuery);

Francesc Baeta

When using the standard jQuery effects, the animation will not play when the final state of the animation equals the current state. Using kendo.fx or kendoAnimate this does not work.

An example shows much better what I mean:

kendoAnimate: http://jsfiddle.net/RedF/ca8vz/

kendo.fx: http://jsfiddle.net/RedF/CYpht/

Notice that I'm using the animations from within a knockout custom binding, which is a necessary requirement in my project.

The example clearly shows the difference when you press 'Run' in jsfiddle:

• In the jQuery slideDown variant the sliding text is invisible until you click the ToggleVisibility button and then changes between visible/invisible when you click the ToggleVisibility button;
  
  
• In the kendoAnimate variant the sliding text will start visible, slide up and become invisible and then changes between visible/invisible when you click the ToggleVisibility button;
• In the kendo.fx variant, well....., there are issues;

Can you please tell me how can I use the kendo effects/animations with proper 'instant' initialisation? I'm sure it can be done in many ways with just CSS transitions etc. etc. but I really want to use only the kendo UI framework as much as possible.

Kind regards,
Fred

See this page:
http://www.kendoui.com/forums/mobile/general-discussions/kendoui-mobile-dropdownlist-in-icenium-mist.aspx

and put on this code last kendo ui version (2013.1.319):


<!DOCTYPE html>
<html>
<head>
<link href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.3.1315/js/kendo.all.min.js"></script>
<title>Kendo UI JsBin</title>
</head>
<body>
<div data-role="view" data-init="initSignOffForm">
<select id="ddlChild">
<option value="1">Veronique</option>
<option value="2">Michelle</option>
<option value="3">Griffin</option>
<option value="4">Boris</option>
</select>
</div>
<script>
function initSignOffForm() {
var body = $(".km-vertical,.km-horizontal");
if (kendo.ui.DropDownList) {
$("#ddlChild").kendoDropDownList({
// The options are needed only for the desktop demo, remove them for mobile.
popup: { appendTo: body },
animation: { open: { effects: body.hasClass("km-android") ? "fadeIn" : body.hasClass("km-ios") ? "slideIn:up" : "slideIn:down" } }
});
}
}

new kendo.mobile.Application();
</script>
</body>
</html>

You can see that does't work because the items of select are too big!
How can it solve??
This just in graphite and in mist beacuse in
http://jsbin.com/aligem/221/edit

It work fine!