Show More or Show Less link if text is too much in Column in WebGrid MVC c#

Question

I am working on WebGrid of MVC with jquery, Here in my grid, there is comment column which has more text in it which is creating a scroll.

I want to give a show more or show less link in this grid.

How Can I do it.

Here is my grid

Answer 1

I wrote a jquery function --

 $('.more').each(function () {
        var content = $(this).html();

        if (content.length > showChar) {

            var c = content.substr(0, showChar);
            var h = content.substr(showChar, content.length - showChar);

            var html = c + '<span class="moreellipses">' + ellipsestext + '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';

            $(this).html(html);
        }

});

and to change Label text --

 $(".morelink").click(function () {
        if ($(this).hasClass("less")) {
            $(this).removeClass("less");
            $(this).html(moretext);
        } else {
            $(this).addClass("less");
            $(this).html(lesstext);
        }
        $(this).parent().prev().toggle();
        $(this).prev().toggle();
        return false;
    });

and finally, I added .more class in WebGrid.

grid.Column("outBoundMoveOrder.Comment", header: "Comment", style: "more"),

Happy Learning !!