Hello Again =),
I have an issue, I am calculating some fields, and the first time when I load the page with the cache clean, it displays this calculated fields correctly, This is a DateTimePicker inside a Kendo Grid. So when the user click s it we want it to display in an specific format, but after the page has been reloaded or refresh or we go back to the same page, the format of the date is not respected anymore. Do you have any ideas why is this issue created.
Here is my code"
//New WO to schedule grid
workOrdersSchedulingDataSource = new kendo.data.DataSource({
transport: {
read: {
// the remote service url
url: '/sdata/api/dynamic/-/WorkOrders?where=(Status eq \'Unassigned\')&include=Customer,AssignedTo&count=200'
}
},
type: 'sdata',
serverSorting: true,
sort: { field: "Priority", dir: "desc" },
schema: { data: "$resources",
model: {
fields: {$key: { editable: false, defaultValue: "00000000-0000-0000-0000-000000000000" },
Priority: { editable: false, nullable: true },
Customer: { editable: false, nullable: true },
LocationCity: { editable: false, nullable: true },
ServiceDate: { editable: true, nullable: true, type: "date" }, // This is the ones I care about
ServiceEndDate: { editable: true, nullable: true, type: "date" }, // This is the ones I care about
AssignedTo: { editable: true, nullable: true }
}
},
parse: function (data) {
$.each(data.$resources, function(idx, item) {
if (item.AssignedTo == null) {
item.AssignedTo = { $key: "", FirstName: "", LastName: ""} ;
}
});
return data;
}
},
change: function () {
var count = this.total();
$("#workOrdersSchedulingCount").text(count);
if (count == 0) {
$("#zeroWorkOrdersToScheduling").removeClass("displayNone");
$("#workOrdersSchedulingTable").addClass("displayNone");
$("#workOrdersSchedulingFooter").addClass("displayNone");
} else {
$("#zeroWorkOrdersToScheduling").addClass("displayNone");
$("#workOrdersSchedulingTable").removeClass("displayNone");
$("#workOrdersSchedulingFooter").removeClass("displayNone");
$("#unassignedBackground").removeClass("displayNone");
$("#unassignedUnderline").removeClass("displayNone");
}
}
});
var technicianDataSource = new kendo.data.DataSource({
transport: {
read: {
url: "/sdata/api/dynamic/-/servicesuser?where=Role eq 'Technician'&include=user",
}
},
type: 'sdata',
schema: { data: "$resources",
parse: function (data) {
$.each(data.$resources, function(idx, item) {
item['FirstLastName'] = concatFirstLastName(item.User.FirstName, item.User.LastName);
item['Id'] = item.User.$key;
item['FirstName'] = item.User.FirstName;
item['LastName'] = item.User.LastName;
//This is the calculated field I cared about
return data;
}
}
});
var schedulingGrid = $("#workOrdersSchedulingTable").kendoGrid({
dataSource: workOrdersSchedulingDataSource,
pageable: false,
sortable: false,
scrollable: true,
height: 250,
dataBound: function () {
var grid = this;
$.each(grid.tbody.find('tr'), function () {
var model = grid.dataItem(this);
//if Role equals NoRoleAssigned, attach star icon ahead of user name
if (model.Priority === "Low") {
$('[data-uid=' + model.uid + ']' + '>td:first-child').prepend('<span class="staricon"> <img src="/Content/images/lowPriority.png" /> </span>');
}
else if (model.Priority === "Regular") {
$('[data-uid=' + model.uid + ']' + '>td:first-child').prepend('<span class="staricon"> <img src="/Content/images/regularPriority.png" /> </span>');
}
else {
$('[data-uid=' + model.uid + ']' + '>td:first-child').prepend('<span class="staricon"> <img src="/Content/images/criticalPriority.png" /> </span>');
}
});
$("table tr").hover(
function () {
$(this).toggleClass("k-state-hover");
}
);
},
columns: [
{ hidden: true, field: "$key", title: "Key", template: kendo.template($("#tempId").html()) },
{ field: "Priority", title: "Priority", width: "75px"},
{ field: "Customer", title: "Customer", width: "119px", template: "<div style='text-overflow: ellipsis; overflow: hidden; white-space: nowrap;' title='#= Customer.Name #'>#= Customer.Name # </div>"},
{ field: "LocationCity", title: "Location", width: "95px", template: "<div style='text-overflow: ellipsis; overflow: hidden; white-space: nowrap;' title='#= LocationCity #'>#= LocationCity?LocationCity:'N/A' # </div>" },
{ field: "ServiceDate", title: "Start", width: "155px", format: "{0:MM/dd/yyyy hh:mm tt}", template: kendo.template($("#tempStartDate").html()), editor: startDateTimeEditor },
{ field: "ServiceEndDate", title: "End", width: "155px", format: "{0:MM/dd/yyyy hh:mm tt}", template: kendo.template($("#tempEndDate").html()), editor: endDateTimeEditor },
{ field: "AssignedTo", title: "Technician", width: "145px", template: kendo.template($("#tempAssignedTo").html()), editor: assignedToDropDownEditor }
], editable: {
template: null,
createAt: "bottom"
}
});
function startDateTimeEditor(container, options) {
$('<input id="serviceDateEditor" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDateTimePicker({
dataTextField: "ServiceDateCalc",
dataValueField: "ServiceDate"
});
}
function endDateTimeEditor(container, options) {
$('<input id="serviceEndDateEditor" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDateTimePicker({
dataTextField: "ServiceEndDateCalc",
dataValueField: "ServiceEndDate"
});
}
So, it is working for the first time but after that the format gets messy.
Any suggestions? Thank you.
Guillermo Sanchez
I have an issue, I am calculating some fields, and the first time when I load the page with the cache clean, it displays this calculated fields correctly, This is a DateTimePicker inside a Kendo Grid. So when the user click s it we want it to display in an specific format, but after the page has been reloaded or refresh or we go back to the same page, the format of the date is not respected anymore. Do you have any ideas why is this issue created.
Here is my code"
//New WO to schedule grid
workOrdersSchedulingDataSource = new kendo.data.DataSource({
transport: {
read: {
// the remote service url
url: '/sdata/api/dynamic/-/WorkOrders?where=(Status eq \'Unassigned\')&include=Customer,AssignedTo&count=200'
}
},
type: 'sdata',
serverSorting: true,
sort: { field: "Priority", dir: "desc" },
schema: { data: "$resources",
model: {
fields: {$key: { editable: false, defaultValue: "00000000-0000-0000-0000-000000000000" },
Priority: { editable: false, nullable: true },
Customer: { editable: false, nullable: true },
LocationCity: { editable: false, nullable: true },
ServiceDate: { editable: true, nullable: true, type: "date" }, // This is the ones I care about
ServiceEndDate: { editable: true, nullable: true, type: "date" }, // This is the ones I care about
AssignedTo: { editable: true, nullable: true }
}
},
parse: function (data) {
$.each(data.$resources, function(idx, item) {
if (item.AssignedTo == null) {
item.AssignedTo = { $key: "", FirstName: "", LastName: ""} ;
}
});
return data;
}
},
change: function () {
var count = this.total();
$("#workOrdersSchedulingCount").text(count);
if (count == 0) {
$("#zeroWorkOrdersToScheduling").removeClass("displayNone");
$("#workOrdersSchedulingTable").addClass("displayNone");
$("#workOrdersSchedulingFooter").addClass("displayNone");
} else {
$("#zeroWorkOrdersToScheduling").addClass("displayNone");
$("#workOrdersSchedulingTable").removeClass("displayNone");
$("#workOrdersSchedulingFooter").removeClass("displayNone");
$("#unassignedBackground").removeClass("displayNone");
$("#unassignedUnderline").removeClass("displayNone");
}
}
});
var technicianDataSource = new kendo.data.DataSource({
transport: {
read: {
url: "/sdata/api/dynamic/-/servicesuser?where=Role eq 'Technician'&include=user",
}
},
type: 'sdata',
schema: { data: "$resources",
parse: function (data) {
$.each(data.$resources, function(idx, item) {
item['FirstLastName'] = concatFirstLastName(item.User.FirstName, item.User.LastName);
item['Id'] = item.User.$key;
item['FirstName'] = item.User.FirstName;
item['LastName'] = item.User.LastName;
//This is the calculated field I cared about
item['ServiceDateCalc'] = $.dateUtilities.getUtcDate(item.ServiceDate);
//This one too
item['ServiceEndDateCalc'] = $.dateUtilities.getUtcDate(item.ServiceEndDate);
return data;
}
}
});
var schedulingGrid = $("#workOrdersSchedulingTable").kendoGrid({
dataSource: workOrdersSchedulingDataSource,
pageable: false,
sortable: false,
scrollable: true,
height: 250,
dataBound: function () {
var grid = this;
$.each(grid.tbody.find('tr'), function () {
var model = grid.dataItem(this);
//if Role equals NoRoleAssigned, attach star icon ahead of user name
if (model.Priority === "Low") {
$('[data-uid=' + model.uid + ']' + '>td:first-child').prepend('<span class="staricon"> <img src="/Content/images/lowPriority.png" /> </span>');
}
else if (model.Priority === "Regular") {
$('[data-uid=' + model.uid + ']' + '>td:first-child').prepend('<span class="staricon"> <img src="/Content/images/regularPriority.png" /> </span>');
}
else {
$('[data-uid=' + model.uid + ']' + '>td:first-child').prepend('<span class="staricon"> <img src="/Content/images/criticalPriority.png" /> </span>');
}
});
$("table tr").hover(
function () {
$(this).toggleClass("k-state-hover");
}
);
},
columns: [
{ hidden: true, field: "$key", title: "Key", template: kendo.template($("#tempId").html()) },
{ field: "Priority", title: "Priority", width: "75px"},
{ field: "Customer", title: "Customer", width: "119px", template: "<div style='text-overflow: ellipsis; overflow: hidden; white-space: nowrap;' title='#= Customer.Name #'>#= Customer.Name # </div>"},
{ field: "LocationCity", title: "Location", width: "95px", template: "<div style='text-overflow: ellipsis; overflow: hidden; white-space: nowrap;' title='#= LocationCity #'>#= LocationCity?LocationCity:'N/A' # </div>" },
{ field: "ServiceDate", title: "Start", width: "155px", format: "{0:MM/dd/yyyy hh:mm tt}", template: kendo.template($("#tempStartDate").html()), editor: startDateTimeEditor },
{ field: "ServiceEndDate", title: "End", width: "155px", format: "{0:MM/dd/yyyy hh:mm tt}", template: kendo.template($("#tempEndDate").html()), editor: endDateTimeEditor },
{ field: "AssignedTo", title: "Technician", width: "145px", template: kendo.template($("#tempAssignedTo").html()), editor: assignedToDropDownEditor }
], editable: {
template: null,
createAt: "bottom"
}
});
function startDateTimeEditor(container, options) {
$('<input id="serviceDateEditor" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDateTimePicker({
dataTextField: "ServiceDateCalc",
dataValueField: "ServiceDate"
});
}
function endDateTimeEditor(container, options) {
$('<input id="serviceEndDateEditor" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDateTimePicker({
dataTextField: "ServiceEndDateCalc",
dataValueField: "ServiceEndDate"
});
}
So, it is working for the first time but after that the format gets messy.
Any suggestions? Thank you.
Guillermo Sanchez