Comparing Dates in Kendo HTML Grid Client Template

kendo grid date filter not working
kendo-grid-date filter angular
kendo grid date filter operators
kendo-grid date filter angular 2
kendo grid date format
kendo grid date filter ignore time mvc
kendo grid date filter not working angular
kendo grid date format mvc

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?

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

Comparing Dates in Kendo HTML Grid Client Template, compare two dates within the client template of a Kendo HTML Grid. Here is what I have: @(Html.Kendo().Grid<TfInvoicesReturnModel>() . Define the client template using Kendo UI Template syntax. The context of the template is the Category entity to which the current Grid row is bound. The template itself contains another Grid which is bound to the Products_Read action. Always call the ToClientTemplate method when using Telerik UI for ASP.NET MVC helpers in a client template.

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

Filter by Date | Kendo UI Grid for jQuery, An example on how to filter date columns in the Kendo UI Grid for jQuery. Use the data-holding field in the columns definition, but provide a template that will  The Kendo UI Templates provide a simple-to-use, high-performance JavaScript templating engine within the Kendo UI toolkit. Templates offer a way to create HTML chunks that can be automatically merged with JavaScript data. They are a substitute for traditional HTML string building in JavaScript. Kendo UI Templates focus on providing essential

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

using formating on a date within a clienttemplate in Kendo UI for , If the column is part of a detailgrid you will need to escape the '#' like below Hopefully this can save someone some time. columns.Bound(o  Date Parsing. Kendo UI exposes methods which convert a specified string to a Date object by using the culture-specific settings. Parsing without Specifying Formats. The kendo.parseDate(string) method converts a string to a JavaScript Date object taking into account the set of default culture formats.

Newest 'client-templates+kendo-ui+kendo-grid' Questions, 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. In this article you can see how to configure the columns.template property of the Kendo UI Grid.

Kendo grid sort by date, The data source sorts the data items client-side unless the serverSorting Ignore Time Portion of DateTime when Grouping | Kendo UI Grid for jQuery How can I Oct 24, 2013 · Kendo ui(Kendoui) sample gird with filter,sort options based on The best option that I've seen so far is to compare with a previous persisted sort. Depending on the browser and computer (templates run on the client machine, so naturally there are variances), Kendo UI Templates are up to 60 times (6000%) faster than jQuery templates. To compare performance results directly, refer to the live JSPerf test .

Kendo template with grid, Kendo MVC Grid date time object format when using in built functions. UI Template; How To: Custom Date Filter Column in Kendo UI Grid (JavaScript) Next, download the Kendo UI for ASP A performance comparison of  Hi i have add Kendo Grid to my project and it works fine but i have try to set an client template to an column to add an value to it if it's null or empty i try : columns.Bound(p =&gt; p.CustomerNa

Comments
  • 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?
  • can you please share the expected result of the format and the one you are having? Maybe sharing the new columns code.
  • I put the formatting of those columns in the client template instead and that worked. Thanks!
  • columns.Bound(p => p.BalanceDue).ClientTemplate( "#if(BalanceDue > 0 && kendo.toString(new Date(DueDate), 'MM/dd/yyyy') < '" + @CurDate + "') {# " + "<span style='color:red; font-weight:bold'>#: kendo.toString(BalanceDue, 'c') #</span>" + "#} else {#" + "#: kendo.toString(BalanceDue, 'c') #" + "#} #" ).Title("Balance Due").Width(125).HtmlAttributes(new { style = "text-align:right;" });