locked
improving dispay of booleans in the WebGrid - icons RRS feed

  • Question

  • User379720387 posted

    In many of my WebGrid booleans are displayed to inform the user of the status of certain bit of information. Below is one such column that shows if a user has confirmed their profile. The WebGrid displays either true or false, which is computer lingo and I am thinking I can improve on that by showing a green check mark or a red question mark.

    I have absolutely no clue how to do this. Any suggestions?

    TIA

    Robert

    P.S.: I am using Razor C#

    grid.Column("IsConfirmed", "Is Paid?"),
    

    Wednesday, July 24, 2013 11:04 AM

Answers

  • User1937807931 posted

    Hello!

    Here is a snippet of code from one of the pages where I use a WebGrid and toggle the bool to determine which image to display;

    grid.Column("UserData.IsLockedOut", header: "Active", style: "narrowColumn", format: (item) =>
                                            {
                                                if (item.UserData.IsLockedOut)
                                                {
                                                    return Html.Raw(string.Format("<text><img src=\"{0}\" alt=\"Image\"/></text>", Url.Content("~/Content/images/OK_Not.png")));
                                                }
                                                else
                                                {
                                                    return Html.Raw(string.Format("<text><img src=\"{0}\" alt=\"Image\"/></text>", Url.Content("~/Content/images/OK.png")));
                                                }
                                            }

    The model I have assigned to the DataSource for this WebGrid and a UserData object, which carries the "IsLockedOut" boolean.  I am actually using this very WebGrid/Page on that Admin side of our website on the "User Details" page.  It quickly shows if a user's account has expired or they've locked themselves out (too many failed password attempts).

    I hope this helps!

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, July 24, 2013 11:39 AM

All replies

  • User1937807931 posted

    Hello!

    Here is a snippet of code from one of the pages where I use a WebGrid and toggle the bool to determine which image to display;

    grid.Column("UserData.IsLockedOut", header: "Active", style: "narrowColumn", format: (item) =>
                                            {
                                                if (item.UserData.IsLockedOut)
                                                {
                                                    return Html.Raw(string.Format("<text><img src=\"{0}\" alt=\"Image\"/></text>", Url.Content("~/Content/images/OK_Not.png")));
                                                }
                                                else
                                                {
                                                    return Html.Raw(string.Format("<text><img src=\"{0}\" alt=\"Image\"/></text>", Url.Content("~/Content/images/OK.png")));
                                                }
                                            }

    The model I have assigned to the DataSource for this WebGrid and a UserData object, which carries the "IsLockedOut" boolean.  I am actually using this very WebGrid/Page on that Admin side of our website on the "User Details" page.  It quickly shows if a user's account has expired or they've locked themselves out (too many failed password attempts).

    I hope this helps!

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, July 24, 2013 11:39 AM
  • User379720387 posted

    Nice! Thanks very much.

    Here is the final product:

    grid.Column("IsCompleted", header: "Closed?", style: "narrowColumn", format: (item) =>
                        {
                        if (item.IsCompleted)
                            {
                            return Html.Raw(string.Format("<text><img src=\"{0}\" alt=\"Image\"/></text>", @Href("~/Images/closed18.png")));
                            }
                        else
                            {
                            return Html.Raw(string.Format("<text><img src=\"{0}\" alt=\"Image\"/></text>", @Href("~/Images/open18.png")));
                            }
                        }),



    Wednesday, July 24, 2013 3:23 PM
  • User-821857111 posted

    A conditional operator can really put that code on a diet:

    format: @<text>@(item.IsCompleted ? 
        Html.Raw("<img src=\"/Images/closed18.png\" alt=\"image\" />") : 
        Html.Raw("<img src=\"/Images/open18.png\" alt=\"image\" />")
    )</text>



    Thursday, July 25, 2013 12:54 AM
  • User-1800993587 posted

    This can be used to conditionaly display the content of another field of same record?

    Let suppose that we have a pair of fields, IsPublic and let say AttachedFile (a BLOB, that may be picture or another binary, .doc or .pdf).

    So we may have available only content of AtachedFile filed for wich IsPublic is true.

    Also using the model from a Mike's article, I have a filed a MimeType filed so I think forward, how to conditionaly display or an image if Mime is image/jpg or a link for downloading if mime is application/pdf. (In fact first of all, how to display an image in WebGrid?)

    thnx,

     

    Laurentiu

    Thursday, July 25, 2013 6:47 AM
  • User1937807931 posted

    Hi Mike!

    I use your website almost weekly for code snippets, guidance, and sometimes just plain 'ol "how's that go again" content, so thank you VERY much for the contributions!

    This short-hand snippet you just provided IS much cleaner!  I hail from a VB background (circa '91), so using these symbols in C# is not as 2nd nature for me, still (C# exclusively since 2011). I should folow ReSharper's lead more often, huh!

    Thursday, July 25, 2013 1:33 PM