<?xml version="1.0" encoding="UTF-8"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
<channel>
	<title>jQuery Grid Plugin - jqGrid - Topic: Posting European date-fields</title>
	<link>http://www.trirand.com/blog/?page_id=393/help/posting-european-date-fields</link>
	<description><![CDATA[Grid plugin]]></description>
	<generator>Simple:Press Version 5.7.5.3</generator>
	<atom:link href="http://www.trirand.com/blog/?page_id=393/help/posting-european-date-fields/rss" rel="self" type="application/rss+xml" />
        <item>
        	<title>MorkvonOrk on Posting European date-fields</title>
        	<link>http://www.trirand.com/blog/?page_id=393/help/posting-european-date-fields#p28512</link>
        	<category>Help</category>
        	<guid isPermaLink="true">http://www.trirand.com/blog/?page_id=393/help/posting-european-date-fields#p28512</guid>
        	        	<description><![CDATA[<p>I&#39;v been struggling for quite a while with the way jqgrid posts dates back to the server after an edit or add.</p>
<p>I finally found a solution and gladly share it with you. So, this is not a question for help.</p>
<p>I&#39;m testing a ASP.NET MVC4 WEB API, with a simple model, controller and a single page view with json-trafic. I use the nl-BE culture that has a comma as a decimal separator, a dot as a thousands indicator and a european "dd/mm/yyyy" date format.</p>
<p>Filling and displaying the jqgrid was clear and easy. Problem was editing or adding rows. In the standard configuration jqgrid posts dates as they are formatted on screen. The server-side ASP.NET-deserializer&#160; standard interpretes the returned dates as american "mm/dd/yyyy" dates, and thus generates an error for days&#160; &#62; 12 and switches day and month for the other days.</p>
<p>I&#39;ve been trying to adapt the deserializer on the server but after a while realized that the problem originated on the client and was to be tackled there. I found the solution in using the serializeEditData-method that, as the name says, allows changing the data after submitting. Change the dates in "yyyyy/mm/dd"-format and the server has no diffculty in interpreting the right date. <img class="spSmiley" style="margin:0" title="Laugh" src="/blog/wp-content/forum-smileys/sf-laugh.gif" alt="Laugh" /></p>
<p>I again suggest to differentiate the screen-format from the posted format as I posted in the "Feature request"-forum : /blog/?page_id=393/feature-request/date-formats-differentiation-between-screen-and-post/;..038;hellip;..-and-post/</p>
<p>Mork</p>
</p>
<p>Here is my js-code :</p>
<blockquote>
<p>var API_URL = "api/products";</p>
<p>$("#gridMain").jqGrid({<br />&#160;&#160;&#160; url: API_URL,<br />&#160;&#160;&#160; datatype: &#39;json&#39;,<br />&#160;&#160;&#160; mtype: &#39;GET&#39;,<br />&#160;&#160;&#160; height: 470,<br />&#160;&#160;&#160; width: 1000,<br />&#160;&#160;&#160; viewrecords: true,<br />&#160;&#160;&#160; colNames: [&#39;Id&#39;, &#39;Naam&#39;, &#39;Categorie&#39;, &#39;Prijs&#39;, &#39;Aanmaakdatum&#39;],<br />&#160;&#160;&#160; colModel: [<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; { name: &#39;Id&#39;, index: &#39;Id&#39;, sorttype: "int", width: 40, hidden: true },<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; { name: &#39;Name&#39;, index: &#39;Name&#39;, width: 90,<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; editable: true, edittype: &#39;text&#39;, editoptions:{size:"20",maxlength:"30"} },<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; { name: &#39;Category&#39;, index: &#39;Category&#39;, editable: true, edittype: &#39;text&#39;, editoptions: { rows: "2", cols: "10" } },<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; { name: &#39;Price&#39;, index: &#39;Price&#39;, editable: true, edittype: &#39;text&#39;, align: &#39;right&#39;, sorttype: &#39;float&#39;, formatter: numFormat,<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; unformat: numUnformat },<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; { name: &#39;CreationDate&#39;, index: &#39;CreationDate&#39;,<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; editable: true,<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; edittype: &#39;text&#39;,<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; editrules: { date: true },<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; align: &#39;right&#39;,<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; datefmt: &#39;d/m/Y&#39;,<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; formatoptions: { srcformat: &#39;ISO8601Long&#39;, newformat: &#39;d/m/Y&#39; },<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; formatter: &#39;date&#39;,<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; }<br />&#160;&#160;&#160; ],<br />&#160;&#160;&#160; sortable: true,<br />&#160;&#160;&#160; sortorder: "asc",<br />&#160;&#160;&#160; sortname: "Id",<br />&#160;&#160;&#160; rowNum: 20,<br />&#160;&#160;&#160; rowList: [10, 20, 30],<br />&#160;&#160;&#160; pager: &#39;#navGrid&#39;,<br />&#160;&#160;&#160; loadtext: &#39;Loading products&#8230;&#39;,<br />&#160;&#160;&#160; caption: "CRUD With ASP.NET Web API"<br />});</p>
<p>jQuery("#gridMain").jqGrid(&#39;navGrid&#39;, &#39;#navGrid&#39;, { add: true, edit: true, del: true, search: false, view: false },<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; updateDialog(&#39;PUT&#39;),<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; updateDialog(&#39;POST&#39;),<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; updateDialog(&#39;DELETE&#39;)<br />);</p>
<p>function updateDialog(action) {<br />&#160;&#160;&#160; return {<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; url: API_URL,<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; closeAfterAdd: true,<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; closeAfterEdit: true,<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; afterShowForm: function (formId) { },<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; modal: true,<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; onclickSubmit: function (outputParams) {<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; var list = $("#gridMain");<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; var selectedRow = list.getGridParam("selrow");<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; var rowData = list.getRowData(selectedRow);<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; outputParams.url += "/" + rowData.Id;<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; outputParams.mtype = action;<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; },<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #ff0000;">serializeEditData: postUpdateDialog,</span><br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; width: 500<br />&#160;&#160;&#160; };<br />}</p>
<p><span style="color: #008000;">// returns the date field as "yyyy/mm/dd"</span><br /><span style="color: #ff0000;">function postUpdateDialog(data) {<br />&#160;&#160;&#160; workDate = data.CreationDate.substr(6, 4) + "-"<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; + data.CreationDate.substr(3, 2) + "-" + data.CreationDate.substr(0, 2);<br />&#160;&#160;&#160; data.CreationDate = workDate;<br />&#160;&#160;&#160; return data;<br />}</span></p>
<p>function numFormat(cellvalue) {<br />&#160;&#160;&#160; return cellvalue.replace(".", ",");<br />}</p>
<p>function numUnformat(cellvalue) {<br />&#160;&#160;&#160; return cellvalue.replace(",", ".");<br />}</p>
</blockquote>
]]></description>
        	        	<pubDate>Fri, 22 Mar 2013 19:47:35 +0200</pubDate>
        </item>
</channel>
</rss>