Forum


12:30

02/07/2009

Hi all,
I tried using jqGrid and liked it a lot! So suggested this to our architects and we are using it in a huge ASP.NET project (a website with over 600 pages). Our project has really complex grids, so am wondering how these requirements can be handled. Some of them are:
1. Displaying data in multiple lines in each row. E.g., if the column is address, it should show street name, city, zip in different lines of a single grid row. How should i format data?
2. On hovering hyperlinks of few columns, a popup should show out showing additional data related to that row. I guess we can use plugins like jTip/clueTip etc for the popup, but how should I fetch that additional data along with grid data?
3. We need Ms Excel 2007 type of filtering in the grid. jqGrid 3.5 has integrated search toolbar, in which dropdowns can be added. But there, only one value can be selected. Our requirement is., user should be able to select multiple values in the dropdown.
There are few more, but I am curious to know the solutions to these first. Thanks a lot in advance!
Cheers,
Krishna,
09:22

Moderators
30/10/2007

Hello,
1. Not sure what you mean with this, but you can use a custom formatter for this purpose. If you mean additional row - currently this is not possible.
2. Maybe you will need to use afterInsertRow event.
3. To be a honest I never try this , but you can
colModel :[
{name:'somename'... stype:'select', searchoptions:{multiple:true, size:3}..}
...
]
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.
14:48

02/07/2009

Thank you for the reply Tony.
For (1), custom formatter is working. That is what I am looking for.
For (3), I'm not able to get multi select option in dropdown.. I think I should place a custom button in a new toolbar and enhance the excel filtering functionality.
For(2), I have not gone till creation of tool tip as I'm facing problems while fetching additional data for each row. This is my problem:
I am storing additional data related to each row in an array and returning that array through “userdata” JSON object. When I click on a row in the grid, I need to access the userdata of that row. For this, I'm writing the below code:
onSelectRow: function(id) {
var myUserData = $('#testGrid').getUserData();
alert(myUserData[id]);
},
This is working when my id is same as index of myUserData array. However, in real case, the id of my row will be like “1001″, “1002″ etc. In this case, how should I access my row specific userdata? I can't use id here as my myUserData array would go out of bounds. I want to get row index here. How should i do that?
15:47

02/07/2009

Hehe..got the solution for fetching additional information for each row.
I used the below code for jsonReader:
$("#testGrid").jqGrid({
jsonReader : {
root:"invdata",
page: "currpage",
total: "totalpages",
records: "totalrecords",
repeatitems: false,
id: ""
}
});
When id is set to empty, it is taking row index as id. So row specific user data can be easily fetched using:
$("#testGrid").getUserDataItem( key ).
Hope what I was doing is correct...
Let me just say these a great questions. I have built a CRM app, using jqGrid everywhere.
Our users love it and performs great. I can highly recommend it and have not had issues with it and Tony's
support and feedback support is excellent. I had trouble with cell editing about a year ago and decided to go
with form editing (modal dialog popup) for all my editing, but I know the cell editing has received a lot of work
and has been improved so cannot speak to what it looks like now.
Since you asked quite a few questions, let me address the Street address, zip code question. What I do this a
lot in places where I want to cram the data together, that in the back-end-DB, is separated, like contact names,
is to have for example the following where I show it for a contact's full name, with the ability to update each,
First, Middle and Last Name in edit/add mode (form edit):
{ name: 'Id', index: 'Id', width: 35, sortable: true, align: “center”, resizable: false, hidden: false, editable: false, editoptions: { readonly: true, size: 0} },
{ name: 'FullNameUrl', index: 'FullNameUrl', width: 80, editable: false, sortable: true, align: “left”, resizable: true, editrules: { edithidden: false} },
{ name: 'FirstName', index: 'FirstName', width: 40, editable: true, sortable: true, align: “left”, resizable: true, hidden: true, editrules: { edithidden: true, required: true} },
{ name: 'MiddleName', index: 'MiddleName', width: 40, editable: true, sortable: true, align: “left”, resizable: true, hidden: true, editrules: { edithidden: true} },
{ name: 'LastName', index: 'LastName', width: 40, editable: true, sortable: true, align: “left”, resizable: true, hidden: true, editrules: { edithidden: true} },
Now, as far as your address question for over several lines, you could do this on the server-side when you define
the format for lets say a FullAddress property:
{ name: 'Id', index: 'Id', hidden: true, hidedlg: true },
{ name: 'FullAddress', index: 'FullAddress', width: 80, editable: false, sortable: true, align: “left”, resizable: true, editrules: { edithidden: false} },
{ name: 'AddressTypes', index: 'AddressTypes', hidden: true, editrules: { edithidden: true, required: true} },
{ name: 'StreetAddress1', index: 'StreetAddress1', editable: true, hidden: true, editrules: { edithidden: true, required: true} },
{ name: 'StreetAddress2', index: 'StreetAddress2', editable: true, hidden: true, editrules: { edithidden: true} },
{ name: 'StreetAddress3', index: 'StreetAddress3', editable: true, hidden: true, editrules: { edithidden: true} },
{ name: 'Cities', index: 'Cities', hidden: true, editrules: { edithidden: true } },
{ name: 'States', index: 'States', hidden: true, editrules: { edithidden: true, required: true} },
{ name: 'PostalCode', index: 'PostalCode', hidden: true, editrules: { edithidden: true, required: true} },
{ name: 'Region', index: 'Region', hidden: true, editrules: { edithidden: true } },
{ name: 'Countries', index: 'Countries', hidden: true, editrules: { edithidden: true, required: true} }
FullAddress in your DTO is:
<li>100 Main Street</li>
<li>Building B</li>
<li>12th Floor</li>
<li>My Great City</li>
<li>Pennsylvania</li>
<li>18966</li>
<li>USA</li>
</ul>
04:27

02/07/2009

That's cool Renso!
This will surely help me in fulfilling one of our requirements.
I'm looking for displaying additional content on hover of a cell. Any inputs on this?
I've tried this but it's not working. Any inputs on this will be appreciated.
18:43

20/03/2009

I realize this is long after the fact, but in case anyone else is looking to solve a similar problem (extra content on cell hover).
You can use cluetip plugin or similar to accomplish this.
Add a custom formatter option to the colModel that returns a span with class tooltip and rel='/my/tip/url/' + row_id.
Apply the cluetip in loadComplete.
pseudo example:
exampleFormatter = function (cellvalue, options, rowObject) { return '<span class="tooltip" rel="/my/tooltip/url?id='+ options.rowId +'">' + cellvalue + '</span>' } grid_options = { colModel : [ {name:'example', index:'example', formatter:exampleFormatter, stype:'none', width:120} ], loadComplete: function() { $('.tooltip').cluetip({ closePosition: 'title', ajaxCache: false, width: '400px'}); } }
or some variation.
Most Users Ever Online: 715
Currently Online:
63 Guest(s)
Currently Browsing this Page:
1 Guest(s)
Top Posters:
OlegK: 1255
markw65: 179
kobruleht: 144
phicarre: 132
YamilBracho: 124
Renso: 118
Member Stats:
Guest Posters: 447
Members: 11373
Moderators: 2
Admins: 1
Forum Stats:
Groups: 1
Forums: 8
Topics: 10592
Posts: 31289
Newest Members:
, razia, Prankie, psky, praveen neelam, greg.valainis@pa-tech.comModerators: tony: 7721, Rumen[Trirand]: 81
Administrators: admin: 66