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!

Hi,

I need an example of how i might pass an ObservableArray of viewmodels to a template where the template has elements with bound properties.. Is this doable? Do you have to add loop syntax to the template?? Example code please.

Hi,

I'm trying to do something similar as in the fiddle: http://jsfiddle.net/fPNUN/1/

Except for the data being defined hard coded I am loading a data object via a RESTful webservice call and I am doing all this in an angular directive.

I then try to do something like this:
var promise = helper.fetchData();
promise.then(
  function (result) {
    var data = result.data;
    var tabstrip = element.find(".kendo-tab-strip");

    tabstrip.kendoTabStrip({
      dataSource: data,
      dataTextField: "label",
      dataContentUrlField: "partial",
    });
  }
);

Here is what happens when the page is loaded: 
* The tabs are listed with their labels (obviously the json object has been returned)
* No content is displayed (even though I programmatically select the first tab)
* When I click on one of the tabs for the first time (!!!) the following error is logged in the javascript console: 
Uncaught TypeError: Cannot call method 'abort' of undefined Array[2] angular.js:6173
Uncaught TypeError: Cannot call method 'abort' of undefined kendo.all.js:26958

What is really weird is that the content is then displayed correctly and when I click on the other tabs subsequently everything works and the error is no longer thrown.

Hi guys,

I'm trying to us a simple existing remote Web API with Kendo datasource and can't get it working.
The JSON result is simple as below.
[
{"Id":1,"Name":"Tomato Soup","Category":"Groceries","Price":1.0},
{"Id":2,"Name":"Yo-yo","Category":"Toys","Price":3.75},{"Id":3,"Name":"Hammer","Category":"Hardware","Price":16.99}
]

I can read and show the Products result with jQuery (see <div class="table-wrapper"> in the code below), but it won't get displayed in the defined grid (see <div class="grid-wrapper">).
This drives me crazy.
Tried to use jQuery -Version 1.9.1 but it doesn't work either.

Can anybody please tell me what do I miss ?

Many thanks for your support,
Matthias

<!DOCTYPE html>
<html>
<head>
    <!-- Common Kendo UI Web CSS -->
    <link href="styles/kendo/kendo.common.min.css" rel="stylesheet" type="text/css" />
    <!-- Default Kendo UI Web theme CSS -->
    <link href="styles/kendo/kendo.default.min.css" rel="stylesheet" type="text/css" />

    <!-- jQuery JavaScript -->
    <script src="scripts/jquery-2.0.1.min.js"></script>
    <!-- Kendo UI Web combined JavaScript -->
    <script src="scripts/kendo/kendo.all.min.js"></script>

    <title>Dashboard</title>
</head>
<body>

    <div id="example" class="k-content">

        <div class="grid-wrapper">
            
            <div id="grid"></div>

            <script>
                var remoteDataSource = new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: "http://localhost:8945/api/Products",
                            dataType: "json"
                        }
                    },
                    schema: {
                        model: {
                            id: "Id",
                            fields: {
                                Id: { type: "number" },
                                Name: { type: "string" },
                                Category: { type: "string" },
                                Price: { type: "number" }
                            }
                        }
                    }
                    
                });
                

                $("#grid").kendoGrid({
                    dataSource: remoteDataSource,
                    height: 200
                });

            </script>
        </div>

        <div class="table-wrapper">
            <div id="divResult">
                
                <script>
                    function GetAllProducts() {
                        jQuery.support.cors = true;
                        $.ajax({
                            url: 'http://localhost:8945/api/Products',
                            dataType: 'json',
                            success: function (data) {
                                WriteResponse(data);
                            },
                        });
                    }
                    function WriteResponse(products) {
                        var strResult = "<table><th>ID</th><th>Name</th><th>Category</th><th>Price</th>";
                        $.each(products, function (index, product) {
                            strResult += "<tr><td>" + product.Id + "</td><td> " + product.Name + "</td><td>" + product.Category + "</td><td>" + product.Price + "</td></tr>";
                        });
                        strResult += "</table>";
                        $("#divResult").html(strResult);
                    }

                    $(document).ready(function () {
                        GetAllProducts();
                    });
                </script>
            </div>
        </div>
    </div>
 
</body>
</html>

Hi,
I have recently started to use Kendo UI technology and currently i am trying to create a grid using the Kendo Grid. For binding the data to the grid, i found two ways:
1. Transport
2. $.ajax( { } );

My requirement is to have a grid that will display the data and that can be auto-refreshed every time i change, create or delete the data in the grid. For this, i have tried the $.ajax( { } ) call as below:

 

Using the above functions, i am able to create, delete and change the data that gets displayed in the grid immediately as autoSync is set to true.

Now the transport feature:

I am unable to proceed further because i have no idea how to bind only
transport: { create: { } }
to the "Add Music" button and similary for update and destroy.

Also, i would like to know what are the differences between transport and $.ajax({}), what are the pros and cons of each and when to use transport and $.ajax({}).

Thanks in advance,
Pratap

We have a grid which needs create functionality, but update functionality does not make sense here (it is a many to many relation, so we only need to create/destroy a link, there is no update).

We can give this grid the create command, and specify the create operation, but now there is no "Save" button, as this is usually done by the "Update" button, which in case doesn't exist.

Is there a way to create a "Save" button, that only shows for newly added rows?

Hi There

Im using a Kendo Grid and want to show a joined array of strings.

# (ArrayOfStringsObject =! null) ? ArrayOfStringsObject.join() : SHOW "none" # <-- How can i show simple text in a template? 

Thanks