jQuery Grid Plugin - jqGridForum

Topic RSS

viewing long fields in grid

10/08/2009
11:38

joseisme

Member

Members

Forum Posts: 6

Member Since:
25/07/2009

Offline

Hello,

I am successfully using jqgrid 3.4 in an asp.net MVC project, even though I am not an expert in JavaScript - nice product! One of the fields in my grid can be up to 250 characters. I would like to display (read-only) the entire 250 chars in a grid. By editing the column model like below I am able to show the contents but sorting is lost until I refresh, it is not very attactive, and it confuses users because the think they can edit the content even though it is read-only.

{ name: 'myLongField', index: 'myLongField', width: 350, edittype: 'textarea', editable: true, editoptions: { rows: "6"} }

1) Is there a way to display read only text so that it wraps and can show the entire field content without vertical scrolling?

2) Can that be done for all rows so that users can see the long content for all records at the same time without having to expand every record individually?

3) if wrapping read-only text is not possible, can I increase the tooltip display duration? Hovering exposes the content nicely, but it disappears too quickly (~ 10 seconds) I'd like the tooltip to show until the mouse was moved again.

Thank you very much.

Jose.

13/08/2009
01:34

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello,

1), 2) After loading the jqGrid CSS

<style>

.ui-jqgrid tr.jqgrow td {white-space: normal;}

</style>

3) The duration of this depends on browser.

Regards

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

13/08/2009
17:03

joseisme

Member

Members

Forum Posts: 6

Member Since:
25/07/2009

Offline

Tony,

Thanks for the reply, but I am still unable to make the field expand to display the entire content. Perhaps I am not placing the in-line style in the right place or do not have the proper style sheet files declared. Below is a snippet of source from one of my pages – what am I missing?

IE8, jqgrid 3.4

Thanks again.

-Jose.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head id="ctl00_Head1"><title>

</title><meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<link href=”../../Content/Site.css” rel=”stylesheet” type=”text/css” />
<link href=”../../Content/Header.css” rel=”stylesheet” type=”text/css” />
<link href=”../../content/details.css” rel=”stylesheet” type=”text/css” />
<link href=”../../scripts/themes/green/grid.css” rel=”stylesheet” type=”text/css” title=”green” media=”screen” />
<link href=”../../Scripts/themes/sunny/jquery-ui-1.7.2.custom.css” rel=”stylesheet” type=”text/css” />

… etc.

jQuery(document).ready( function()
{
var lastSelected

jQuery(”#list”).jqGrid(
{
url: gridURL ,

… etc.

15/08/2009
02:29

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello,

You should tell me which version do you use!

<style>

table.scroll tbody td {white-space: normal;}

</style>

Regards

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

24/08/2009
09:07

joseisme

Member

Members

Forum Posts: 6

Member Since:
25/07/2009

Offline

Hi Tony,

The version of jqgrid is 3.4.4.patched. Browser is IE8 or firefox 3.5.1 The grid is being generated on a ASP.NET MVC page.

Additionally I have posted below the column model, in case that is important.

Thanks very much,

Jose

colModel: [ { name: 'ProblemId', index: 'ProblemId', width: 75, align: 'left', hidden: true },
{ name: 'ProblemNumber', index: 'ProblemNumber', width: 110 },
{ name: 'OnsetDate', index: 'OnsetDate', width: 150 },
// { name: 'Problem', index: 'Problem', width: 350, edittype: 'textarea', editable: true, editoptions: { rows: "4"} },
{ name: 'Problem', index: 'Problem', width: 350 },
{ name: 'CurrStatus', index: 'CurrStatus', width: 150, sortable: true },
{ name: 'CurrStatusDate', index: 'CurrStatusDate', width: 150, sortable: true }
],

31/08/2009
04:39

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello,

See my previous post and modify your style according to what I write.

Best Regards

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

31/08/2009
09:02

joseisme

Member

Members

Forum Posts: 6

Member Since:
25/07/2009

Offline

Tony,

Thanks, that fixed it. I appreciate your help.

Best Regards,

-Jose