jQWidgets Forums

This topic contains 4 replies, has 3 voices, and was last updated by Peter Stoev 11 years, 11 months ago.

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

Author

Date format after editing a cell Posts

June 14, 2012 at 9:53 am Date format after editing a cell #4921

Participant

I display all my date entries by using the following format:
formatString: "yyyy-MM-dd"

After editing them with the DateTimeInput editor it displayed a long string which include (GMT Standard Time) at the end, something that I do not want!

I set the same formatstring, namely:
formatString: "yyyy-MM-dd"
in the initeditor and I looked at functions like cellendedit, but it does not seems to me that you set the format there.

Should the cell not use the same display format which you specified before editing, unless you deliberating changed that?

June 14, 2012 at 10:25 am Date format after editing a cell #4922

Peter Stoev

Keymaster

Hi jmarais,

In order to set the formatting of a Date Column, you need to set the column’s cellsformat property to a format string. The value of the cellsformat property is automatically synchronized with jqxDateTimeInput’s formatString.

Take a look at the “Ship Date” column’s initialization in the code below::

<!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.7.2.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.edit.js"></script>  
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxnumberinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/globalization/jquery.global.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getTheme();
            // prepare the data
            var data = generatedata(200);
            var source =
            {
                localdata: data,
                datatype: "array",
                updaterow: function (rowid, rowdata) {
                    // synchronize with the server - send update command   
                }
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                editable: true,
                theme: theme,
                selectionmode: 'singlecell',
                columns: [
                  { text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 90 },
                  { text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 90 },
                  { text: 'Product', columntype: 'dropdownlist', datafield: 'productname', width: 177},
                  { text: 'Available', datafield: 'available', columntype: 'checkbox', width: 67 },
                  { text: 'Ship Date', datafield: 'date', columntype: 'datetimeinput', width: 90, cellsalign: 'right', cellsformat: 'yyyy-MM-dd',
                      validation: function (cell, value) {
                          var year = value.getFullYear();
                          if (year >= 2013) {
                              return { result: false, message: "Ship Date should be before 1/1/2013" };
                          }
                          return true;
                      }
                  },
                  { text: 'Quantity', datafield: 'quantity', width: 70, cellsalign: 'right', columntype: 'numberinput',
                      validation: function (cell, value) {
                          if (value < 0 || value > 150) {
                              return { result: false, message: "Quantity should be in the 0-150 interval" };
                          }
                          return true;
                      },
                      initeditor: function (row, cellvalue, editor) {
                          editor.jqxNumberInput({ decimalDigits: 0, digits: 3 });
                      }
                  },
                  { text: 'Price', datafield: 'price', width: 65, cellsalign: 'right', cellsformat: 'c2', columntype: 'numberinput',
                      validation: function (cell, value) {
                          if (value < 0 || value > 15) {
                              return { result: false, message: "Price should be in the 0-15 interval" };
                          }
                          return true;
                      },
                      initeditor: function (row, cellvalue, editor) {
                          editor.jqxNumberInput({ digits: 3 });
                      }
                  }
                ]
            });
            // events
            $("#jqxgrid").bind('cellbeginedit', function (event) {
                var args = event.args;
                $("#cellbegineditevent").html("Event Type: cellbeginedit, Column: " + args.datafield + ", Row: " + (1 + args.rowindex) + ", Value: " + args.value);
            });
            $("#jqxgrid").bind('cellendedit', function (event) {
                var args = event.args;
                $("#cellendeditevent").html("Event Type: cellendedit, Column: " + args.datafield + ", Row: " + (1 + args.rowindex) + ", Value: " + args.value);
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="jqxgrid"></div>
        <div style="margin-top: 30px;">
            <div id="cellbegineditevent"></div>
            <div style="margin-top: 10px;" id="cellendeditevent"></div>
       </div>
    </div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

July 5, 2013 at 1:01 pm Date format after editing a cell #24599

ssp

Participant

Hi,,

I have to obtain the date value from the database which is given in the format YYYY-MM-DD and display in the jqxgrid in the same format,,,

I have used the following code:

text : ‘Start Date’, id: ‘startDatePopUp’,datafield : ‘startDate’, columntype: ‘datetimeinput’, cellsformat: YYYY-MM-DD’, align : ‘center’, width : 150, cellsalign : ‘center’,

but it is being displayed in the grid as YYYY-MM-DD 00:00:00.0

how will I display the date value in the format YYYY-MM-DD in the jqxgrid??

Thanks & Regards,

ssp

July 9, 2013 at 11:52 am Date format after editing a cell #24814

ssp

Participant

Hi Peter,

As I am facing the same problem with Timestamp displaying,

I tried your above example, but if the width of the “Ship Date” is increased to 150, I still could see timestamp being displayed in the grid cell….

what may be the reason??

Thanks & Regards,

ssp

July 9, 2013 at 11:55 am Date format after editing a cell #24815

Peter Stoev

Keymaster

Hi,

“cellsformat: YYYY-MM-DD’” is incorrect format string. It should be: ‘yyyy-MM-dd’. In addition, if you experience an issue, then please provide a sample which demonstrates it. Otherwise, we cannot test your scenario.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.