We Keep Coding

Kendo jQuery Spreadsheet Date Values on Save

So I have a Kendo jQuery spreadsheet that is bound to a remote datasource. The fields in the spreadsheet are also data-driven, so I have a process in place that will loop over all of the columns and apply a validation to the column based on the type of data. When I apply the validation to date values it seems like all the values are converted into JavaScript Date objects.
This causes me two problems. 1. When I go to save the data it sends the date object to the server, not a string of the mm/dd/yyyy. 2. It treats blank values as 12/30/1899.
Here is a portion of the code that I use:
var record_id = 1;
var columnData = {
field_name1: {"title":"FIELD1", "type":"string", "width":50, "order":0},
field_name2: {"title":"FIELD2", "type":"date", "width":50, "order":1}
};
var columnMap = ['field_name1', 'field_name2'];
// The following code executes in the event that is triggered when the data is successfully read.
function readSource(e) {
$.ajax({
url: './spreadsheet.php',
data: { id: record_id, action: 'list' },
dataType: 'json',
method: 'POST',
success: function(result) {
e.success(result);
$.each(columnData, function(field, data) {
var range = toColumnName(columnMap.indexOf(field) + 1) + '2:' + toColumnName(columnMap.indexOf(field) + 1) + (result.count + 1);
var validator = false;
var format = '';
switch (data.type) {
case 'date': {
validator = {
dataType: 'date',
comparerType: 'between',
from: 'DATEVALUE("1/1/2000")',
to: 'DATEVALUE("1/1/2100")',
allowNulls: true,
showButton: true,
type: 'reject',
titleTemplate: 'Date Error',
messageTemplate: 'Enter a valid date between 1/1/2000 and 1/1/2100.'
};
format = 'mm/dd/yyyy';
break;
}
}
if (validator !== false) {
sheet.range(range).validation(validator);
}
if (format === '') {
sheet.range(range).format(format);
}
});
}
});
}
// On save
function submitSource(e) {
$.ajax({
url: './spreadsheet.php',
data: { action: 'update', id: record_id, records: e.data },
method: 'POST',
dataType: 'json',
success: function (result) {
e.success(result.Updated, 'update');
e.success(result.Created, 'create');
e.success(result.Destroyed, 'destroy');
}
}
// Convert index to column letter (1 => 'A', 27=>'AA')
function toColumnName(num) {
for (var ret = '', a = 1, b = 26; (num -= a) >= 0; a = b, b *= 26) {
ret = String.fromCharCode(parseInt((num % b) / a) + 65) + ret;
}
return ret;
}
I will include a link to a screenshot that shows what happens to cells that should be blank when I click the save button. The first row in the image had dates that were populated. The rows below that were blank.
What needs to change to allow the appropriate date values to be sent back to the server and how can I avoid the trouble with the blanks?

The spreadsheet.php code probably doesn't properly format the date.
December 30, 1899 is the epoch date for Microsoft Excel and others:
https://en.wikipedia.org/wiki/Epoch_(reference_date)#Notable_epoch_dates_in_computing
So you are probably feeding the value "1" instead of null.

How to disable dates in jQuery UI Datepicker after onChangeMonthYear

I've seen solutions using the onBeforeShowDay but that is not what I need. What I need is when changing the either Month or Year I need to get a list of dates via AJAX and then use that list to disable the days in the current month.
Example
$('#date_input').datepicker( "option", "onChangeMonthYear", function(year,month,inst) {
// Perform AJAX call and get the list
$.ajax({
url: ajaxUrl,
type: "post",
data: serializedData,
async: false,
success: function (data) {
// Here is where I want to update the display
// and use the returned data as the basis for the disabled list
// of the current month.
// Let's say:
// data = ['2015-10-15','2015-10-25','2015-10-13'];
}
});
});
EDIT
Thanks for the solution. To be specific, I was using the dynamic approach by adding the callback dynamically. Also it is important that AJAX call need to have async: false in order to get the correct data set on the array.
$('#date_input').datepicker( "option", "onChangeMonthYear", function(year,month,inst) {
// The ajax call.
});
So I just followed the answer and added:
$('#date_input').datepicker( "option", "beforeShowDay", function(date) {
// Update the list.
});
Again, much thanks!

you can still use the onBeforeShowDay, since it will get called before the datepicker is displayed, because changing months will make the datepicker to render again.
You can use an array that stores the list of dates and change this based on the result from your ajax call. e.g
//at first only september dates will be disabled.
var array = ["2015-09-23","2015-09-24","2013-09-16"];
$('input').datepicker({
onChangeMonthYear: function(year, month, inst) {
// Perform AJAX call and get the list
//override the array, and now the october dates will be disabled.
$.ajax({
url: ajaxUrl,
type: "post",
data: serializedData,
async: false,
success: function (data) {
array = data; //["2015-10-23","2015-10-24","2013-10-16"];
}
});
},
beforeShowDay: function (date) {
var string = jQuery.datepicker.formatDate('yyyy-mm-dd', date);
return [array.indexOf(string) == -1 ]
}
});
here is the working fiddle

How do I get the changed element in a multiselect, using KendoUI?

I have a multiselect-list that acts as holder for a list of tags. I can't seem to figure out how to properly get the value of the item being changed and passed along with the changed-event. Here's my Kendo multiselect:
#(Html.Kendo().MultiSelect()
.Name("tags")
.Placeholder("No tags selected for this unit")
.BindTo(new SelectList(Model.TagsAvailable))
.Events(e => e
.Select("select")
.Change("change"))
.Value(Model.TagsSelected.ToArray())
)
And here are my js-methods:
function select(e) {
var dataItem = this.dataSource.view()[e.item.index()];
var param = dataItem.Text;
var url = '/UnitDetails/TagUnit/#Model.UnitId';
$.ajax({
url: url,
data: { selectedItem: param },
type: 'GET',
dataType: 'json',
success: function (data) {
// ...
},
error: function () {
// ...
}
});
};
function change(e) {
var dataItem = this;
var param = dataItem.element.context.innerText;
var url = '/UnitDetails/UnTagUnit/#Model.UnitId';
$.ajax({
url: url,
data: { selectedItem: param },
type: 'GET',
dataType: 'json',
success: function (data) {
// ...
},
error: function () {
// ...
}
});
};
My problem beeing that I feel the assignment of param is just quick and dirty. Surely, there must be some other, more correct way of going about this?

There is no easy way (afaik) for knowing the changes. So, let do it by ourselves.
First, I'm going to save the old value using the following function.
function saveCurrent(multi) {
multi._savedOld = multi.value().slice(0);
}
Where multi is the multi-select that we pass to the function as argument (so you can use the function for multiple multiselects).
Then, you need to implement change as follow:
change : function (e) {
// Retrieve previous value of `multiselect` saved using previous function
var previous = this._savedOld;
// These are current values.
var current = this.value();
// Let's save it for the next time
saveCurrent(this);
// The difference between previous and current are removed elements
var diff = $(previous).not(current).get();
console.log("removed", diff);
// The difference between current and previous, are added elements
diff = $(current).not(previous).get();
console.log("added", diff);
}
Running example here http://jsfiddle.net/OnaBai/MapVN/

Nice answer OnaBai! very useful and helpful.
I had the same Nickla's problem.
But, I needed to "save current values" at dataBound event. And it works (logging the changed values).
If you start deleting an item, it fails because the function recognizes the "change" as an "item add".
This is what I did
function dataBound(ev) {
saveCurrent(this);
}
function saveCurrent(multi) {
multi._savedOld = multi.value().slice(0);
}
function change(ev) {
var previous = this._savedOld;
var current = this.value();
saveCurrent(this);
var diff = $(previous).not(current).get();
console.log("removed", diff);
var removedSkill = diff;
console.log("removedSkills", removedSkill);
diff = $(current).not(previous).get();
var addedSkill = diff;
console.log("added", diff);
console.log("addedSkills", addedSkill);
if (addedSkill.length > 1 || removedSkill.length > 1) {
if (addedSkill.length > 1) {
addedSkill = addedSkill[addedSkill.length - 1];
alert("Added skill code: " + addedSkill.toString());
}
if (removedSkill.length > 1) {
removedSkill = removedSkill[removedSkill.length - 1];
alert("Removed skill code: " + removedSkill.toString());
}
}
else {
if (addedSkill.length > 0) {
alert("Added skill code: " + addedSkill.toString());
}
if (removedSkill.length > 0) {
alert("Removed skill code: " + removedSkill.toString());
}
}
$.ajax({
url: "SomeUrl",
type: "POST",
dataType: "json",
contentType: "application/json",
data: JSON.stringify({ removedSkill: removedSkill, addedSkill: addedSkill })
});
}
Thanks again!
Iván

Passing data from variables in JavaScript

I have created a small JavaScript application with the following function that calls a function to retrieve JSON data:
var months = function getMonths(){
$.getJSON("app/data/Cars/12Months", function (some_data) {
if (some_data == null) {
return false;
}
var months_data = new Array();
var value_data = new Array();
$.each(some_data, function(index, value) {
months_data.push(index);
value_data.push(value);
});
return[months_data,value_data];
});
}
I have then created, in the same file, another function that does something when a specific page is loaded. In this function the variable 'months' is passed to the variable 'result'.
$(document).on('pageshow', '#chartCar', function(){
$(document).ready(function() {
var result = months;
var date = result[0];
var values = result[1];
//more code here...
});
}
the problem is that, based on the debugger, the getMonths() function works fine and produces the expected output, but the 'result' variable in the second function can't obtain the values passed to it by the variable 'months'. Do you know how to solve this issue?

The problem is that you $.getJSON() function is asynchronous, so your data gets loaded later then you read it. There're two workarounds:
1. Replace your $.getJSON with $.ajax and setting async: false;
2. Put your code in $.getJSON callback:
var months = function getMonths(){
$.getJSON("app/data/Cars/12Months", function (some_data) {
if (some_data == null) {
return false;
}
var months_data = new Array();
var value_data = new Array();
$.each(some_data, function(index, value) {
months_data.push(index);
value_data.push(value);
});
var date = months_data;
var values = value_data;
//more code here..
})
}

There must be a syntax error.
replace
});
}
With
});
});

$.getJSON() is a wrapper around $.ajax which is async by default. But you treat it like a sync call.
You can use $.ajaxSetup()
$.ajaxSetup( { "async": false } );
$.getJSON(...)
$.ajaxSetup( { "async": true } );
or use $.ajax with async: false
$.ajax({
type: 'GET',
url: 'app/data/Cars/12Months',
dataType: 'json',
async: false,
success: function(some_data) {
//your code goes here
}
});
or if possible change the behavior of your app so that you process your data in a callback function.

using datepicker('refresh') on ajax success and inline datepicker's beforeShowDay?

I'm using jquery and jquery ui 1.8.7. I'm creating an inline datepicker when the page loads, then in my ajax success function, I'm calling $('#mydiv').datepicker('refresh'); (I'll post code below).
If the data has been returned from ajax (eg. on the refresh), beforeShowDay calls the highlightDays() function. I know that I'm hitting highlightDays with the correct data twice before everything crashes to a halt and I get an error "TypeError: Cannot read property 0 of undefined".
It seems like the events array is being destroyed after a certain amount of time, but I don't know enough about ajax to really say what's happening. Can anyone point me in the right direction to fix this?
function highlightDays(date) {
var day = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
console.log(typeof(events)); // This will return as an object twice before throwing an the above mentioned error
if($.inArray(day, events) !== -1) {
return new Array(true, '');
} else {
return new Array(false, '');
}
}
function getEventData() {
return $.ajax({
url: Drupal.settings.basePath + 'correct_path',
data: search+'&path='+window.location.pathname,
dataType: 'json',
type: 'POST',
success: function(data, textStatus, jqXHR) {
// save our returned data
events = new Object();
events = data;
$('#mydiv').datepicker("refresh");
}
});
}
function createDatepicker() {
// Attach datepicker to the parent div so it returns as
// inline.
$('#mydiv').datepicker({
dateFormat: 'yy-mm-dd',
speed: 'immediate',
altField: '#edit-date-filter-value-datepicker-popup-1',
beforeShowDay: function(date) {
if(typeof (_event_days) === 'undefined') {
return new Array(true, '');
} else {
highlightDays(date);
}
},
});
$('#myinput').hide();
}
getEventData();
createDatepicker();

The following code is what ended up working for me. Two big differences. Reworking the highlightDays function and adding all data returned from the ajax call to a global events array, to be used later in highlightDays.
var events = [];
function highlightDays(date) {
var dayClass = [true, ''];
var date = $.datepicker.formatDate('yy-mm-dd', new Date(date));
$.each(events, function(key, value) {
if (date === value[0]) {
dayClass = [true, "ui-state-highlight"];
return dayClass;
} else {
return dayClass;
}
});
return dayClass;
}
function getEventData() {
return $.ajax({
url: 'myurl',
data: search+'&path='+window.location.pathname,
dataType: 'json',
type: 'POST',
success: function(data, textStatus, jqXHR) {
$.each(data, function (index, value) {
events.push([value]);
});
// popup is the date input field
// attaching datepicker to the parent div makes
// it an inline picker
popup.parent().datepicker('refresh');
}
});
}
function createDatepicker() {
popup.parent().datepicker({
dateFormat: 'yy-mm-dd',
beforeShowDay: highlightDays
});
popup.hide();
}
function getSearchString() {
// Return a search string to pass to the ajax call
var search = window.location.search;
if(search !== '') {
while(search.charAt(0) === '?') {
// remove the leading question mark in the search string
search = search.substr(1);
}
}
return search;
}
// If our popup selector exists, create the datepicker and get event data
if (popup.length) {
var search = getSearchString();
getEventData();
createDatepicker();
}