Login or Sign Up to become a member!
LessThanDot Sit Logo

LessThanDot

Web Developer

Less Than Dot is a community of passionate IT professionals and enthusiasts dedicated to sharing technical knowledge, experience, and assistance. Inside you will find reference materials, interesting technical discussions, and expert tips and commentary. Once you register for an account you will have immediate access to the forums and all past articles and commentaries.

LTD Social Sitings

Lessthandot twitter Lessthandot Linkedin Lessthandot friendfeed Lessthandot facebook Lessthandot rss

Note: Watch for social icons on posts by your favorite authors to follow their postings on these and other social sites.

Your profile

    Search

    XML Feeds

    Google Ads

    « Nancy and jquery datatablesASP.NET MVC project with Modal dialogs and Flexigrid »
    comments

    Introduction

    So last weekend I poste about Nancy an jtable and all was well. This morning I wanted to add a column with a link and a date with a datetime to it.
    Neither were obvious but it is possible. And pretty easy once you know how.
    I have put the code on github.

    Column with a link

    This is what I want.

    And in a sense it is very easy to do.

    When we configure our fields for jtable we have a display attribute that takes a function and in that function we can do our formatting.

    1. Name: {
    2.                             title: 'Name',
    3.                             width: '20%',
    4.                             display: function (data) {
    5.                                 return $('<a href="/plants/' + data.record.Id + '">' + data.record.Name + '</a>');
    6.                             }
    7.                         },

    The parameter that I called data has an attribute record which contains our data and our data as an object. And via that object we can get all the fields of our data.

    A column with date and time

    First of all I added a DateAdded property to my PlantModel and I gave it a value. Then I needed to tell jtable how I want to format it.

    You can do this in jtable.

    1. DateAdded: {
    2.                             title: 'Date added',
    3.                             width: '20%',
    4.                             sorting: false,
    5.                             type: 'date',
    6.                             displayFormat: 'dd.mm.yy',
    7.                         }

    But this does not allow us to format the time. Because behind the scene it uses the jquery ui datepicker format function and that is limited to the date part.

    But not to worry moment.js to the rescue. Just add it via nuget, move the scripts to your content scripts file. Add this line.

    1. <script src="@Url.Content("~/Content/Scripts/moment.min.js")" type="text/javascript"></script>

    And then we change our field declaration in jtable.

    1. DateAdded: {
    2.                             title: 'Date added',
    3.                             width: '20%',
    4.                             sorting: false,
    5.                             display: function (data) {
    6.                                 return moment(data.record.DateAdded).format('DD/MM/YYYY HH:mm:ss');
    7.                             }
    8.                         }

    And that gives the above result.

    Conclusion

    jtable has some formatting posibilities builtin (date formatting, add textbox, textarea, checkbox, combos) but it's not so much. Luckily you can do everything else with display, so that makes it all good.

    About the Author

    User bio imageChris is awesome.
    Social SitingsTwitterHomePageLTD RSS Feed
    c#, jtable, nancy
    InstapaperVote on HN

    No feedback yet

    Leave a comment


    Your email address will not be revealed on this site.

    To mislead the spambots.

    Your URL will be displayed.
    (Line breaks become <br />)
    (Name, email & website)
    (Allow users to contact you through a message form (your email will not be revealed.)