Date Parsing in DataSource Instead of Template

[Ashleigh L]

I currently have a template that displays a date (among other things). When I was initially setting this up, I was told to use "#= kendo.toString(kendo.parseDate(data.CompletedDate), 'dd-MMM-yyyy') #" to display this date in the required format, which works perfectly.

Now I am attempting to move that date formatting into the datasource, in anticipation of future functionality. I found the dataSource -- schema -- parse functionality and thought it would work for what I wanted, but the formatting isn't actually working.

Datasource:

var datasource = new kendo.data.DataSource({
    transport: {
        read: {
            type: "GET",
            url: "/MainController.cfc?method=getCourses",
            processData: true,
            dataType: "json",
            data: {
                CourseData: JSON.stringify(course_data)
            }
        }
    },
    schema : {
        type: "json",
        data: "Courses",
        parse: function (data) {
            $.map(data, function (item, index) {
                if (typeof(item.Due) !== "undefined" && item.Due != null) {
                    item.Due = kendo.parseDate(item.Due, "dd-MMM-yyyy");
                }
            });

            return data;
        }
    }
});

Here's a sample of the JSON being returned to the datasource:

{"Courses":[{"HasTasks":1,"EnrollmentSubscription":0,"IncompletePrereqs":0,"AllowReenroll":0,"GradeDisplay"
:1,"CompletionAccess":1,"EnrollType":"Enrolled","Due":"07\/23\/2015","CompletedDate":"","SelfEnrollCount"
:0,"EnrolledBy":331786,"HasAssessment":0,"SubscriptionExpired":0,"Completed":0,"EnrollmentGroup":0,"DueStatus"
:"","Tag":"","Type":"Online","PreviouslyComplete":1,"Certificate":1,"Name":"Completed (Auto re-enroll
)","Grade":"","Started":1,"Progress":0.0,"Image":"","AULMRID":501507,"MergeDoc":0,"Passed":0,"LearningModuleID"
:20437,"CourseID":5570,"ExpirationAccess":1}]}

When the template is displayed, the date is showing in mm/dd/yyyy format, not the specified dd-MMM-yyyy format. I copied the format string directly from the template code, so what's the problem?

[Dominik]

you need to make the "type" for the column a date and you won't have to do any explicit date parsing the grid will handle it.

[Dominik]

var dataSource = new kendo.data.DataSource({
  data: data,
  schema: {
    model: {
      fields: {
        Due: { type: 'date' },
      }
    }
  }
});

[Ashleigh L]

Except if I do that, I get a general Javascript date [ie. Thu Jul 23 2015 00:00:00 GMT-0500 (Central Standard Time)] which I don't want. I've tried specifying the type and then using the schema parse, but it still doesn't work.

[Dominik]

Okay I understand what you're trying to do... you need to format the column not the data. 

 

$("#grid").kendoGrid({
  dataSource: dataSource,
  columns: [
    { field: 'Due', title: "Due Date", format: "{0:dd/MM/yyyy}" }]
});

[Ashleigh L]

I'm not using a grid, I'm using a view/template.

[Rosen]

Hello shimmoril,

If I understood your question correctly, you want to re-format the date displayed using the schema parse function. In order to do so, you will need to first use the kendo.parseDate to parse the date and kendo.toString to produce a string in the appropriate format. The pasted code can be changed similar to the following:

$.map(data, function (item, index) {
    if (typeof(item.Due) !== "undefined" && item.Due != null) {
        item.Due = kendo.toString(kendo.parseDate(item.Due), "dd-MMM-yyyy");
    }
});

Regards,
Rosen
Telerik

 

 

[Ashleigh L]

Thanks for the reply, but I've tried that and it gives me the date in the mm/dd/yyyy format (which is the format being passed to the datasource).

You can see it happening here: http://app.smarteru.com/custom/kendo/index.cfm

Notice the difference between the tile and list views. Even though they share a datasource, the list view template is still doing kendo.toString(kendo.parseDate(data.Due), "dd-MMM-yyyy"); whereas the tile view just has #= data.Due # and it's not being formatted correctly.

[Rosen]

Hello shimmoril,

The value of the field is not changed in this case, as the map is not applied on the correct object. The parse method receives the entire response, not only the data portion, thus in your scenario you will need to process the Courses field :

parse: function (data) {
   var courses = data.Courses;

   $.map(courses, function (item, index) {
     if (item.Due != null) {
       item.Due = kendo.toString(kendo.parseDate(item.Due), "dd-MMM-yyyy")
     }
   });

   return data;
 }

Regards,
Rosen
Telerik

 

 

[Ashleigh L]

Perfect, thanks Rosen!