Issue in display a date from JSON data, need to format inside kendo template with dynamic values

4 posts, 0 answers
  1. Karthik
    Karthik avatar
    8 posts
    Member since:
    Sep 2013

    Posted 24 Sep 2013 Link to this post

    I am using dataSource and kendo template to populate a list of details from a api. Below code explain the view and viewmodel to display the data.
    View:

    <div data-role="view" id="myProjectView" data-title="Products List" data-init="myProjectListViewTemplatesInit">
            <header data-role="header">
                <div data-role="navbar">
                    <span data-role="view-title"></span>
                    <a data-align="right" data-role="button" class="nav-button" href="#index">Index</a>
                </div>
            </header>
            <ul id="myProjectCustomListView"></ul>
        </div>
        <script id="myProjectCustomListViewTemplate" type="text/x-kendo-template">
            <h3 class="item-title">Project Name: ${ProjectName}</h3>
            <p class="item-info">Created Date: ${CreateDate}</p>
        </script>
        <script src="scripts/jquery.min.js"></script>
        <script src="scripts/kendo.mobile.min.js"></script>
        <script src="scripts/viewModel/myProjectsViewModel.js"></script>
        <script>var app = new kendo.mobile.Application(document.body);</script>
    viewModel - myProjectsViewModel.js



    function myProjectListViewTemplatesInit(){
         var dataSource = new kendo.data.DataSource({
             transport: {
                 read: {
                     url: "http://127.0.0.1/api/getProjectList",
                      
                     dataType: "json",
                 }
             },
         });
          
         $("#myProjectCustomListView").kendoMobileListView({
             dataSource: dataSource,
             template: $("#myProjectCustomListViewTemplate").html(),
         });
    };
    The above api will return JSON data like below

    [{"ProjectId":2,"ProjectCode":"TestProject","ProjectName":"TestProject","Description":"","CreateDate":"2013-09-13T00:00:00","Owner":"TestProject","StartDate":"2013-09-13T00:00:00","EndDate":"2013-09-13T00:00:00","StatusId":4,"IsActive":true,"ERPCompany":"","TemplateId":0,"DocumentTemplateID":0,"DocMetadataID":null,"IsDeleted":"","ERPCurrency":"$","ProjectMode":"L","DocumentListID":"","RowNum":3,"pagecount-1":null},{"ProjectId":1,"ProjectCode":"TemplateProject","ProjectName":"TemplateProject","Description":"","CreateDate":"2013-09-13T00:00:00","Owner":"Aurigo","StartDate":"2013-09-13T00:00:00","EndDate":"2013-09-13T00:00:00","StatusId":4,"IsActive":true,"ERPCompany":"","TemplateId":0,"DocumentTemplateID":0,"DocMetadataID":null,"IsDeleted":"","ERPCurrency":"$","ProjectMode":"L","DocumentListID":"","RowNum":4,"pagecount-1":null}]
    I want to format the date column(CreateDate: 2013-09-13T00:00:00) like 13/09/2013. Help me in this.
  2. Petyo
    Admin
    Petyo avatar
    2444 posts

    Posted 25 Sep 2013 Link to this post

    Hello Karthik,

    please take a look at this help topic.

    Regards,
    Petyo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Karthik
    Karthik avatar
    8 posts
    Member since:
    Sep 2013

    Posted 26 Sep 2013 Link to this post

    Hi petyo,

    I can't format the date inside the template, by using kendo.toString. It's normally works outside, but inside template it is not replace the value of my variable ${CreateDate}.
  4. Petyo
    Admin
    Petyo avatar
    2444 posts

    Posted 27 Sep 2013 Link to this post

    Hello,

    You should also specify the field type in the datasource schema.

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