Displaying Null Value in jqxDateTimeInput

[walker1234Participant]

This is a continued discussion from my other thread that I posted in wrong section. Here is the link to old thread.

As mentioned, buttonclick callback was required in the last post, I am posting most of my code which shows the buttonclick callback and other things. Hopefully this will help in troubleshooting my problem.

Here is my grid code :

 $("#jqxgrid").jqxGrid(
                {
                  source: dataAdapter,
                  width: '550',
                  height: '200',
                  pageable: true,
                  columnsResize: true,
                  columns: [
                     {
                         text: 'Name', datafield: 'name',width:150},
                     {
                       text: 'Start ',
                       cellsrenderer: function (row_, columnfield_, value_, defaulthtml_, columnproperties_) {
						   var formattedDate = "";
                           if (!isEmpty(value_)) {
                               var dateObject = new Date(value_);
                               formattedDate = (dateObject.getMonth() +1) + "/" +dateObject.getDate() + "/" +dateObject.getFullYear();
                           }
                           return "<div class=\"dateColumn\">" +formattedDate + "</div>";
                       },
                       datafield: 'start_date', width: 100
                     },
                     {
                       text: 'End',
                       cellsrenderer: function (row_, columnfield_, value_, defaulthtml_, columnproperties_) {
						   var formattedDate = "";
                           if (!isEmpty(value_)) {
                               var dateObject = new Date(value_);
                               formattedDate = (dateObject.getMonth() + 1) + "/" + dateObject.getDate() + "/" + dateObject.getFullYear();
                           }
                           return "<div class=\"dateColumn\">" + formattedDate + "</div>";
                       },
                       datafield: 'end_date', width: 100
                      },
                      {text: 'Comment', datafield: 'annotator_comment', width: 150},
                      { text: 'Edit', datafield: 'Edit', columntype: 'button', cellsrenderer: function () {
                           return "Edit";
                        }, 
                        buttonclick: function (row) {
                           // open the popup window when the user clicks a button.
                           editrow = row;
                           var offset = $("#jqxgrid").offset();
                           $("#popupWindow").jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60 } });
                           // get the clicked row's data and initialize the input fields.
                           var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow);
                           $("#attributeName").val(dataRecord.name);
                            
                           // Changing Date format for Start Date on Edit Popup 
                          
                           var formatDateAssignedDate = "";
                           var dateObject = new Date(dataRecord.start_date);
                           formatDateAssignedDate = (dateObject.getMonth() + 1) + "/" + dateObject.getDate() + "/" + dateObject.getFullYear();
                           $("#assignedOnDate").val(formatDateAssignedDate);
                         

                           // Changing Date format for End Date on Edit Popup Only if the date value isn't null 
                           if(dataRecord.end_date !== null){ 
                           var formatDateEndDate = "";
                           var dateObject = new Date(dataRecord.end_date);
                           formatDateEndDate = (dateObject.getMonth() + 1) + "/" + dateObject.getDate() + "/" + dateObject.getFullYear();
                           $("#endAssignedOnDate").val(formatDateEndDate);

                           }
                           else{

                            $("#endAssignedOnDate").val(dataRecord.start_date);
                           }

                           console.log("Checking date value: "+dataRecord.end_date);// Prints null on the colsole screen

			   $("#userComment").val(dataRecord.annotator_comment);
                           // show the popup window.
                           $("#popupWindow").jqxWindow('open');
                        }
                       }

                    
                 ]
            });  // END of  $("#jqxgrid").jqxGrid initialization
			
			 // initialize the popup window and buttons.
                $("#popupWindow").jqxWindow({
                    width: 250, resizable: false,  isModal: true, autoOpen: false, cancelButton: $("#Cancel"), modalOpacity: 0.01           
                });
                $("#popupWindow").on('open', function () {
                    //$("#attributeName").jqxInput('selectAll');
                    $("#assignedOnDate").jqxDateTimeInput({ theme: "arctic", formatString: "d",  width: '150px', height: '20px',allowNullDate: true  });
		    $("#endAssignedOnDate").jqxDateTimeInput({ theme: "arctic", formatString: "d", width: '150px', height: '20px',allowNullDate: true  });
                });

As seen above, in the console log , console.log("Checking date value: "+dataRecord.end_date);// Prints null on the colsole screen, I see null value and have added the same value to the associated id associated with it(in the code here : $("#endAssignedOnDate").val(dataRecord.start_date); ) where jqxDateInput is defined.

Does it has something to do with the popup window initialization code written inside this line $("#popupWindow").on('open', function () {?

[HristoParticipant]

Hello walker1234,

To set date in the jqxDateTimeInput you could use setDate method also.
(please, take a look at our API Documentation how to set date of type string)
I would like to suggest you try this separate when you are sure in the result to return this in the main project.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts