Date Parsing in DataSource Instead of Template

10 posts, 0 answers
  1. Ashleigh L
    Ashleigh L avatar
    113 posts
    Member since:
    Jun 2012

    Posted 31 Jul 2015 Link to this post

    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?

  2. Dominik
    Dominik avatar
    28 posts
    Member since:
    May 2015

    Posted 31 Jul 2015 in reply to Ashleigh L Link to this post

    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.
  3. Kendo UI is VS 2017 Ready
  4. Dominik
    Dominik avatar
    28 posts
    Member since:
    May 2015

    Posted 31 Jul 2015 Link to this post

    var dataSource = new kendo.data.DataSource({
      data: data,
      schema: {
        model: {
          fields: {
            Due: { type: 'date' },
          }
        }
      }
    });
  5. Ashleigh L
    Ashleigh L avatar
    113 posts
    Member since:
    Jun 2012

    Posted 31 Jul 2015 in reply to Dominik Link to this post

    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.
  6. Dominik
    Dominik avatar
    28 posts
    Member since:
    May 2015

    Posted 31 Jul 2015 in reply to Ashleigh L Link to this post

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

  7. Ashleigh L
    Ashleigh L avatar
    113 posts
    Member since:
    Jun 2012

    Posted 31 Jul 2015 in reply to Dominik Link to this post

    I'm not using a grid, I'm using a view/template.
  8. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 04 Aug 2015 Link to this post

    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!
     
  9. Ashleigh L
    Ashleigh L avatar
    113 posts
    Member since:
    Jun 2012

    Posted 04 Aug 2015 in reply to Rosen Link to this post

    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.

  10. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 05 Aug 2015 Link to this post

    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!
     
  11. Ashleigh L
    Ashleigh L avatar
    113 posts
    Member since:
    Jun 2012

    Posted 05 Aug 2015 in reply to Rosen Link to this post

    Perfect, thanks Rosen!
Back to Top
Kendo UI is VS 2017 Ready