Setting a column default value in the kendo ui grid to DateTime.Now

Question

I wish to make a grid within my visual studio program to display DateTime.now as a default but it's not working.

The column within the Kendo grid:

columns.Bound(c => c.CurrentDate).EditorTemplateName("Date").Format("{0:dd/MM/yy}");

The declaration within my model:

public DateTime CurrentDate { get; set; }

When I load the web page the value of the text box within the column is set to the current date but the value is not displayed.

My Kendo UI Grid Code:

@(Html.Kendo().Grid<Kendo_UI_Bootstrap_Integration.Models.EID>()
        .Name("EIDGrid")
        .Columns(
            columns =>
            {

                columns.Bound(c => c.Breed);
                columns.Bound(c => c.Gender);
                columns.Bound(c => c.AnimalId);
                columns.Bound(c => c.EIDDate).EditorTemplateName("Date").ClientTemplate(DateTime.Now.ToString("dd/MM/yy"));//.ClientTemplate(DateTime.Now.ToString()).Format("{0:dd/MM/yy}").EditorTemplateName("Date");//.EditorTemplateName("Date")
                columns.Bound(c => c.EIDNum);
                columns.Bound(c => c.BatchNum);
            }
    )
    .Scrollable(s => s.Height("350px"))
    .Editable(editable => editable.Mode(GridEditMode.InCell).DisplayDeleteConfirmation(false))
    .Pageable()
    .DataSource(datasource => datasource
        .Ajax()
        .Model(model =>
        {
            model.Id(p => p.SireGuid);
            //model.Field(p => p.SireGuid).DefaultValue(Guid.Empty);
            //model.Id(p => p.EIDDate);
            //model.Field(p => p.EIDDate).Editable(true);

        })
        .PageSize(100)
        .Batch(true)
        .Sort(s => s.Add("Name"))
    ) )

My Model code:

using System; 
using System.Collections.Generic; 
using System.Globalization; 
using System.Linq; 
using System.Web;

namespace Kendo_UI_Bootstrap_Integration.Models {
   
    public class EID
    {

        public string Breed { get; set; }
        public string Gender { get; set; }
        public string AnimalId { get; set; }
        public int EIDNum { get; set; }
        public int BatchNum { get; set; }

        public DateTime EIDDate { get; set; }
        

        
       
        public int ClusterIndex
        {
            get; set;
        }
        public System.Guid SireGuid { get; set; }
    }
 }

My Controller Code:

using System;
using System.Collections.Generic;
using System.Linq; using System.Web; 
using System.Web.Mvc;

namespace Kendo_UI_Bootstrap_Integration.Controllers {
    public class EidController : Controller
    {
        // GET: Eid
        public ActionResult EidView ()
        {
            return View();
        }
    }
}

Could you not assign a default value to the CurrentDate auto property? e.g. public DateTime CurrentDate { get; set; } = DateTime.Now — Sandman
Managed to get it working using columns.Bound(c => c.CurrentDate).ClientTemplate(DateTime.Now.ToString("dd/MM/yy")); - but I cannot edit the date of the columns it display in, any idea why? — GeorgeB
ClientTemplate method is designed to define look of your data - not data itself. To set default date uou have to define default property value in the model layer (as Sandman said) or modify your dataSource object in javascript when your data is bound. — Przemysław Kleszcz
public DateTime CurrentDate { get; set; } = DateTime.Now; makes the columns blank for me - sorry if what I ask seems stupid, I'm new to this — GeorgeB
Could you provide more details how is your grid beeing defined? Maybe there is something wrong with mvc wrapper configuration? — Przemysław Kleszcz

Przemysław Kleszcz Przemysław Kleszcz · Accepted Answer · 2017-07-04T17:06:51

Try something like this:
Model:

public class Eid
{
    public string Breed { get; set; }    
    public DateTime EIDDate { get; set; } = DateTime.Now;
    public string SireGuid { get; set; }
}

MVC wrapper:

@(Html.Kendo().Grid<KendoUIApp3.Models.Eid>()
    .Name("EIDGrid")
    .Columns(columns =>
    {
        columns.Bound(c => c.Breed);            
        columns.Bound(c => c.EIDDate).Format("{0:dd/MM/yy}");            
    })
    .Scrollable(s => s.Height("350px"))
    .Editable(editable => editable.Mode(GridEditMode.InCell).DisplayDeleteConfirmation(false))
    .Pageable()
    .Groupable()
    .Sortable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model =>
        {
            model.Id(p => p.SireGuid);
        })
        .Read(read => read.Action("EIDRead", "Home"))
        .PageSize(100)
        .Batch(true)
        .Sort(s => s.Add("Breed"))
    ))

Controller:

public ActionResult EIDRead([DataSourceRequest] DataSourceRequest request)
    {
        var collection = new List<Eid>()
        {
           new Eid
           {
               Breed = "test",
               SireGuid = Guid.NewGuid().ToString()
           }
        };

        return Json(collection.ToDataSourceResult(request));           
    }

You have to define a way your grid is populated by data. In this case I use .Read function to query controller method EIDRead for rows. Of course you can pass your data directly to the grid, but this method is much easier for maintainance.

Setting a column default value in the kendo ui grid to DateTime.Now

1 Answers