i've got mvc razor project in visual studio 2012 , using kendo ui web html controls. have grid edited via popup. when edit record model gets updated values of controls, apart 2 datepickers. in firebug, can see date values being posted in format "tue may 14 2013 00:00:00 gmt+1000 (aus eastern standard time)", model being sent datasource's transport:update function (updateregisterentry) has these fields null. can please me? below relevant code:
_layout.cshtml
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>@viewbag.title - asp.net mvc application</title> <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /> <meta name="viewport" content="width=device-width" /> @styles.render("~/content/css") @scripts.render("~/bundles/modernizr") <script src="@url.content("~/scripts/editorhookup.js")" type="text/javascript"></script> <!-- common kendo ui web css --> <link href="~/content/kendo/2013.1.319/kendo.common.min.css" rel="stylesheet" /> <!-- default kendo ui web theme css --> <link href="~/content/kendo/2013.1.319/kendo.default.min.css" rel="stylesheet" /> <!-- jquery javascript --> <script src="~/scripts/jquery-1.9.1.min.js"></script> <!-- kendo ui web combined javascript --> <script src="~/scripts/kendo/2013.1.319/kendo.web.min.js"></script> <script src="~/scripts/kendo/2013.1.319/cultures/kendo.culture.en-au.min.js"></script> <script type="text/javascript"> //set kendo ui culture kendo.culture("en-au"); </script> </head> <body> <div id="body">@rendersection("featured", required: false) <section class="content-wrapper main-content clear-fix">@renderbody() </section> <p class="content-wrapper"> <label style="color: red; font-weight: bold; margin-left: 10px" id="lblstatus" runat="server">@viewbag.status</label> </p> </div> <footer> <div class="content-wrapper"> <div class="float-left"> <p>© @datetime.now.year - fai register</p> </div> </div> </footer> @scripts.render("~/bundles/jquery") @rendersection("scripts", required: false) </body> </html> main view:
@model ienumerable<fairegistermvc.models.registerentry> @{ viewbag.title = "register"; layout = "~/views/shared/_layout.cshtml"; } <script> var faistatuses = []; $(document).ready(function () { var datasource = new kendo.data.datasource({ error: function (e) { debugger; var xhr = e.xhr; var statuscode = e.status; var errorthrown = e.errorthrown; var msg = xhr.responsetext; }, transport: { read: { url: "api/register", datatype: "json" }, destroy: { url: "api/register/delete/deleteregisterentry", datatype: "json", type: "post" }, create: { url: "api/register/insert/insertregisterentry", datatype: "json", type: "post" }, update: { url: "api/register/update/updateregisterentry", datatype: "json", type: "post" }, parametermap: function (data, type) { switch (type) { case "create": return data; break; case "destroy": return data; break; case "update": return data; break; } } }, batch: false, pagesize: 20, schema: { model: { id: "id", fields: { id: { editable: false, nullable: false }, fainumber: { type: "string" }, apnumber: { type: "number", validation: { required: true } }, workorder: { type: "string", validation: { required: true } }, faireporturl: { type: "string" }, isassembly: { type: "boolean" }, isdelta: { type: "boolean" }, engineeringnumber: { type: "string" }, modelrevision: { type: "string" }, manufacturingnumber: { type: "string" }, description: { type: "string" }, initiatingdocumentnumber: { type: "string" }, qainitiator: { type: "string" }, qap: { type: "string" }, qapdate: { type: "date" }, faistatusid: { type: "number", defaultvalue: 1 }, opqap: { type: "string" }, completiondate: { type: "date" } } } } }); $("#grid").kendogrid({ datasource: datasource, autobind: false, // disable autobinding should wait fai statues loaded pageable: true, height: "80%", width: "100%", toolbar: ["create", { name: "destroy", template: "<a class='k-button k-button-icontext k-grid-delete' onclick='removeselectedrow()'><span class='k-icon k-delete' title='click delete item.'></span>delete</a>" }], selectable: "row", columns: [ "id", { command: [ { name: "edit", text: "", template: function () { return "<a class='k-button k-button-icontext k-grid-edit' href='#'><span class='k-icon k-edit' title='click edit item.' />" } } ], title: " ", width: "57px", attributes: { "style": "text-align: center" } }, { field: "id", title: "id", width: "50px", hidden: true }, { field: "fainumber", title: "fai number", width: "130px" }, { field: "apnumber", title: "ap number", width: "85px", format: "{0:n0}" }, { field: "workorder", title: "work order", width: "85px" }, { field: "faireporturl", template: function (dataitem) { return "<a href='" + kendo.htmlencode(dataitem.faireporturl) + "' target='_blank'><img alt='fai report' src='images/report.gif' title='" + kendo.htmlencode(dataitem.faireporturl) + "' /></a>" }, title: "fai report", width: "80px", attributes: { "style": "text-align: center" } }, { field: "isassembly", title: "is assembly", width: "85px", attributes: { "style": "text-align: center" } }, { field: "isdelta", title: "is delta", width: "60px", attributes: { "style": "text-align: center" } }, { field: "engineeringnumber", title: "engineering no.", width: "110px" }, { field: "modelrevision", title: "model rev.", width: "80px" }, { field: "manufacturingnumber", title: "manufacturing no.", width: "125px" }, { field: "description", title: "description", width: "175px" }, { field: "initiatingdocumentnumber", title: "initiating doc. no.", width: "125px" }, { field: "qainitiator", title: "qa initiator", width: "100px" }, { field: "qap", title: "qap", width: "100px" }, { field: "qapdate", title: "qap date", width: "100px", format: "{0:dd/mm/yyyy}" }, { field: "completiondate", title: "completion date", width: "100px", format: "{0:dd/mm/yyyy}" }, { field: "faistatusid", title: "fai status", width: "150px", editor: faistatusdropdowneditor, template: "#=getregistrystatusname(faistatusid)#" } ], editable: { confirmation: "are sure want delete item?", mode: "popup", template: $("#popuptemplate").html(), createat: "top" }, edit: function () { try { hookupeditors(); } catch (e) { } } }); //get fai statuses , rebind grid $.getjson("api/register/statuses", function (data) { faistatuses = data; datasource.fetch(); }); }); var removeselectedrow = function () { $.each($("#grid").data("kendogrid").tbody.find(".k-state-selected"), function (index, value) { $("#grid").data("kendogrid").removerow(value); }); }; $("#grid").kendogrid({ databound: ondatabound }); function ondatabound() { // reference grid widget var grid = $("#grid").data("datasource"); } function faistatusdropdowneditor(container, options) { $('<div data-bind="value:' + options.field + '"/>') .appendto(container) .kendodropdownlist({ datatextfield: "registrystatusname", datavaluefield: "id", datasource: faistatuses }); } function getregistrystatusname(faistatusid) { (var idx = 0, length = faistatuses.length; idx < length; idx++) { if (faistatuses[idx].id === faistatusid) { return faistatuses[idx].registrystatusname; } } } </script> <h2>register</h2> <div id="grid" style="min-height: 650px"> </div> <script type="text/x-kendo-template" id="popuptemplate"> <text> @html.partial("~/views/shared/editortemplates/_popupregistereditor.cshtml", new fairegistermvc.models.registerentry()) </text> </script> popup editor partial view
@model fairegistermvc.models.registerentry @using(html.beginform()) { @html.antiforgerytoken() @html.validationsummary(true) <style> td { text-align: left; } .editor-label { font-size: .7em; margin: 4px 2px 4px 2px !important; padding: 4px 2px 4px 2px !important; text-align: left; white-space: nowrap; } .editor-field { margin: 4px 2px 4px 2px !important; padding: 4px 2px 4px 2px !important; height: .7em !important; font-size: .7em; } </style> @html.hiddenfor(model => model.id) <table style="vertical-align: top; border: 0; margin-bottom: 25px; padding-bottom: 25px"> <tr> <td colspan="2"> <div class="editor-label"> @html.labelfor(model => model.fainumber) </div> <div class="editor-field"> @html.editorfor(model => model.fainumber, new { style = "width:200px" }) @html.validationmessagefor(model => model.fainumber) </div> <div class="editor-label"> @html.labelfor(model => model.workorder) </div> <div class="editor-field"> @html.editorfor(model => model.workorder, new { style = "width:200px" }) @html.validationmessagefor(model => model.workorder) </div> <div class="editor-label"> @html.labelfor(model => model.isassembly) </div> <div class="editor-field"> @html.editorfor(model => model.isassembly) @html.validationmessagefor(model => model.isassembly) </div> <div class="editor-label"> @html.labelfor(model => model.engineeringnumber) </div> <div class="editor-field"> @html.editorfor(model => model.engineeringnumber, new { style = "width:200px" }) @html.validationmessagefor(model => model.engineeringnumber) </div> <div class="editor-label"> @html.labelfor(model => model.initiatingdocumentnumber) </div> <div class="editor-field"> @html.editorfor(model => model.initiatingdocumentnumber, new { style = "width:200px" }) @html.validationmessagefor(model => model.initiatingdocumentnumber) </div> <div class="editor-label"> @html.labelfor(model => model.qap) </div> <div class="editor-field"> @html.editorfor(model => model.qap, new { style = "width:200px" }) @html.validationmessagefor(model => model.qap) </div> <div style="padding: 5px 0px 0px 0px; white-space: nowrap"> <div class="editor-label"> @html.labelfor(model => model.faistatusid) </div> <div class="editor-field"> @html.editorfor(model => model.faistatusid, new { style = "width:200px" }) @html.validationmessagefor(model => model.faistatusid) </div> </div> <div class="editor-label"> @html.labelfor(model => model.opqap) </div> <div class="editor-field"> @html.editorfor(model => model.opqap, new { style = "width:200px" }) @html.validationmessagefor(model => model.opqap) </div> </td> <td colspan="3"> <div class="editor-label"> @html.labelfor(model => model.apnumber) </div> <div class="editor-field"> @html.editorfor(model => model.apnumber, new { style = "width:200px" }) @html.validationmessagefor(model => model.apnumber) </div> <div class="editor-label"> @html.labelfor(model => model.modelrevision) </div> <div class="editor-field"> @html.editorfor(model => model.modelrevision, new { style = "width:200px" }) @html.validationmessagefor(model => model.modelrevision) </div> <div class="editor-label"> @html.labelfor(model => model.isdelta) </div> <div class="editor-field"> @html.editorfor(model => model.isdelta) @html.validationmessagefor(model => model.isdelta) </div> <div class="editor-label"> @html.labelfor(model => model.manufacturingnumber) </div> <div class="editor-field"> @html.editorfor(model => model.manufacturingnumber, new { style = "width:200px" }) @html.validationmessagefor(model => model.manufacturingnumber) </div> <div class="editor-label"> @html.labelfor(model => model.qainitiator) </div> <div class="editor-field"> @html.editorfor(model => model.qainitiator, new { style = "width:200px" }) @html.validationmessagefor(model => model.qainitiator) </div> <div style="padding: 5px 0px 4px 0px; white-space: nowrap"> <div class="editor-label"> @html.labelfor(model => model.qapdate) </div> <div class="editor-field"> @html.editorfor(model => model.qapdate) @html.validationmessagefor(model => model.qapdate) </div> </div> <div class="editor-label"> @html.labelfor(model => model.completiondate) </div> <div class="editor-field"> @html.editorfor(model => model.completiondate) @html.validationmessagefor(model => model.completiondate) </div> </table> } the registerentry model
using system; using system.collections.generic; using system.componentmodel; using system.componentmodel.dataannotations; using system.linq; using system.web; namespace fairegistermvc.models { public class registerentry { public registerentry() { } public decimal id { { return _id; } set { if(_id != value) { _id = value; } } } private decimal _id; [displayname("fai number")] public string fainumber { { return _fai_number; } set { _fai_number = value; } } private string _fai_number; [displayname("ap number")] public decimal? apnumber { { return _ap_number; } set { _ap_number = value; } } private decimal? _ap_number; [displayname("work order")] public string workorder { { return _work_order; } set { _work_order = value; } } private string _work_order; [displayname("fai report")] public string faireporturl { { return _fai_report_url; } set { _fai_report_url = value; } } private string _fai_report_url; [displayname("is assembly?")] public bool isassembly { { return _is_assembly; } set { _is_assembly = value; } } private bool _is_assembly; [displayname("is delta?")] public bool isdelta { { return _is_delta; } set { _is_delta = value; } } private bool _is_delta; [displayname("engineering no.")] public string engineeringnumber { { return _engineering_number; } set { _engineering_number = value; } } private string _engineering_number; [displayname("model rev.")] public string modelrevision { { return _model_rev; } set { _model_rev = value; } } private string _model_rev; [displayname("manufacturing no.")] public string manufacturingnumber { { return _manufacturing_number; } set { _manufacturing_number = value; } } private string _manufacturing_number; public string description { { return _description; } set { _description = value; } } private string _description; [displayname("initiating doc. no.")] public string initiatingdocumentnumber { { return _initiating_doc_number; } set { _initiating_doc_number = value; } } private string _initiating_doc_number; [displayname("qa initiator")] public string qainitiator { { return _qa_initiator; } set { _qa_initiator = value; } } private string _qa_initiator; public string qap { { return _qap; } set { _qap = value; } } private string _qap; [uihint("datetime")] [displayname("qap date")] public datetime? qapdate { { return _qap_date; } set { _qap_date = value; } } private datetime? _qap_date; [uihint("faistatuses")] [displayname("fai status")] public decimal? faistatusid { { return _fai_status_id; } set { _fai_status_id = value; } } private decimal? _fai_status_id; [displayname("op qap")] public string opqap { { return _op_qap; } set { _op_qap = value; } } private string _op_qap; [uihint("datetime")] [datatype(datatype.date)] [displayname("completion date")] public datetime? completiondate { { return _completed_date; } set { _completed_date = value; } } private datetime? _completed_date; } datetime editor template
@model datetime? @html.textbox("", model.getvalueordefault(), "dd/mm/yyyy", new { @class = "date", style = viewdata["style"] }) relevant javascript
var faistatuses = []; function hookupeditors() { //get fai statuses , rebind grid $.getjson("api/register/statuses", function (data) { faistatuses = data; }); $(".date").kendodatepicker({ value: new date(), min: new date(1950, 0, 1), max: new date(2049, 11, 31), culture: "en-au", format: "dd/mm/yyyy", parseformats: ["dd/mm/yyyy"] }); $(".currency").kendonumerictextbox({ format: "c2" }); $(".decimal").kendonumerictextbox({ format: "n0", min: 0 }); $(".percentage").kendonumerictextbox({ format: "p0" }); $(".faistatuses").kendodropdownlist({ datatextfield: "registrystatusname", datavaluefield: "id", datasource: faistatuses });} }
i've figured out how resolve this. need reformat date ok json , rest service.
in parameter map function of kendo ui datasource, doing following:
parametermap: function (data, type) { if ( type != "read") { data.datefield = fixdateformat(data.datefield); } } function fixdateformat(date) { var formatted; if (date != null) { formatted = date.getfullyear() + "-" + ("0" + (date.getmonth() + 1)).slice(-2) + "-" + ("0" + date.getdate()).slice(-2); } return formatted; } hopefully clear , helps others.
Comments
Post a Comment