jQWidgets Forums

This topic contains 2 replies, has 2 voices, and was last updated by Peter Sloth 10 years, 1 month ago.

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

Author

Date format in rowselect event Posts

March 25, 2015 at 8:58 pm Date format in rowselect event #69148

Participant

in my app, the date format is dd-MM-yyyy (like 23-03-2015).
It is formatted correctly in the grid. When a row is selected I want to render the data values of the row using a mustache template. But as you can see from the below example, date fields have a strange date format in the rowselect event (e.g. Mon Mar 23 2015 00:00:00 GMT+0100 (W. Europe Standard Time)).

Any ideas why?

thanks

Peter

<!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.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.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" src="../../jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
      $(document).ready(function () {

        var data = '[{"date": "23-03-2015"},{"date": "23-04-2015"}]';

        // prepare the data
        var source =
        {
          datatype: "json",
          datafields: [
              { name: 'date', type: 'date' }
          ],
          localdata: data
        };
        var dataAdapter = new $.jqx.dataAdapter(source);

        $("#jqxgrid").jqxGrid(
        {
          width: 300,
          source: dataAdapter,
          columns: [
              { text: 'date', datafield: 'date', cellsformat: 'dd.MM.yyyy' }
          ]
        });
        
        $("#jqxgrid").on('rowselect', function (event) {
          $("#PreviewPanel").html(event.args.row.date);
        });

      });
    </script>
</head>
<body class='default'>
  <div id='jqxWidget'>
    <div id="jqxgrid"></div>
  </div>
  <div id="PreviewPanel"></div>
</body>
</html>

March 26, 2015 at 5:35 am Date format in rowselect event #69154

Peter Stoev

Keymaster

Hi Peter Sloth,

Dates are stored as JavaScript date Objects which means that event.args.row.date is JavaScript Date Object so the toString() result is correct and expected. If you want to get the String displayed in a cell, you can use the “getcelltext” method.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

March 26, 2015 at 8:49 am Date format in rowselect event #69164

Peter Sloth

Participant

Hi Peter Stoev

thanks, but I don’t believe that I can use that approach. My code looks something like what’s shown below.
As you can see event.args.row is passed to the mustache function along with the some id for the script element to render in the mustache file.

Now, if I set the format I want on the datafield then the event.args.row.date is in the correct format, but then the ‘date’ column in the grid does not sort correctly (it sorts alphabetically and not by date).
Isn’t there a way I can make both things work at the same time?

thanks

//Peter

        if (gridObject.detailsfile) {
            $.Mustache.load(gridObject.detailsfile)
                .done(function () {
                });
        }

        $("#grid").on('rowselect', function (event) {
            $("#PreviewPanel").mustache(gridObject.detailssection, event.args.row, { method: 'html' });
        });

Author

Posts

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

You must be logged in to reply to this topic.