Comparing Dates in Kendo HTML Grid Client Template

Question

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?

score 2 · Answer 1 · answered May 11 '18 at 08:28

2

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

answered May 11 '18 at 08:28

CMartins

3,247
5
38
53

1

Thanks, @Carlos - that worked! Though now I added that to a couple other columns that use .Format and the format specified is not taking effect. Any ideas why or how I can apply it in the client template if need be? – Andy May 11 '18 at 20:55
can you please share the expected result of the format and the one you are having? Maybe sharing the new columns code. – CMartins May 12 '18 at 07:37
1

I put the formatting of those columns in the client template instead and that worked. Thanks! – Andy May 14 '18 at 17:06
1

columns.Bound(p => p.BalanceDue).ClientTemplate( "#if(BalanceDue > 0 && kendo.toString(new Date(DueDate), 'MM/dd/yyyy') < '" + @CurDate + "') {# " + "#: kendo.toString(BalanceDue, 'c') #" + "#} else {#" + "#: kendo.toString(BalanceDue, 'c') #" + "#} #" ).Title("Balance Due").Width(125).HtmlAttributes(new { style = "text-align:right;" }); – Andy May 14 '18 at 17:07

score 1 · Answer 2 · answered May 11 '18 at 08:27

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 #" +
"#} #"

score 0 · Answer 3 · answered May 18 '18 at 17:51

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();
}

I tried this exact thing, removing the balance due part and substituting my own date field and it fails, but I believe that's because my field is nullable datetime rather than just datetime. — jrichview, Jan 29 '21 at 15:55

Comparing Dates in Kendo HTML Grid Client Template

3 Answers3