CODEWITHSUNDEEP
datekendo-uikendo-gridclient-templates
Andy
Andy

Reputation: 646

Comparing Dates in Kendo HTML Grid Client Template

I need to be able to properly compare two dates within the client template of a Kendo HTML Grid. Here is what I have:

                @(Html.Kendo().Grid<TfInvoicesReturnModel>()
                    .Name("invoiceGrid")
                    .DataSource(dataSource => dataSource
                                    .Ajax()
                                    .Sort(sort => sort.Add("OrderDate").Descending())
                                    .Read(read => read.Action("Invoices_Read", "Jobs", new { JobNo = Model.JobNo, CustomerNo = Model.CustomerId }))
                                    .Events(events => events.Error("error_handler"))
                                    .Model(model =>
                                    {
                                        model.Id(p => p.InvoiceNo);
                                    })
                                )

                .Columns(columns =>
                {

                    columns.Bound(p => p.InvoiceNo).ClientTemplate(
                         "#if(BalanceDue > 0 && DueDate < " + @CurDate + ") {# " +
                                "<span style='color:red; font-weight:bold'>#: InvoiceNo #</span>" +
                            "#} else {#" +
                                "#: InvoiceNo #" +
                            "#} #"
                        ).Title("Invoice").Width(125);  ...

Where @CurDate is a variable in the view:

String CurDate = DateTime.Now.ToShortDateString();

When I run this, CurDate is correct. But of course the comparison is not working correctly because DueDate is not in the same format. How can I make this work?

Upvotes: 2

Views: 2789

Answers (3)

Andy
Andy

Reputation: 646

This is the code that ultimately worked:

                    columns.Bound(p => p.DueDate).ClientTemplate(
                         "#if(BalanceDue > 0 && new Date(DueDate) < getTodaysDate()) {# " +
                                "<span style='color:red; font-weight:bold'>#: kendo.toString(new Date(DueDate), 'MM/dd/yyyy') #</span>" +
                            "#} else {#" +
                                "#: kendo.toString(new Date(DueDate), 'MM/dd/yyyy') #" +
                            "#} #"
                        ).Title("Due Date");

With this being the function to get today's date in the script section:

function getTodaysDate()
{
    return new Date();
}

Upvotes: 1

CMartins
CMartins

Reputation: 3293

You can achieve this by formatting your date into the needed format.

https://docs.telerik.com/kendo-ui/framework/globalization/dateformatting Here is how:

kendo.toString(new Date(DueDate), "g") // for -> 11/6/2018 12:00 AM

Upvotes: 2

sandro
sandro

Reputation: 217

There are 2 options.

1) You can calculate your condition on server and pass bool variable to client, so your template will be like that:

"#if(DateCheck) {# " +
    "<span style='color:red; font-weight:bold'>#: InvoiceNo #</span>" +
"#} else {#" +
    "#: InvoiceNo #" +
"#} #"

And action "Invoices_Read":

...
.Select(w => new TfInvoicesReturnModel
{
    ...
    DateCheck = w.BalanceDue > 0 && w.DueDate < DateTime.Now.Date
    ...
})
...

2) You should convert your DateTime property to JS date with kendo.parseDate() method from doc to compare dates on client side, so your template will be like that:

"#if(BalanceDue > 0 && DueDate < kendo.parseDate(" + @CurDate + ", YOUR_FORMAT)) {# " +
    "<span style='color:red; font-weight:bold'>#: InvoiceNo #</span>" +
"#} else {#" +
    "#: InvoiceNo #" +
"#} #"

Upvotes: 1

Related Questions