jQuery Grid Plugin – jqGrid

@Pavel,
Thanks. Fixed in GitHub
Regards
Tony

Silly me, just put the js internally inside a php, working out of the box.
Thanks @tony, @dignity & everyone.
Now trying to customize the ui.

Hi Tony,

I have just tested with a Javascript configuration and this works, but I should like to use a XML configuration.

Have you an idea to resolve this problem ?

Best regards,
Florent

Is there still no way in jqgrid 3.5 to enable “select multiple” in a column like this :

editable: true,edittype:”select”,editoptions:{value:”FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX”}, multiple: true ?

If not, does someone know a workaround to get this ?

Peter

@Tony, @Florent

Looks like the problem is due to a bad json2.js file, which is missing the parse function. Also grid.import.js in the import function is trying to reference the parse funcion like this $.parse instead of JSON.parse.

In version 3.4.4 both the json2.js and grid.import.js have the proper working code.

Thanks,
Fred Merlo

Hi Tony,

the row deleting works now fine, but i still have a problem, that the column width are reset after deleting has been submitted. So i have the same width by all cols, by a checkbox col too.

Thanks,

Pavel

FredMerlo, thank you very much for your help, problem was resolved.

Best regards,
Florent

Heads up on a typo that breaks multi-select:

selarrrow -> selarrow

=)
Good stuff other than that. Saving me hours!
Cam

Tony, I have mentioned before how it would be nice to set the initialization options at once when creating the jQGrid.

I also notice that the filter, when sending the postback, puts everything in the filter variable.

It would be nice if the filterToolbar, standard search and every submit record information sends their information in the same manner. For example, when editing or creating a record, we could send modif = {type:edit/add/remove, record:{fieldindex:value,….},…}

Same approach for the other post action like filter, search. That way we could check for these keywords to perform appropriate server-side actions.

If you point me in the right direction, i could make the change and send it back to you. At least for the modif part.

Regards,
Sebastien

I’m looking at using the new dataInit/DataEvents to let me
use a small grid to do “select” from potentially large tables.
My idea is to do a grid, hide it, and then use it to pick the item.
Is there any examples of using the dataInit/DataEvents?

editoptions : {
dataUrl : value, dataInit: function, dataEvents : array, defaultValue:
value/function
}

Cool, now there is moderation instead of the funny captcha. 🙂 I like it.

Hi,

first of all, thx for this great great plugin!
I also like the table2Grid function, I use this very often!

But there is a bug in this function!
If I give in the 3.5 beta (release 6) the option “hiddengrid: true” then my first row is replaced by an empty row and another empty row take place, so my grid start with two empty rows and then start with my second row. I hope I explained it ok?!

Best regards
Christian

Oh sorry, I just saw that it is not totaly correct what I say.

My Grid in original looked like

value 1
value 2
value 3
empty row with  
value 4
value 5
value 6
empty row with  
value 7

now, if I pass the hiddengrid: true to the function, it looked like this
empty row with  
empty row with  
value 2
value 3
value 1
value 7
value 4
value 5
value 6

Sorry, for my first wrong explanation

I have just installed BETA 3.5 (Build 7), and now all my pages with jqGrids display this error:

Message: Object required
Line: 12
Char: 7209
Code: 0
URI: http://fpcasdupl1/dashy/Lib/jQuery/jquery.js

@casperd
This is maybe in IE7 or when you switch to IE compatible view. Clear the cache and reload.
Regards
Tony

@tony
I am using IE8. I have tried clearing the cache, but it gives the same error. When i revert back to Build 5, it works perfectly. Any ideas?

Hi tony,

I have a problem with jqgrid import module.

I’m trying use import feature and it crash with a message like “xml2json or parse are not present”. I follow the sequence of import and I found the problem, the variable $.parse is undefined.

I think it’s because I don’t show any table before this import and the variable $.parse (wich is defined in grid.base) is not defined yet.

I added the $.parse definition at top of grid.import and it work correctly.

Sorry my english.

@casperd
If you open 3.5 demo (which is with build7) do you have this error?
Try to isolate the problem.
In my IE8 all is OK including demo site.
Regards

@tony
Ok, problem sorted! It was only breaking on pages where my grids were empty initially. I fixed the XML pages, and now it’s all sorted. Thanks Tony!

Hi Tony,
I’d like to suggest an “image” formatter option to include in next jqGrid version…

In its basic function, it could take an input string like “/my_path/my_image.jpg” and format it as
Of course you could pass more options like alt, title, etc…

In a deeper way, from the same string “/my_path/my_image.jpg”, it could display a (previously created) thumbnail preview with an automatic link to the big image, like:
(where the “_thumb” suffix is passed as option, since one could choose another suffix i.e. “_small”)
This “deeper” way could help integration with classic “lightbox” functions

Thanks for your great work!

Sorry, in my previous post the img markup don’t show: here are the correct versions

<img src=”/my_path/my_image.jpg”>

And:

<a href=”/my_path/my_image.jpg” target=”_blank”><img src=”/my_path/my_image_thumb.jpg”></a>

@plap

Hi Tony,

It appears that this problem may be occurring only on the deletion of the first row of the grid. I have looked back at previous versions and it looks like the “_empty” tr is not being created.

Other than that the grid is absolutely excellent! The move to using jQuery UI was a great idea.

Keep up the good work!

plap :
Hi Tony,
the row deleting works now fine, but i still have a problem, that the column width are reset after deleting has been submitted. So i have the same width by all cols, by a checkbox col too.
Thanks,
Pavel

—- I accidentally hit Reply instead of Quote on my comment above. Sorry.

Hi Tony,

It appears that this problem may be occurring only on the deletion of the first row of the grid. I have looked back at previous versions and it looks like the “_empty” tr is not being created.

Other than that the grid is absolutely excellent! The move to using jQuery UI was a great idea.

Keep up the good work!

Tony

Setting rownumbers: true when using a simple subgrid causes the subgrid to fail. Is this a bug or expected behaviour?

Hi –

Spectacular work on this grid, thank you very much for your hard work Tony.

We have been using 3.4 beta for a while now, and recently we’ve been trying to upgrade to 3.5 beta. The installation is much nicer, I like the new Download Manager and the minified js file! However, after much tweaking my options and re-reviewing the change history, I cannot figure out a major issue I’m having. All my jqgrid tables now are just stuck on load with the “Loading… ” message. I load the data using the ‘json’ datatype with backend implemented in Java using Spring & flexjson to serialize my objects to json. I see the server side is sending back the same json data as we used to with jqgrid 3.4 so I know jqgrid is correctly requesting the data and getting it back. I just don’t know why it doesn’t render the data – just stuck in “Loading…”. I’ve tested this with Firefox 3.0.11, latest Chrome, and IE7 & IE8, all have the same issues.

I am suspecting there is a change to the way the data is being parsed and it no longer supports my old data method. Has anyone concluded the same?

Thanks!

@lloydjm,
Thanks – it is a bug. Fixed in GitHub.
@maj0411,
Thanks for finding this bug too. Also fixed in GitHub.

Tony, is there any solution to change dinamicaly multiselect Grid property?..
The code:

.setGridParam({multiselect:true})

does not work…
Thanx

i just wanted to use multiselect feature for Master/Detail Grids… but OnSelectRow method when Master Grid multiselect property is true is quite terrible… so, i need dinamicaly change multiselect property for Master Grid…

Tony,

Unless I am missing something, is there a reason (as stated in the examples) when you load once that you don’t allow the pager to work? I think this would be a great feature. For example, say I have 500 rows of data and instead of making trips back to the I would like to load it all up at once.

If I want to show 10 items at a time the pager should page. I haven’t downloaded this yet, I have just been looking at the examples.

Great job, by the way.

Regards,
Paul

I’m trying to make the example.html/php work and can’t get data to display. I modified the select statement to select from a mysql db I have. My table has the following:
id, custid, manuid, salesid

In example.php, I’ve changed the following:

while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
$responce->rows[$i][‘id’] = $row[‘id’];
$responce->rows[$i][‘cell’]=array($row[id],$row[custid],$row[manuid]….etc
…..

When I run example.html, in firebug I see the data being returned:
{“page”:”1″,”total”:26,”records”:”256″,”rows”:[{“id”:”38″,”cell”:[“38″,”29″,”14”]}, {“id”:”78″,”cell”:[“29″,”8”, “17”]), {“id”:”14″, “cell”:[“21″,”14″,”18”]}….

which is what should be returned. I can’t figure out why this is not being displayed in the grid – can anyone help me figure out why?

I think, I found a bug…

So, I dynamically change Grid multiselect property, as it is described in docs… At the begining, when Grid property multiselect=true it loads json data with pagination very well… but, when I dynamically change multiselect to false, there goes a problem with loading data… it’s loads, but first column ID data just disapeared, and in header it’s column ID exists… Please, look at the pictures:

1. multiselect:true. Everything is ok…
http://d.sumy.ua/uploads/jqgrid/jqgrid-bug-1.jpg

2. after dynamic multiselect:false. Everything is ok…
http://d.sumy.ua/uploads/jqgrid/jqgrid-bug-2.jpg

3. loading data with multiselect:false. Trouble…
http://d.sumy.ua/uploads/jqgrid/jqgrid-bug-3.jpg

Hi All.

Just want to say first, great plugin.

I’ve been working with jqGrid 3.5 beta dated 2009-05-24 and everything seems to be working great in all browsers except IE7 “which is the standard browser right now for the company I’m working for :-(“. In IE7 the first row of the grid does not hide overflow and will not show ellipsis’, all following rows appear correctly. Has this ever come up before? Does anyone know what could be causing this? If more specifics are needed, please let me know.

Hi –
I found the issue regarding my previous comment with the grid coming up with “Loading…” and being stuck in that state. I upgraded from 3.5alfa3 to 3.5beta7. With 3.5alpha3, everything was working fine. All of my lists are using a custom formatter to generate a link. The formatter function signature has changed in 3.5beta7 which was the root cause of the problem. If you previously had function(el, cellval, opts), now you need to drop the el parameter and simply have function(cellval, opts) – and in your implementation, instead of writing to the old el parameter, simply return the html. This solved my problem! I couldn’t find reference to the details of this change on the website or readme.txt that’s mentioned in the summary, so hopefully this helps others.

By the way, in all my list views, I don’t use the built-in ‘showlink’ formatter since it enforces using the row id number for the value of id in the URL. In my case, I have both a row id (e.g. the dbid) as well as a unique business primary key, which is alphanumeric. I can’t set the alphanumeric value for the row id and since I show the business primary key in the row, I want that to be used in the URL, instead of the rowid/dbid. This way, the URL is business friendly as well. Tony, if there’s a way you think this feature can be added without custom formatter, it would be great. Maybe instead of using opts.rowId in showlink, use cellval instead (remember to escape html), or better yet, allow a way to use the value of another cell on the same row to build the URL? The latter would require passing the entire row to the formatter as its not currently available. This way we can create a hyperlink for multiple cells in the same row, all using an id from a different cell’s value. This is very useful to me, all my list views drill down to a detail page.

Thanks a lot for the continued work on this… this grid implementation is very nice.
Shailesh

@Caspar
Casper – You may want to see: http://www.trirand.com/blog/?p=362&cpage=4#comment-3118. I think I was having the same problem as you.

@c031917
Set the multiple true in the options not separate – i.e editoptions:{…multiple:true}
@FredMerlo
parse function is now part from jqGrid core
@plap
Thanks the bug is fixed. You can get the new build 8
@Cam Tucker
Not a typo. This is the right use.
@Basdub
You are right – we should standartize this. Will think on this. Thanks
@glennswest
Do you have read the rest of the cahnges.txt. You have something similar
dataEvents: list of events to apply to the data element; uses
$(“#id”).bind(type, [data], fn) to bind events to data element

Should be described like this dataEvents: [
{ type: ‘click’, data: { i: 7 }, fn: function(e) { console.log(e.data.i); }
}, { type: ‘keypress’, fn: function(e) { console.log(‘keypress’); } }
]

The event(s) are called only once when the element is created

@NoiZy
Where and how you pass this option

@Miguel Chico
Be a sure that you download include all the Import/Export modules – also you you need to check all the three modules in the download manager.

@ivanhalen
I think you can achive this with your own custom formatter.

@Shailesh
Be a sure that you load the right css file. Also check in FireBug tha you load the ui.jqgrid.css

@DyaGa
In order to reslove this I recommend you that your data is send from the server as name:value pair (if json ) and with names if xml. Also you need to set the repeatitems:false in this case.

@Paul Speranza
This is a one of the main feature planed for the next version, but not for 3.5

@Kathys
Do you have change the grid configuration in appropriate way.

@XDevOne
Download the latest build from this site. It is very important to update your css file too. This bug is fixed allready.

@Shailesh
This is quite explained in changes.txt. Do you have read them?
Also if you read carefully the same file you will find a solution for your second problem

Hi, Tony… i have made two translations in Russian and Ukrainian for jqGrid:

http://d.sumy.ua/uploads/jqgrid-i18n.zip

About, “multiselect”… ok, i will try…

But, what about this new feature:

...navGrid().navButtonAdd()[buttons].navSeparatorAdd().[buttons]

What do you think?

My first try of jqGrid. Congratulations, really nice job! 🙂

Just one minor improvement: I don’t like the usage of global CSS classnames like “scroll”. Do you think this can be adapted to something like “jui-jqgrid-scroll” instead to avoid clashes in CSS namespace?

Tony, I posted an issue at GitHub.

It seems that the setRowData method does not apply colModel formatting.

BTW – I really enjoy working with your grid. You’ve done an awesome job.

Tony… about “dynamically multiselect changing”…
…i did:

[...]
jsonReader : {repeatitems : false},
[...]

and now my json data:

{"page":"1","total":1,"records":5,"rows":[{"id":"2","created":"2009-06-28 11:03:41","name":"NAME","alias":"new-news","published":"1"}, [...other rows...]}]}


Unfortunately, it gives me the same result as described in my comment about this problem… 🙁

@tony
Hi Tony – Thanks for the pointer. I don’t know how I missed in the Changes.txt file. I’m glad the rowOptions parameter is added as well! Although I think I still need my own formatter for creating the link since the default showlink formatter doesn’t seem to have any options to create a link from it. Here’s what I ended up putting in this custom formatter:

function(cellvalue, options, rowObject){
if (isEmpty(cellvalue)) {
return (isValue(cellvalue) ? cellvalue : "");
}

if(isValue(cellvalue)) {
var idVal = cellvalue;
if (op.linkIdParamValCellIdx) {
idVal = rowObject[op.linkIdParamValCellIdx];
}
if (op.escapeVal) {
idVal = escape(idVal);
}
var idUrl = op.baseLinkUrl + idVal;
return '' + cellvalue + '';
}else {
return $.fn.fmatter.defaultFormat(cellvalue, options);
}
};

This allows me to pick any cell from the row to which to create the URL. Note that the id attribute is not even added by the function, instead I’ve got that embedded in the list’s specific baseLinkUrl.

Thanks so much for the help!

Is there a way to highlight (add the ui-state-highlight class) a specific row through any of the jqgrid apis on a non-multiselect grid? The setSelection() function seems only for multiselect. Thanks!

tony :
@Kathys
Do you have change the grid configuration in appropriate way.
@XDevOne
Download the latest build from this site. It is very important to update your css file too. This bug is fixed allready.
@Shailesh
This is quite explained in changes.txt. Do you have read them?
Also if you read carefully the same file you will find a solution for your second problem

Worked PERFECTLY! Thanks Tony

Hi Tony,

I passed it like this:

jQuery(document).ready(function()
{
tableToGrid(“#name”, { caption: ‘Einstellungen’, height: 210, hiddengrid: true });
});

Best regards

I am trying out sample code from http://www.trirand.com/jqgrid35/jqgrid.html => “New in Version 3.5 / Form Improvements” and it works well (and looks great) with the exception that my date picker is appearing behind the (model) form 🙁
I don’t know whether it is because I am using grid inside the tab or there is some z-index setting I need to specify?

please help?

Hi,
I switched from jqgrid 3.4 to 3.5 beta and I am having problems with searching. No matter what I do when I press ‘search’ button in my search form, it sends data with parametr ‘_search’ set to ‘false’ and no data from to search form. I understand that there is a new search plugin for 3.5 but do I have to use it? It seems like the old functionalities have been preserved except sending data to server on search request. Please let me know if you are having the same problems. Thanks

Hi –

I’m new to jqGrid. So, please forgive me if this has been asked and answered elsewhere. Or, if this is not the proper forum for this question, any guidance on where to post would be appreciated.

I’ve succeeded in getting a jqGrid to display content embedded locally (array data). And, I have a function which returns a javascript object containing the query results retrieved from the server using another javascript API.

Where I’m stuck is getting the jqGrid properties set up correctly to get the server results to load for the initial page and understanding what I need to define to enable jqGrid to request more data to support paging.

As far as I can tell, when a URL is provided, jqGrid handles the process of loading the result automatically. But, if I use datatype:function(), I need to process results directly with addJSONData() or one of the other methods. Is that correct? And, what are the postdata parameters?

If I’m doing this with the datatype:function(), do I need to use datastr?

If my content looks like:

{
0:{‘col1name’=’val1’, ‘col2name’=’val2’ },
1:{‘col1name’=’val3’, ‘col2name’=’val4’ },
2:{‘col1name’=’val5’, ‘col2name’=’val6’ },
…more rows…
}

how do I set up parameters for jsonReader to go with addJSONData? I’ve tried everything I can think of with values for rows, cell, id and repeatitems. Am I correct that I use repeatitems:false and put col1name and col2name in the jsonmap property for columns in colModel? What else do I need to set? Do I need to define a subgrid?

When paging occurs, what function gets called? The same one with different values in postdata?

Thanks very much for your help,
Mark

Looking at the development code, I see that there is no way to specify different icons for tree view. For example, I need some blue folders and some green folders.

Am I right? If yes … Is it a planned feature?

@DyaGa,
I have added navSeparatorAdd (little changed). Will see you problem.

@Thomas
Could you please send me a link with the problem in order to resolve them. Also another users report this problem, but I can not reproduce it.

@lekter
There is a such option only in 3.5 which is defined like this
treeIcons = {plus:’ui-icon-triangle-1-e’,minus:’ui-icon-triangle-1-s’,leaf:’ui-icon-radio-off’}

@NoiZy
I will check this. Thanks.

@shailesh17
setSelection work in all modes – check your code.