Forum

November 2nd, 2014
A A A
Avatar

Lost password?
Advanced Search

— Forum Scope —




— Match —





— Forum Options —





Minimum search word length is 3 characters - maximum search word length is 84 characters

The forums are currently locked and only available for read only access
sp_Feed Topic RSS sp_TopicIcon
jqGrid with complex features.
29/08/2009
12:30
Avatar
novogeek
Hyderabad, Andhra Pradesh
Member
Members
Forum Posts: 10
Member Since:
02/07/2009
sp_UserOfflineSmall Offline

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!

CheersSmile,

Krishna,

http://www.novogeek.com

31/08/2009
09:22
Avatar
tony
Sofia, Bulgaria
Moderator
Members

Moderators
Forum Posts: 7721
Member Since:
30/10/2007
sp_UserOfflineSmall Offline

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.

03/09/2009
14:48
Avatar
novogeek
Hyderabad, Andhra Pradesh
Member
Members
Forum Posts: 10
Member Since:
02/07/2009
sp_UserOfflineSmall Offline

Thank you for the reply Tony.

For (1), custom formatter is working. That is what I am looking for.Smile

For (3), I'm not able to get multi select option in dropdownEmbarassed.. 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?

03/09/2009
15:47
Avatar
novogeek
Hyderabad, Andhra Pradesh
Member
Members
Forum Posts: 10
Member Since:
02/07/2009
sp_UserOfflineSmall Offline

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...
03/09/2009
16:39
Avatar
Renso
PA
Member
Members
Forum Posts: 118
Member Since:
11/09/2008
sp_UserOfflineSmall Offline

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):

            colModel: [
                { 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:

       colModel: [
                { 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:

<ul style=”text-align: left; list-style-type: none;”>
    <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/09/2009
04:27
Avatar
novogeek
Hyderabad, Andhra Pradesh
Member
Members
Forum Posts: 10
Member Since:
02/07/2009
sp_UserOfflineSmall Offline

That's cool Renso!Smile

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.

24/10/2009
18:43
Avatar
turya
Member
Members
Forum Posts: 7
Member Since:
20/03/2009
sp_UserOfflineSmall Offline

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.

17/11/2009
12:43
Avatar
novogeek
Hyderabad, Andhra Pradesh
Member
Members
Forum Posts: 10
Member Since:
02/07/2009
sp_UserOfflineSmall Offline

Hey turya!

thanks a lot for the reply. I've built my custom tooltip and integrated, but yeah., cluetip gives better features.

Forum Timezone: Europe/Sofia

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.com

Moderators: tony: 7721, Rumen[Trirand]: 81

Administrators: admin: 66

Comments are closed.
Privacy Policy   Terms and Conditions   Contact Information