My Calculated fields are calculated the first time, but when I refresh the page the are not "calculated" anymore

2 posts, 0 answers
  1. Guillermo
    Guillermo avatar
    20 posts
    Member since:
    Nov 2012

    Posted 04 Jul 2013 Link to this post

    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

                        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">&nbsp;<img src="/Content/images/lowPriority.png" />&nbsp;&nbsp;&nbsp;</span>');
                    }
                    else if (model.Priority === "Regular") {
                        $('[data-uid=' + model.uid + ']' + '>td:first-child').prepend('<span class="staricon">&nbsp;<img src="/Content/images/regularPriority.png" />&nbsp;&nbsp;&nbsp;</span>');
                    }
                    else {
                        $('[data-uid=' + model.uid + ']' + '>td:first-child').prepend('<span class="staricon">&nbsp;<img src="/Content/images/criticalPriority.png" />&nbsp;&nbsp;&nbsp;</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
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2892 posts

    Posted 08 Jul 2013 Link to this post

    Hi Guillermo,

    I am afraid that the provided information is not sufficient enough in order to determine what exactly causes the issues. Generally speaking, your code looks OK. There is a syntax mistake in the DataTimePicker initialization, but it is not likely to causes the error - this widget does not have dataText and dataValue fields.

    Is it possible for you to prepare a small but runnable jsBin sample which demonstrates the issue? In this way I will be able to examine your case in details and assist you further.
    Thank you in advance for the cooperation.

    Regards,
    Alexander Valchev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top