0

In my grid, when the "Add" button on grid toolbar is clicked, a new empty row will be added into grid. Also, all rows will be changed to edit mode.

My problem is that there is an automatic focus on row when it is changed to edit mode. I change the mode of row from the top of grid to the bottom. So the grid always focus to the row on the bottom when the change finishes. But the new empty row is at the top of grid. So user cannot see the new empty in case of there are many rows in grid.

Here is my function to change row to edit mode:

    function Grid_EditMode(event, grid) {
    var g;
    if (grid !== null && grid !== undefined) {
        g = grid;
    } else {
        g = $(this);
    }

    HideFilterRow(g);

    var ids = g.jqGrid('getDataIDs');

    for (var i = 0; i < ids.length; i++) {
        var cl = ids[i];
        g.editRow(cl);
    }

    g.jqGrid('resetSelection');

    $('input[id*=Date]').datepicker();
    $('input[id*=Date]').dateEntry({ spinnerImage: '' });
    //change button status
    $('#pager' + g.attr('id') + " [id*='btnGridAdd']").removeClass('pagerBtn');
    $('#pager' + g.attr('id') + " [id*='btnGridEdit']").removeClass('pagerBtn');
    $('#pager' + g.attr('id') + " [id*='btnGridDelete']").removeClass('pagerBtn');
    $('#pager' + g.attr('id') + " [id*='btnGridReset']").removeClass('pagerBtn');
    $('#pager' + g.attr('id') + " [id*='btnGridEdit']").addClass('pagerBtn');

}

Is there any way to disable the focus when changing the row to edit mode?

Note that this problem only occurs on IE, not on chrome. I'm using the jqGrid 4.5.2

Khoa Nguyen
  • 55
  • 7
  • You should always write **which jqGrid version you use and which fork** ([free jqGrid](https://github.com/free-jqgrid/jqGrid), [Guriddo jqGrid JS](http://guriddo.net/?page_id=103334) or an old jqGrid in version <=4.7). The solution depend on the fork and the version. Moreover it's good to include the code which you use. One need to use additional parameters of `editRow` to implement your requirements. Do you call `editRow` explicitly in your code? – Oleg Oct 30 '15 at 08:20
  • @Oleg: Thank Oleg for advice! I will update my question. I'm using `editRow` method to change the mode of row. I don't see any paramete of `editRow` that can resolve my problem. So I really don't understand what you mean. Would you please explain more? By the way, I'm using jqGrid 4.5.2 – Khoa Nguyen Oct 30 '15 at 08:38

1 Answers1

1

jqGrid 4.5.2 is very old version. It was published 2.5 years ago. editRow supports focusField parameter starting with version 4.7. If could be Boolean or Number (column index) in jqGrid 4.7. Free jqGrid allows the usage of String (column name) and, starting with 4.10.0, Event or DOM element as the value of focusField parameter (see the answer and this one).

In your case one can use focusField: true option of editRow. You need just change g.editRow(cl); to g.editRow(cl, {focusField: false}); if you would use jqGrid 4.7 or higher. I would recommend you to use the latest version (4.10.0) of free jqGrid. If you can't upgrade to newer version of jqGrid then you can set the focus to another editing field manually after the last call of editRow. You can add the following code after the loop where you call editRow

$("#" + ids[0])
    .find("input,textarea,select,button,object,*[tabindex]")
    .filter(":input:visible:not(:disabled)")
    .first()
    .focus();

$("#" + ids[0]) get the first row (<tr>), then one find all child elements which can have focus, filter for visible and not disabled elements and finally set the focus on the first from the elements.

Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • Thanks very much for your answer! I has already implemented to set the focus to another editing field manually before making this question. But when I do that, the grid will go to the bottom of grid before focus on the top row (my new empty row). Although it happens very fast, it still makes user confused. I have tried to upgrade my jqGrid to your fork (jqGrid 4.10.0), but there are many conflicts with my current code. Fo now, I have no time to fix these bugs. Do you have any other to resolve this? Thank you a lot again! – Khoa Nguyen Oct 30 '15 at 10:15
  • @KhoaNguyenHoangAnh: You are welcome! By the way you can just change the order in the loop `for (var i = 0; i < ids.length; i++) {...}` to go from bottom to top. It will reduce your problems. Which kind of conflicts you have during upgrading to free jqGrid 4.10.0? I try to improve the compatibility to old version and such information could be interesting for me. Do you have the demo code, which reproduce the compatibility problems? – Oleg Oct 30 '15 at 10:21
  • When I try to upgrade my jqGrid to version 4.10.0, I get the error "Critical ERROR!!! One uses probably $.extend($.jqGrid.defaults,{...}) to set default setting of jqGrid insteads of the usage the DEEP version of jQuery.extend (with true as the first parameter): $.extend(true, $.jqGrid.defaults,{...})...". Do you kwow this error? – Khoa Nguyen Oct 30 '15 at 10:59
  • @KhoaNguyenHoangAnh: I tried to detect some compatibility problems. It's one from the error messages. You should verify 1) that you use **new version** of local files (`grid.locale-de.js`, for example). you can remove `grid.locale-en.js` by the way because it's included in the main code and 2) you should search your code for `.jgrid.defaults` string. You set probably some jqGrid defaults in the form `$.extend($.jgrid.defaults, {...});`. You need just add additional `true` parameter in the statement to have `$.extend(true, $.jgrid.defaults, {...});`. Such change should fix the problem. – Oleg Oct 30 '15 at 11:07
  • I resolved the problem by removing `grid.locale-en.js`. I don't realize that I include `grid.locale-en.js` in my code. Now, i get an issue when getting the instance of grid. Like you see at the top lines of the function (example: `g = $(this)`) in my question above, that is the way I get instance of grid. With version 4.10.0, it doesn't work. So I need more time to refactor my code. I think I can resolve my problem with jqGrid 4.10.0. Actually, I see a lot of interesting and helpful updates in your version. I want to give you a big thank for your helping! Hoping you have a nice weekend. – Khoa Nguyen Oct 30 '15 at 11:30
  • @KhoaNguyenHoangAnh: You are welcome! The code fragment, which you use included in the question is just a code fragment and it's unclear *how you use `Grid_EditMode`* for example. In any way you can prepare any demo (JSFiddle or any other) which uses non-minimized code of jqGrid. If I can debug the demo and have some testcase to reproduce the problem I can help you. – Oleg Oct 30 '15 at 11:55