Hello Support Team,
We have one date field on the group row summary as shown below.
Column Name: Begin Date
Project Begin Date Aug-17 Sep-17 Oct-17 Nov-17 Dec-17 Jan-18
Project1 Aug-17 10 8 8 9 10 10
Role1 1 2 2 2 2 2
Role2 2 1 1 1 1 1
Role3 3 4 3 3 3 2
Role4 4 1 2 3 4 5
Project2 Sep-17 8 8 9 10 10
Role1 2 2 2 2 2
Role2 1 1 1 1 1
Role3 4 3 3 3 2
Role4 1 2 3 4 5
Grand Total 10 16 16 18 20 20
We want to update the selected date in the Begin date column on change but when focus is moved to another cell the row group refreshes and the previous value of this date field is loaded.
And, sometimes the date picker on this field not coming up.
Code for Begin Date Column:
{
title: "Begin Date",
width: 100,
editor: {
type: 'textbox',
init: dateEditor
},
render: function(ui) {
if (ui.rowData.pq_close != undefined && ui.rowData.pq_children != undefined) {
var bdateObject = $("#begin_date").datepicker("getDate");
var date = $.datepicker.formatDate("M-y", bdateObject);
return "<input type='text' id='proDate' value='" + date + "' style='width:60px;border:none;background:none;'>";
}
}
}
Code for Date Editor:
var dateEditor = function(ui) {
console.log(ui);
var $inp = ui.$cell.find("input"),
grid = this,
validate = function(that) {
console.log(that);
var valid = grid.isValid({
dataIndx: ui.dataIndx,
value: $inp.val(),
rowIndx: ui.rowIndx
}).valid;
if (!valid) {
that.firstOpen = false;
}
};
//initialize the editor
$inp
.on("input", function(evt) {
validate(this);
})
.datepicker({
changeMonth: true,
changeYear: true,
showAnim: '',
minDate: '0',
onSelect: function(dateText, inst) {
this.firstOpen = true;
validate(this);
},
beforeShow: function(input, inst) {
return !this.firstOpen;
},
onClose: function(_date, obj) {
this.focus();
var date = $(this).val();
}
});
}
Please find attached screendhot and URL For JSFiddle
JSFiddle URL:
http://jsfiddle.net/h4rmbx70/3/
