Home > jQuery > jqGrid 3.6 beta

jqGrid 3.6 beta

October 15th, 2009

We are happy to introduce the availability of 3.6 beta version of jqGrid. This release has a lot of user contributions (Thank you Mark) and add more power to jqGrid. Here is the list of the most important features:

  • New API – now we follow the concept of jQuery UI calling conventios
  • RTL support
  • Columns Reordering
  • Rows Reordering (sortable rows)
  • Drag and drop rows between two or more grids
  • Custom Validation
  • Custom creation of input elements in editing modules
  • New Column Chooser with ability to resort columns
  • Full control of all ajax requests
  • Loading data while scrolling
  • … and much more

All these new features can be seen here
The jqGrid 3.6RC again with the demo can be obtained from here
We working hard on documentation, so have a patience until we document all fixed bugs and new features.
We hope that this can be done at end of next week (where we expect to publish the final release)

Enjoy
jqGrid Team

Tags:
  1. October 16th, 2009 at 11:01 | #1

    Looks great,

    Really like the column reordering and dragging rows from one grid to another.

    Thanks for all the hard work.

  2. October 16th, 2009 at 12:23 | #2

    The improvements made to the grid in this release are impressive!!
    Keep up the good work!

  3. Daniel
    October 17th, 2009 at 04:08 | #3

    Looking good but the ‘Loading data while scrolling’ could do with the numbers updating while scrolling rather than waiting for the new data to load and using a scroll wheel causes the starting number not to change.

  4. ferny
    October 19th, 2009 at 07:33 | #4

    Really good, the drag and drop my favorite, i hope the release of 3.6.
    Tnanks from Mexico.

  5. jayarjo
    October 21st, 2009 at 11:46 | #5

    Awesome. I thought those features were already in current release, glad they are coming anyway though. Great work guys!

  6. Liam
    October 21st, 2009 at 18:21 | #6

    Hey guys, great work as always. Will the drag and drop to reorder columns return the new position and/or have associated events?

  7. kuafu
    October 22nd, 2009 at 10:17 | #7

    If there’re few rows and the grid height is large, then there will be a large space between the rows(data) and the footer bar. Can we have the feature to auto resize the grid to fit the rows when the rows is few?

  8. Dmytro Samodurov
    October 25th, 2009 at 15:54 | #8

    Live scrolling is awesome!

  9. mojtaba
    October 26th, 2009 at 16:40 | #9

    Thanks for RTL support.

  10. October 27th, 2009 at 17:45 | #10

    Hi Tony,

    First of all, congratulations on the new release.

    I have been using jqgrid 3.4.1 in my project. The way I designed the project is as follows:
    1. Get all data as an XML string at once
    2. Load into multiple grid on the same UI

    So, I used the local datatype:
    datatype: ‘xmlstring’

    Since, the data became huge with time, the performance deteriorated. And since, there was no pagination support for local datatype, I decided to add one. I hope you find this useful and it can be easily added into jqGrid 3.6 with some simple changes. Since I did not have a chance to look at jqGrid versions post 3.4.1, I am providing the changes I made in 3.4.1 to support simple pagination that worked for me.

    Here are the changes I made:
    1. Added, following grid parameters to each grid where pagination was to be supported:

    pagination: {startIndex: 0, maxRecordsPerPage: 10}

    2. Updated function addXmlData in grid.base.js

    var addXmlData = function addXmlData (xml,t, rcnt) {
    if(xml) { var fpos = ts.p.treeANode || 0; rcnt=rcnt ||0; if(fpos===0 && rcnt===0) {$(“tbody tr:gt(0)”, t).remove();} } else { return; }
    var v,row,gi=0,si=0,cbid,idn, getId,f=[],rd =[],cn=(ts.p.altRows === true) ? ‘alt’:”;
    if(!ts.p.xmlReader.repeatitems) {f = reader(“xml”);}
    if( ts.p.keyIndex===false) {
    idn = ts.p.xmlReader.id;
    if( idn.indexOf(“[") === -1 ) {
    getId = function( trow, k) {return $(idn,trow).text() || k;};
    }
    else {
    getId = function( trow, k) {return trow.getAttribute(idn.replace(/[\[\]]/g,””)) || k;};
    }
    } else {
    getId = function(trow) { return (f.length – 1 >= ts.p.keyIndex) ? $(f[ts.p.keyIndex],trow).text() : $(ts.p.xmlReader.cell+”:eq(“+ts.p.keyIndex+”)”,trow).text(); };
    }
    $(ts.p.xmlReader.page,xml).each(function() {ts.p.page = this.textContent || this.text ; });
    $(ts.p.xmlReader.total,xml).each(function() {ts.p.lastpage = this.textContent || this.text ; } );
    $(ts.p.xmlReader.records,xml).each(function() {ts.p.records = this.textContent || this.text ; } );
    $(ts.p.xmlReader.userdata,xml).each(function() {ts.p.userData[this.getAttribute("name")]=this.textContent || this.text;});
    $(ts.p.xmlReader.root+” “+ts.p.xmlReader.row,xml).each( function( j ) {
    if(typeof ts.p.pagination != “undefined”) {
    if(j=(ts.p.pagination.startIndex + ts.p.pagination.maxRecordsPerPage)) return false;
    }
    row = document.createElement(“tr”);
    row.id = getId(this,j+1);

    if(ts.p.multiselect) {
    addMulti(t,row);
    gi = 1;
    }
    if (ts.p.subGrid) {
    try {$(ts).addSubGrid(t,row,gi,this);} catch (e){}
    si= 1;
    }
    if(ts.p.xmlReader.repeatitems===true){
    $(ts.p.xmlReader.cell,this).each( function (i) {
    v = this.textContent || this.text;
    addCell(t,row,v,i+gi+si, ‘false’);
    rd[ts.p.colModel[i+gi+si].name] = v;
    });
    } else {
    for(var i = 0; i = $t.p.pagination.maxRecordsPerPage) {
    $t.p.pagination.startIndex = $t.p.pagination.startIndex – $t.p.pagination.maxRecordsPerPage;
    }
    else {
    $t.p.pagination.startIndex = 0;
    }
    $($t).trigger(‘reloadGrid’);
    },
    showNextPage: function() {
    $t = this[0];
    if ( !$t.grid ) { return; }
    $t.p.pagination.startIndex = $t.p.pagination.startIndex + $t.p.pagination.maxRecordsPerPage;
    $($t).trigger(‘reloadGrid’);
    }

    4. Added the following to show pagination controls for each grid.

    $(“#t_SampleGrid”).append(“”);

    $(“#t_SampleGrid”).append(“”);

    Regards
    Sumit

  11. Jagadeesan Balakrishnan
    October 28th, 2009 at 07:02 | #11

    All the new features are cool and great! Thank you :)

  12. reza
    October 28th, 2009 at 12:43 | #12

    rtl only work with IE not chrome or firefox thanks

  13. October 28th, 2009 at 16:03 | #13

    @resa
    As described short in the RTL example RTL is supported fully in FF and IE.
    The default settings in FireFox does not allow to fully use the RTL. In order to see the result
    1. In the url bar in FireFox type about:config
    2. In the Find bar type layout.scrollbar.side
    3. Double click on it and change the value from 0 to 1
    Enjoy
    Tony

  14. Joe Negron (LOGIC Wizards – NYC)
    October 29th, 2009 at 21:27 | #14

    Hi Tony – I love the new features in 3.6 & the overall flexibility of your entire project. Excellent Work! Before I found this: I was piecing together widgets, modules, & plug-ins for validators, shadowboxes, drag&drop, calendars, etc – I even started building my own tools to integrate them all because their API’s sucked! – you have EVERYTHING! AND considering the complexity, the API is remarkably clean and intuitively designed. jqGrid is truly a work of art!
    Again: Awesome work!

    I am however having a few issues with the 3.6b. I downloaded the most up-to-date (10/28) js from your site. I think you may be the only person on the planet who can help me…

    #1: When I submit a form (in 3.6) it dies before it ever gets to the server — firebug shows an error in the try/catch on line 424 of grid.common.js in function checkValues() for every element in the form array… I can’t figure out what I’m doing wrong.

    #2: Column sorts don’t seem to work, for me – maybe #1 & #2 are related??? I think my colModel is OK. I’m using a left outer join in my SELECT stmt that feeds the grid – does that mean my index values should be like “a.col1, b.col1, a.col2,… etc?” I can change the order for the initial sortCol by clicking on the header – but only once… then it dies w/o errors.

    #3: My datePicker shows up as a GIANT div behind the editForm. How can I get it inside the formEditor? I’m assuming its binding to the grid element & not the form element, but I can’t really tell…

    #4: What’s the easiest way to get a response from the server back to the app: xhr? loadError? afterComplete? fnCustom()? I’ve tried several ways & couldn’t find it anywhere in the documentation – if the app is looking for something specific back from the server or what..

    #5 altRows wasn’t working for me, either & I hot-fixed with the css hack you posted, but it messes up the selectedRow highlight – especially in IE. I tried to play with transparency and then just gave up figuring you’d work out the css for the final release…

    There are a couple other minor annoyances you can probably see in my comments near text saying “!HELP!” But the biggest ones are #1 & #2 listed above. My test page is http://distribution.mixtapemonster.com/affiliates/wizards/admin/testgrid.html

    It all seems pretty straight forward. But I could use a little nudge in the right direction… Overall I think I have done a very thorough test of your beta. I’m working on some builder tools to enhance the frameworks for cms_builder & Social Engine but once I get past these issues, I’ll probably work on porting it to Drupal, as well..

    Thanks in advance.

    Joe Negron (LOGIC Wizards – NYC)

  15. Joe Negron (LOGIC Wizards – NYC)
    October 30th, 2009 at 17:39 | #15

    @Joe Negron (LOGIC Wizards – NYC)
    I think part of my problem is the UPDATE via a LEFT OUTER JOIN – not quite sure how that works if one or the other tables has no corresponding record. A SELECT (I think) would just leave those fields null but an UPDATE? I think it would just bomb So, #1 may not be a jqGrid problem or even jQuery but SQL… and only when updating orphaned records… but since I’m not getting any errors back from AJAX – I’m kinda blind to that fact. Does That make sense?

    It maybe be cleaner with some type of (exists? UPDATE:INSERT) logic on the back end for BOTH tables. That would be a lot more coding but I think it needs to be done… As luck would have it, I can’t even test that theory (right now) b/c they’re doing some upgrade to the db servers. Luckily they said “it’ll only be down for 30 minutes” – but that was over an hour ago. ;-)

  16. tony
    October 30th, 2009 at 17:51 | #16

    @Joe,
    Thanks.
    1. Could not test the link since I receive a error “Lost connection to MySQL server during query…”
    2. Yes in this case you should use dot notation like a.name or b.myname …
    3. I see you attach a click to lunch datepicker – either use dataInit and just do $(elem).datepicker() or if you want to fave button near the datepicker use onInitializeForm event to attach datepicker with image button.
    4. It depends what you want to do. loadError can be used if you have error from the server response. In the loadComplete we pass the response too, but if you want to have full control maybe you will need to use datatype as function.
    5. AltRows is working, but with some themes there is no difference if you use it – by example in redmond theme the difference is not visible.

    Best Regards
    Tony

  17. tony
    October 30th, 2009 at 18:17 | #17

    @Joe,
    When try to update the record I have this in FireBug:
    UPDATE … LEFT OUTER JOIN … SET .. WHERE … Couldn’t execute query.Query was empty
    I think the clear way is to have 2 UPDATE statements.

  18. Basdub
    October 30th, 2009 at 21:30 | #18

    Hi, Love the improvements. I’ll check later today about the “full control” of the ajax requests ;-). I had a post in 3.5 asking to be able to send the data in a serialize way.

    Today, i would like to briefly talk about the custom event that we can bind our custom functions to. Let’s take for example the onClickButton of a custom button that we added to the navGrid using the navButtonAdd function.

    The issue is the following: when ever my event is triggered, there is no way for me to know on which grid i’m working on.

    After looking at the code, in formedit around line 1572 build of Oct 29th. I’ve notice that the click event is binded to the button using .click(fn) method. Which is not bad at all !!! The only thing is that you can’t pass argument that way in JQuery.

    Proposed Solution:
    Simply use the .bind(type,[data],fn) and pass the grid (this) in this case as the data. Then in the p.onClickButton() pass the e arguments like this p.onClickButton(e). In our custom function definition we can then pass e or e.data and be able to “retrieve” the grid information that we might want.

    I believe that this simple approach should be used to handle, when possible, any similar type of custom event. And allow us to know on which grid we need to work on.

    Thanks for your attention

    Sébastien dubé

  19. zquad
    October 31st, 2009 at 01:36 | #19

    When do you guys think 3.6 will come out of beta?

  20. November 1st, 2009 at 10:39 | #20

    @Sébastien,
    Thanks. Upadate is available in GitHub, not in a way that you provide, but the result is the same.
    Thanks
    Tony

  21. November 2nd, 2009 at 07:48 | #21

    hi! great work… a fan of yours…!!
    in the documentation, you have mentioned that there are 3-4 themes, but after downloading the .zip file, i saw there is only one theme. presently, i am using jQuery custom themes in my web site. so, how can i change jqGrids’ theme?? so that my site looks even? ya i know by changing the css and other related files manually.. but is there any other easy way to do it??
    thank you in advance.

  22. Andriy
    November 2nd, 2009 at 11:53 | #22

    my datePicker shown under the editForm, рow can I get it inside the formEditor?
    example http://mkvl.reha.lviv.ua/jqgrid/
    Thanks

  23. Hemant
    November 2nd, 2009 at 14:41 | #23

    Hi Tony, thanks a lot 4 for ur ultimate work!! Hats Off…

    well, I switched from 3.5 to 3.6(beta),

    I am not able to use “grid[0].toggleToolbar()” function from in 3.6 but it was working well in 3.5.

    .jqGrid(‘navButtonAdd’,’#gridpgr’,{
    caption:””,
    title:”Toggle Search Toolbar”,
    buttonicon :’ui-icon-search’,
    onClickButton:function(){
    $(“#tblgrid”).jqGrid(‘toggleToolbar’); // <—— Is it right or something else?? Its not working :(
    //grid[0].toggleToolbar(); <—- PERVIOUS WAY
    }

    });
    Below is my script,

  24. Hemant
    November 2nd, 2009 at 14:46 | #24

    $(document).ready(function(){
    var grid;

    $.extend(jQuery.jgrid.defaults,{
    loadError : function(xhr,st,err) {
    $(‘#errorBox’).show();
    $(“#rsperror”).html(“Type: “+st+”; Response: “+ xhr.status + ” “+xhr.statusText);

    },
    loadComplete: function(){
    $(‘#errorBox’).hide();
    }
    });

    $(“#tblgrid”).jqGridImport({
    impurl: “—-someURL—-”,

    imptype: “json”,
    mtype: “GET”,
    impData : {
    pager: ‘gridpgr’,
    url:””—-someURL—-””
    },
    jsonGrid: {
    config: “config”
    },
    importComplete : function(){
    var grid = $(“#tblgrid”).jqGrid(‘navGrid’,’#gridpgr’,{add:true, edit:true, view:false, search:false, refresh:false},
    {savekey: [true,13], navkeys: [true,38,40], jqModal:false, closeOnEscape:true, bottominfo:”Fields marked with (*) are required”}, // edit options
    {savekey: [true,13], navkeys: [true,38,40],jqModal:false, closeOnEscape:true,bottominfo:”Fields marked with (*) are required”}, // add options
    {reloadAfterSubmit:false,jqModal:false, closeOnEscape:true}, // del options
    {closeOnEscape:true}, // search options
    {navkeys: [true,38,40], height:250,jqModal:false,closeOnEscape:true} // view options
    ).jqGrid(‘navButtonAdd’,’#gridpgr’,{
    caption:””,
    title:”Toggle Search Toolbar”,
    buttonicon :’ui-icon-search’,
    onClickButton:function(){
    $(“#tblgrid”).jqGrid(‘toggleToolbar’); // <—— NOT WORKING!!
    //grid[0].toggleToolbar(); <—- PERVIOUS WAY
    }
    });
    }
    });

    });

  25. Hemant
    November 2nd, 2009 at 15:03 | #25

    Let me explain above code in brief:

    -> To check server errors i hv defined #errorBox div and loadComplete,loadError in jQuery.jgrid.defaults.

    -> I am using Zend Framework so in order to avoid code repetition, I am importing common settings from a url.

    ->I am using “Integrated Search Toolbar” so I used “grid[0].toggleToolbar()” but now in 3.6(beta) its not working!!

    Finally,
    -> I am requesting for troubleshoot
    -> Is it a right approach or code can be optimized more??

  26. Dick
    November 3rd, 2009 at 16:54 | #26

    @Tony,

    I was testing multipleSearch today in 3.5.3 and noticed that the last data value always comes through as “undefined”:

    “{\”groupOp\”:\”AND\”,\”rules\”:[{\"field\":\"STOCK_NUMBER\",\"op\":\"eq\",\"data\":\"1730013R\"},{\"field\":\"PART_NUMBER\",\"op\":\"eq\",\"data\":\"undefined\"}]}”

    I hope you caught that and fixed it in 3.6.

    Best regards!

  27. November 4th, 2009 at 15:13 | #27

    Hi Tony.
    Maybe you add option for column – autowidth.
    For example if i not set column width, width calculated automatic(like in html table).
    Сделать так, чтобы если не указать width, то jqgrid вела себя как table(т.е выставляла width колумна как (width_jqgrid-width_columns)).

  28. OlegK
    November 4th, 2009 at 19:22 | #28

    Hi, Tonny!

    Could you place sources from http://github.com/tonytomov/jqGrid/tree/jqgrid36 to http://www.trirand.com/blog/?page_id=6 (download page). Download from github.com give often back an old version of jqgrid. Currently, for example, download from http://github.com/tonytomov/jqGrid/tree/jqgrid36 gives back tonytomov-jqGrid-535781d.zip with has jqgrid from September 28th, 2009. Sometime (mostly if you make some changes on github.com) the sources loaded from http://github.com has not all files. A lot of different problems very often. It would be fine the have a stably way from download of the last jqgrid36 version.

    Thanks

  29. Hemant
    November 5th, 2009 at 08:18 | #29

    Hi Tony, I am sorry I didn’t read updated documentation. My problem resolved.
    Infact I needed “onchange” event which is discussed by David Hansen.

    thanks a lot….

  30. November 5th, 2009 at 17:09 | #30

    Hello All,

    The today release for the 3.6 version of jqGrid is changed for November 8, 2009.

    The reasons are mostley connected with some problems in GitHub. I hope that they will be corrected to this date.

    I have published a 3.6 RC which can be downloaded from the same place of the original blog post for 3.6 beta again with the demo files. Also the zip contain Changes.txt file with all fixes, news and changes.

    The documentation in the wiki is updated to this release.

    I think that this is very impresive – the docs are redy before the release Wink

    Best Regards

    Tony

  31. Suresh
    November 7th, 2009 at 06:31 | #31

    Features 3.6 are Great like Dragndrop etc.

  32. waiting
    November 10th, 2009 at 09:02 | #32

    Joe Negron (LOGIC Wizards – NYC) :
    @Joe Negron (LOGIC Wizards – NYC)
    I think part of my problem is the UPDATE via a LEFT OUTER JOIN – not quite sure how that works if one or the other tables has no corresponding record. A SELECT (I think) would just leave those fields null but an UPDATE? I think it would just bomb So, #1 may not be a jqGrid problem or even jQuery but SQL… and only when updating orphaned records… but since I’m not getting any errors back from AJAX – I’m kinda blind to that fact. Does That make sense?
    It maybe be cleaner with some type of (exists? UPDATE:INSERT) logic on the back end for BOTH tables. That would be a lot more coding but I think it needs to be done… As luck would have it, I can’t even test that theory (right now) b/c they’re doing some upgrade to the db servers.

    outer join or inner join can NOT be used in UPDATE statement, only in SELECT statement. that’s: you can NOT UPDATE/INSERT more than ONE table (but can have SELECT sub-query statement with outer/inner join).

  33. Alberto B.
    November 11th, 2009 at 12:05 | #33

    Hi Tony,
    I am impressed about your job. Well done!!
    Just one question.
    If I want to use the last github release, what do I have to do?
    I have seen the package contains files non compressed in one library.
    Is there a way to build a minified/compressed version?

    Thank your very much

  34. November 11th, 2009 at 12:14 | #34

    Hello,
    In principle yes you can build the min version if you have ant installed. just look at build.xml.
    Regards
    Tony
    P.S. There is a little error in build, which I will correct right now – i.e. the charset should be not ANSI, but utf-8

  35. sepide
    June 9th, 2010 at 12:04 | #35

    hi Tony
    i cant use custom validation
    because i want set my validation error from service
    how can i?

  36. new2jquery
    July 29th, 2010 at 21:53 | #36

    Hi Tony…I am new to jquery and have to use grids…Grids are inside the portlets and i want to have a scrollbar for the grid if its larger than its container i.e portlet.please help :)

    Thanks

  37. new2jquery
    July 29th, 2010 at 21:55 | #37

    new2jquery :
    Hi Tony…I want to have a scrollbar for the grid if its larger than its container i.e portlet.please help
    Thanks

  38. Hitesh
    September 22nd, 2010 at 09:18 | #38

    Hi,

    I am a new bee to JGrid and im using 3.6 beta version. I have developed the application using the same and in which i am using tool bar search with drop down options in it. It works fine when i set loadOnce : true but i dont want in that way i want search to work from another aspx page. Can you please help me out to resolve the issue

  39. October 13th, 2010 at 00:41 | #39

    Please post an example using php component and custom validation (custom_func)

  40. Hitesh
    November 15th, 2010 at 15:22 | #40

    Hi All,
    I have successfully developed and replaced grid view of the existing application with JqGrid.Except the tool bar search functionality i.e. I dont want the user to Enter some Spl char and search instead i wanna do validation so that no spl characters are allowed to search in tool bar. I have used beforeSeearch: function() but its not getting fired up. Can u please help me out to perform the same.Thanks in advance

Comments are closed.
Privacy Policy   Terms and Conditions   Contact Information