I am using the 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: " ", 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)); }Any ideas?
Thanks.
1 Answer, 1 is accepted
0
Hello Tyrel,
Basically the most common case which people struggle with is when the initial value for the DropDownList field is null. Similar questions are already discussed multiple times on the forums and we suggest to set default value for that field.
Could you please try to assign default value for these fields which are bound to DropDownLists?
If this is not an option you can use the approach covered from this code library specially designed for similar cases.
I hope this helps.
Kind Regards,
Petur Subev
the Telerik team
Basically the most common case which people struggle with is when the initial value for the DropDownList field is null. Similar questions are already discussed multiple times on the forums and we suggest to set default value for that field.
Could you please try to assign default value for these fields which are bound to DropDownLists?
If this is not an option you can use the approach covered from this code library specially designed for similar cases.
I hope this helps.
Kind Regards,
Petur Subev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!