locked
Highlight Grid data based on overdue date RRS feed

  • Question

  • User927770920 posted

    Hi,

    I am using a Grid to output invoice data from a SQL DB.  I am looking for a way to check the date of the Invoice and if the date is 7 days away from payment due highlight that row in Amber. Likewise, if it is overdue, highlight in Red.

    I am using Webmatrix with .cshtml.

    If you require any further information please let me know.

    Many thanks in advance

    Mark

    Monday, May 19, 2014 9:06 AM

Answers

  • User-821857111 posted

    Here's one approach that uses a Razor function to set the css of a span, and jQuery to apply a style to the entire row based on that value

    @{
        var db = Database.Open("Test");
        var invoices = db.Query("SELECT * From Invoices");
        var grid = new WebGrid(invoices);
    }
    
    <!DOCTYPE html>
    
    <html lang="en">
        <head>
            <meta charset="utf-8" />
            <title></title>
            <script type="text/javascript" src="/scripts/jquery-1.7.2.min.js"></script>
            <script>
                $(function () {
                    var rows = $('tr');
                    rows.each(function () {
                        var style = $(this).find('span').prop('class');
                        if (style != 'undefined') {
                            $(this).addClass(style);
                        }
                    })
                })
            </script>
            <style>
                .red{background-color:  red; color:  white;}
                .amber{background-color: #ff6a00;}
            </style>
        </head>
        <body>
            @grid.GetHtml(
                columns: grid.Columns(
                grid.Column("ID"),
                grid.Column("Amount"),
                grid.Column("DateDue", format:@<span class="@IsOverdue(item.DateDue)">@item.DateDue</span>)
                )
            )
        </body>
    </html>
    @functions{
        static string IsOverdue(DateTime dt){
            if(dt < DateTime.Now){
                return "red";
            }
            if(dt < DateTime.Now.AddDays(7)){
                return "amber";
            }
            return null;
        }
    }
    



    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, May 19, 2014 9:54 AM

All replies

  • User-821857111 posted

    Here's one approach that uses a Razor function to set the css of a span, and jQuery to apply a style to the entire row based on that value

    @{
        var db = Database.Open("Test");
        var invoices = db.Query("SELECT * From Invoices");
        var grid = new WebGrid(invoices);
    }
    
    <!DOCTYPE html>
    
    <html lang="en">
        <head>
            <meta charset="utf-8" />
            <title></title>
            <script type="text/javascript" src="/scripts/jquery-1.7.2.min.js"></script>
            <script>
                $(function () {
                    var rows = $('tr');
                    rows.each(function () {
                        var style = $(this).find('span').prop('class');
                        if (style != 'undefined') {
                            $(this).addClass(style);
                        }
                    })
                })
            </script>
            <style>
                .red{background-color:  red; color:  white;}
                .amber{background-color: #ff6a00;}
            </style>
        </head>
        <body>
            @grid.GetHtml(
                columns: grid.Columns(
                grid.Column("ID"),
                grid.Column("Amount"),
                grid.Column("DateDue", format:@<span class="@IsOverdue(item.DateDue)">@item.DateDue</span>)
                )
            )
        </body>
    </html>
    @functions{
        static string IsOverdue(DateTime dt){
            if(dt < DateTime.Now){
                return "red";
            }
            if(dt < DateTime.Now.AddDays(7)){
                return "amber";
            }
            return null;
        }
    }
    



    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, May 19, 2014 9:54 AM
  • User927770920 posted

    Many thanks for your swift response Mike!

    Exactly what I was looking for.

    Worked like a charm.

    Regards

    Mark

    Monday, May 19, 2014 10:29 AM