jQWidgets Forums

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

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

Author

MVC WebApi Date format Posts

January 29, 2013 at 2:21 pm 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

January 29, 2013 at 2:33 pm 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

January 29, 2013 at 3:06 pm 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?

January 29, 2013 at 3:48 pm 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

January 29, 2013 at 8:31 pm 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

Author

Posts

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

You must be logged in to reply to this topic.