jQuery UI Widgets Forums Grid MVC WebApi Date format

Tagged: , , , ,

This topic contains 4 replies, has 2 voices, and was last updated by  alexz 11 years, 4 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • MVC WebApi Date format #14296

    alexz
    Member

    Hi,

    now I switched to use MVC WebApi and grid does not seem to recognize the date in format 2013-01-01T00:00:00+00:00, which comes from the controller. Any workaround?

    Thanks,
    Alex

    MVC WebApi Date format #14297

    Peter Stoev
    Keymaster

    Hi Alex,

    If you report an issue, please take a look at this forum topic: http://www.jqwidgets.com/community/topic/welcome-to-jqwidgets-forum/

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    MVC WebApi Date format #14300

    alexz
    Member

    Ok, more info:

    jgx version: 2.5.5
    jquery: 1.8.2
    browser: firefox 18.0.1

    In order to reproduce this, you need ASP.NET MVC Controller returning some entity with DateTime or DateTimeOffset, configure grid to consume controllers data as json, and column which in my case was like:

    {text: 'Alkuaika', datafield: 'StartDate', createeditor: function (row, value, editor) { editor.jqxDateTimeInput({ culture: 'fi-FI' }); },columntype: 'datetimeinput',cellsformat: 'd.M.yyyy H:mm'}

    Alternatively if you don’t do ASP.NET MVC stuff, you can put string like this ‘2013-01-01T00:00:00+00:00’ in json data array and make grid to consume it.

    The column shows it’s value like ‘2013-01-01T00:00:00+00:00’, not in ‘d.M.yyyy H:mm’ format. After I edit column, it works ok, and date is show like it should be, in ‘d.M.yyyy H:mm’ format.

    As I found from the source code, the jqxdata module’s isDate function received the string ‘2013-01-01T00:00:00+00:00’ as an argument and then naturally discarded it as an invalid date.

    Can you continue with that information, Peter?

    MVC WebApi Date format #14302

    Peter Stoev
    Keymaster

    Hi alexz,

    Here is a working sample:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.9.0.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    var data = [{date:'2013-01-01T00:00:00+00:00'}];
    var source =
    {
    localdata: data,
    datatype: "json",
    datafields:
    [
    { name: 'date', type: 'date' }
    ]
    };
    var dataAdapter = new $.jqx.dataAdapter(source);
    $("#jqxgrid").jqxGrid(
    {
    source: dataAdapter,
    columnsresize: true,
    columns: [
    { text: 'Name', datafield: 'date', cellsformat: 'd.M.yyyy H:mm'}
    ]
    });
    });
    </script>
    </head>
    <body class='default'>
    <div id="jqxgrid">
    </div>
    </body>
    </html>

    The test has been made with jQWidgets 2.6.1.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    MVC WebApi Date format #14311

    alexz
    Member

    The difference between my code and the example was missing type declaration:

     type: 'date'

    Now everything works, thanks a lot!

    Br,
    Alex

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.