This is a migrated thread and some comments may be shown as answers.

Date Parsing in DataSource Instead of Template

9 Answers 1005 Views
Data Source
This is a migrated thread and some comments may be shown as answers.
Ashleigh L
Top achievements
Rank 1
Ashleigh L asked on 31 Jul 2015, 05:48 PM

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?

9 Answers, 1 is accepted

Sort by
0
Dominik
Top achievements
Rank 1
answered on 31 Jul 2015, 06:11 PM
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.
0
Dominik
Top achievements
Rank 1
answered on 31 Jul 2015, 06:14 PM
var dataSource = new kendo.data.DataSource({
  data: data,
  schema: {
    model: {
      fields: {
        Due: { type: 'date' },
      }
    }
  }
});
0
Ashleigh L
Top achievements
Rank 1
answered on 31 Jul 2015, 06:16 PM
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.
0
Dominik
Top achievements
Rank 1
answered on 31 Jul 2015, 06:25 PM

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}" }]
});

0
Ashleigh L
Top achievements
Rank 1
answered on 31 Jul 2015, 08:36 PM
I'm not using a grid, I'm using a view/template.
0
Rosen
Telerik team
answered on 04 Aug 2015, 04:08 PM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Ashleigh L
Top achievements
Rank 1
answered on 04 Aug 2015, 04:26 PM

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.

0
Rosen
Telerik team
answered on 05 Aug 2015, 10:09 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Ashleigh L
Top achievements
Rank 1
answered on 05 Aug 2015, 03:22 PM
Perfect, thanks Rosen!
Tags
Data Source
Asked by
Ashleigh L
Top achievements
Rank 1
Answers by
Dominik
Top achievements
Rank 1
Ashleigh L
Top achievements
Rank 1
Rosen
Telerik team
Share this question
or