Remove Time/TimePicker from Grid

4 posts, 0 answers
  1. Matthew
    Matthew avatar
    6 posts
    Member since:
    Aug 2012

    Posted 20 Jul 2013 Link to this post

    I have a kendo grid that has 3 dates.  The user only cares about the actual date and not the time so I format the date as "MM/DD/YYYY" for what displays.  My issues is when the user clicks into on of the fields to edit, say "CollegeDeadline" they see "12:00 AM" in the date field as well as the time picker because the value stored in the database is obviously a DateTime field.  I want to remove the 12:00 AM and time picker as its useless to the user and confuses them.  I have been searching the past few days and cannot find a clear cut example of removing these items from a grid.  Is there anyway to accomplish this?

     
    @(Html.Kendo().Grid(Model.Progress.PlansProgress) 
    .Name("PlanProgressGrid")   
    .Columns(columns => {       
        columns.Bound(p => p.CollegeName);
        columns.ForeignKey(p => p.ApplicationMilestoneType, Model.Progress.TypeCategories, "CategoryID", "CategoryName")
            .Title("Milestone Type");
        columns.Bound(p => p.ApplicationMilestone);
        columns.Bound(p => p.CollegeDeadline).Format("{0:MM/dd/yyyy}");
        columns.Bound(p => p.StudentDeadline).Format("{0:MM/dd/yyyy}");
        columns.ForeignKey(p => p.MilestoneStatus, Model.Progress.StatusCategories, "CategoryID", "CategoryName")
            .Title("Status");
        columns.Bound(p => p.StatusUpdated).Format("{0:MM/dd/yyyy}");
    })
    .ToolBar(toolbar =>
    {
        toolbar.Save();
    })
    .Editable(editable => editable.Mode(GridEditMode.InCell))
    .Groupable()
    .Sortable()
    .Scrollable()
    .Reorderable(reorder => reorder.Columns(true))
    .Resizable(resize => resize.Columns(true))
    .DataSource(dataSource => dataSource       
        .Ajax()        
        .Batch(true)
        .ServerOperation(false)
        .Events(events => events.Error("error_handler"))
        .Model(model =>
        {
            model.Id(p => p.ID);
            model.Field(p => p.CollegeName).Editable(false);
            model.Field(p => p.ApplicationMilestoneType).Editable(false);
            model.Field(p => p.ApplicationMilestone).Editable(false);
        })
        .Update("Editing_Update", "Applications")
    )
                )
  2. Daniel
    Admin
    Daniel avatar
    2231 posts

    Posted 23 Jul 2013 Link to this post

    Hello,

    You could use the DataType attribute to indicate that the field is a date and that the Date editor template with a datepicker should be used instead of the DateTime template e.g.

    [DataType(DataType.Date)]
    public DateTime CollegeDeadline { get; set; }
    Regards,
    Daniel
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Matthew
    Matthew avatar
    6 posts
    Member since:
    Aug 2012

    Posted 23 Jul 2013 Link to this post

    Duh!  You rock.  That works perfect.  Can't believe I didn't think of that.  
  4. Dina
    Dina avatar
    50 posts
    Member since:
    Feb 2012

    Posted 07 Sep 2017 in reply to Daniel Link to this post

            [DisplayFormat(DataFormatString = "{0:dd.MM.yyyy}", ApplyFormatInEditMode = true)]
            [Display(Name = "Дата выдачи")]
            [DataType(DataType.Date)]
            public DateTime DiplomIssueDate { get; set; }

     

    Date picker for this model gives me time

Back to Top