How to Expand/Shrink row in Jqgrid dynamically

I have one jqgrid, in which there is one column say 'Shipped Via'. This column may have one or more values. i.e TNT,FEDEX,ABC. The format of input string can be changed. Its upto me. For now I am showing all three values in new lines, which is seperated by ', ' i.e. TNT, FEDEX, ABC.

What I want is,I want to show only 'TNT' and three dots (...) or text like 'more...', if there are more than one value, in this column. Since there are more than one value, on click of that row+column, the row should get expanded and show all three values and again you click and the row should show only 'TNT'.

I have set row height using below code.

.ui-jqgrid tr.jqgrow td {
        overflow: hidden;
        height: 25px;
        padding-top: 0px;        
        font-size:1.2em;
    }

Since the wrapping is OFF so few end words/chars get disappear. Though we can see them in tooltip.

I do not want to do wrapping of text in columns. Wrapping increase the height of row.

If I pass input string as 'TNT,\nFEDEX,\nABC'. All three values appear in three different lines which increases the height of row.

It seems to me that you should define different styles for selected and non-selected cells. I created the demo for you which demonstrates an possible implementation. You can use it as the basis of your solution.

The demo cut the text with ellipses (...) on non-selected rows

and display the full text in the tooltips

but it use wrapping on selected row

It looks close to what you need.

I used the following CSS rules in the demo

.ui-jqgrid tr.jqgrow td {
    text-overflow: ellipsis;-o-text-overflow: ellipsis;
}
.ui-jqgrid tr.jqgrow.ui-state-highlight td {
    word-wrap: break-word; /* IE 5.5+ and CSS3 */
    white-space: pre-wrap; /* CSS3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    overflow: hidden;
    height: auto;
    vertical-align: middle;
    padding-top: 2px;
    padding-bottom: 2px
}