$("#grid").kendoGrid({
        dataSource: {
            type: "json",
            serverPaging: true,           
            serverSorting: true,
            pageSize: 3000,
            allowUnsort: true,
            transport: {
                read: {                  
                    url: "homecontroller/action1",
                type: "post",
                contentType: "application/json; charset=utf-8",
                dataType: "json"
                },
            parameterMap: function (options) {                       
                return JSON.stringify(options);                    }
            },

            schema: { data: "Data", total: "TotalRowCount" }

        },              
        groupable: true,       
        sortable: true,
        pageable: true,
        selectable: "multiple",

        scrollable: {
            virtual: true
        },
 
       columns:
        [
  //column definitions here
 ]
 });

I've put together a little app using Kendo UI that stores user inputs in a Javascript array, and then prints these items out by adding text to a div. Along with the text, I need to have a delete button to remove these items from the array.

Since I'm adding the delete buttons to the DOM after I initialize Kendo UI, I assume I need to use the.kendoMobileButton() method on each button I add. If I don't do this, my buttons aren't styled correctly, despite being given the attribute data-role="button".

Still, when I try to use these buttons, I can't get them to call a function with data-click="deleteNumber". The function simply doesn't seem to fire. Any hints?

Here is a quick example I threw together that illustrates my problem: http://crocdoc.ifas.ufl.edu/files/kendo_example/

<div id="grid"></div>


<script>
    $(document).ready(function () {
        dataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: '@Url.Action("GetCityList", "City")',
                    dataType: "json",
                    type: "GET",
                    contentType: "application/json; charset=utf-8"
                },
                create: {
                url: '@Url.Action("create", "City")',
                type: "Post"
            },
                parameterMap: function (data, operation) {
                    if (operation != "read") {
                        var result = {};

                        for (var i = 0; i < data.models.length; i++) {
                            var ciudad = data.models[i];

                            for (var member in ciudad) {
                                result["ciudades[" + i + "]." + member] =                        ciudad[member];
                            }
                        }
                        return result;
                    }
                }


            },
            batch: true,
            pageSize: 30,
            schema: {
                model: {
                    id: "id",
                    fields: {
                        id: { editable: false, nullable: true },
                        descripcion: { validation: { required: true} },
                        DepartamentName: { field: "DepartamentName" },
                    }
                }
            }
        });

        $("#grid").kendoGrid({
            dataSource: dataSource,
            navigatable: true,
            pageable: true,
            height: 400,
            toolbar: ["create", "save", "cancel"],
            columns: [
                "descripcion",
            { field: "DepartamentName", title: "Name Departament", editor: categoryDropDownEditor, width: 150 }, 
                { command: "destroy", title: "&nbsp;", width: 110}],
            editable: true
        });
    });

</script>

<script>

    function categoryDropDownEditor(container, options) {

        $('<input data-text-field="name" data-value-field="name"  data-bind="value:' + options.field + '"/>')
                        .appendTo(container)
                        .kendoDropDownList({
                            autoBind: false,
                            dataSource: {
                                type: "json",
                                transport: {
                                    read: {
                                        url: '@Url.Action("GetDepartament", "city")
                                            }
                                }
                            }
                        });
    }
            </script>

it show me ok but my problem is that when It hit to my action create it give me the name of the departament not the id

and when i change my function this part to this

 $('<input data-text-field="name" data-value-field="name"  data-bind="value:' + options.field + '"/>')

 $('<input data-text-field="name" data-value-field="id"  data-bind="value:' + options.field + '"/>')

with it show me fine in my action I get the id but in my grid when I choose in my dropdown a departament in the grid it show me the id (so is no the behavior I want)

how can I do to work this? I guees is in the bind part..