Kendo.Web Grid Popup Create with ComboBox

Question

I am using the free Kendo web controls. I have used the grid view in several places before and decided to use the popup style editing for my current project.

I have most of it working. I have three combo boxes for category, bank account and payee and when I edit an existing item, the model object passed back to my MVC action has the correct values in it. However, when I click on the create button, the three combo box values are returned as null to the controller.

Here is the CSHTML code for this view:

@using System
@using System.Linq

@{
    ViewBag.Title = "Transactions";
}

@section Head
{
    <link href="~/Content/kendo/kendo.common.min.css" rel="stylesheet" />
    <link href="~/Content/kendo/kendo.default.min.css" rel="stylesheet" />
    <script src="~/Scripts/kendo/kendo.web.min.js"> </script>
}

@section featured
{
    <section class="featured">
        <div class="content-wrapper">
            <hgroup class="title">
                <h1>@ViewBag.Title</h1>
            </hgroup>
        </div>
    </section>
}

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

<script>
    $(function() {
        $("#grid").kendoGrid({
            height: 350,
            toolbar: [{ name: "create", text: "Create New Transaction" }],
            columns:
            [
                { field: "Date", width: "100px", template: '#= kendo.toString(Date,"MM/dd/yyyy") #' },
                { field: "Amount", format: "{0:c}", width: "100px" },
                { field: "Category", width: "80px", editor: categoryDropDownEditor, template: "#=Category.Name#" },
                { field: "BankAccount", title: "Account", width: "80px", editor: bankAccountDropDownEditor, template: "#=BankAccount.Name#" },
                { field: "Payee", width: "80px", editor: payeeDropDownEditor, template: "#=Payee.Name#" },
                { command: ["edit", "destroy"], title: "&nbsp;", width: "160px" }
            ],
            editable: { mode: "popup", confirmation: "Are you sure you want to delete this transaction?" },
            pageable:
            {
                refresh: true,
                pageSizes: true
            },
            sortable: true,
            filterable: false,
            dataSource:
            {
                serverPaging: true,
                serverFiltering: true,
                serverSorting: true,
                pageSize: 7,
                schema:
                {
                    data: "Data",
                    total: "Total",
                    model:
                    {
                        id: "Id",
                        fields:
                        {
                            Id: { editable: false, nullable: true },
                            Date: { type: "Date" },
                            Amount: { type: "number", validation: { required: true, min: 0 } },
                            Category: { validation: { required: true } },
                            BankAccount: { validation: { required: true } },
                            Payee: { validation: { required: true } },
                            Note: { validation: { required: false } }
                        }
                    }
                },
                batch: false,
                transport:
                {
                    create:
                    {
                        url: "@Url.Action("Create", "Transaction")",
                        contentType: "application/json",
                        type: "POST"
                    },
                    read:
                    {
                        url: "@Url.Action("Read", "Transaction")",
                        contentType: "application/json",
                        type: "POST"
                    },
                    update:
                    {
                        url: "@Url.Action("Update", "Transaction")",
                        contentType: "application/json",
                        type: "POST"
                    },
                    destroy:
                    {
                        url: "@Url.Action("Delete", "Transaction")",
                        contentType: "application/json",
                        type: "POST"
                    },
                    parameterMap: function(data)
                    {
                        return JSON.stringify(data);
                    }
                }
            }
        });

        function categoryDropDownEditor(container, options)
        {
            $('<input required data-text-field="Name" data-value-field="Id" data-bind="value:' + options.field + '"/>')
                .appendTo(container)
                .kendoDropDownList(
                    {
                        autoBind: true,
                        dataValueFileld: "Id",
                        dataTextField: "Name",
                        dataSource:
                        {
                            type: "json",
                            transport: { read: "@Url.Action("GetCategories", "Transaction")" }
                        }
                    });
        }

        function bankAccountDropDownEditor(container, options)
        {
            $('<input required data-text-field="Name" data-value-field="Id" data-bind="value:' + options.field + '"/>')
                .appendTo(container)
                .kendoDropDownList(
                    {
                        autoBind: true,
                        dataValueFileld: "Id",
                        dataTextField: "Name",
                        dataSource:
                        {
                            type: "json",
                            transport: { read: "@Url.Action("GetBankAccounts", "Transaction")" }
                        }
                    });
        }

        function payeeDropDownEditor(container, options)
        {
            $('<input required data-text-field="Name" data-value-field="Id" data-bind="value:' + options.field + '"/>')
                .appendTo(container)
                .kendoDropDownList(
                    {
                        autoBind: true,
                        dataValueFileld: "Id",
                        dataTextField: "Name",
                        dataSource:
                        {
                            type: "json",
                            transport: { read: "@Url.Action("GetPayees", "Transaction")" }
                        }
                    });
        }
    });
</script>

The binding to the kendo combo box must be working, otherwise the edit would fail as well. All I can think is that the object is not created correctly. Also, it selects the first item in the combo box by default, but even so, does not bind the value.

Following is the code for my create and update actions:

    [HttpPost]
    public ActionResult Create(TransactionModel transactionModel)
    {
        var transaction = _moneyBO.CreateTransaction();

        Mapper.Map(transactionModel, transaction);

        _moneyBO.UpdateTransaction(transaction);

        return Json(Mapper.Map<TransactionModel>(transaction));
    }

    public ActionResult Update(TransactionModel transactionModel)
    {
        var transaction = _moneyBO.Transactions.SingleOrDefault(x => x.Id == transactionModel.Id);

        if (transaction == null)
            return View("NotFound");

        Mapper.Map(transactionModel, transaction);

        _moneyBO.UpdateTransaction(transaction);

        return Json(Mapper.Map<TransactionModel>(transaction));
    }

I have not found a good example using the popup custom edit. The example on the Kendo site works inline, but if you change the example to popup it does not work.

Answer 1

I have a same problem. Write, if you solve it, please I found, that Kendo think that "null" (default for int?) is ObservableObject (while initialization of ComboBox), thats why it can't be parsed to "number". If you edit item (not create), value id not "null" and model bindind work's fine

Answer 2

Not sure if it's the only issue here but in your code example it looks like the initialization of your dropdown isn't quite correct. You have written dataValueFileld which should be dataValueField

kendoDropDownList({
    autoBind: true,
    dataValueFileld: "Id",          <-- Incorrect spelling
    dataTextField: "Name",
    dataSource:
    {
        type: "json",
        transport: { read: "@Url.Action("GetPayees", "Transaction")" }
    }
});