Grid row disable edit and loading indicator.

[jgornickParticipant]

Is there an established way to display loading indicators during grid add/edit/delete actions?

For example, when editing a grid cell inline, is there a way to disable the row and display a loading indicator for the row while the async request is being processed?

[Peter StoevKeymaster]

Hi jgornick,

To disabled editing of rows, see: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/disableeditingofrows.htm?arctic

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[jgornickParticipant]

Hi Peter,

Is there a way to do this runtime? The example provide only shows how to disable rows after the grid renders. I’m looking for more of a dynamic approach rather than static.

Cheers,

– Joe

[Peter StoevKeymaster]

Hi Joe,

cellsrenderer is called also when you add,remove,edit rows so it is not static.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[jgornickParticipant]

Hey Peter,

The thing about using cellsrenderer is that it is called immediately after updaterow, but before the request finished. This means that I couldn’t use it to put a row in “disabled” while the update request is processing. The other thing about cellsrenderer is it’s called too often and on all of the rows in the grid. This is a little wasteful for my scenario.

What I’m looking to do is before updaterow is called (cellendedit) put a div over the row currently being edited and prevent all editable cells from being edited. Then, after the updaterow is “committed” (cellvaluechanged), remove the div and allow the cells to be edited again.

In the example you posted, there is a way to disable cell editing by adding a cellbeginedit handler to each of the columns in the grid. Then in the handler, return false when the row is in a list of non-editable rows.

Just as a test, I’m trying to disable all cell editing in a grid by:

grid.on('cellbeginedit', function(e) {
    e.preventDefault();
    e.stopPropagation();
    return false;
});

The event fires properly, however, it seems the logic is not respecting the preventDefault, stopPropagation or return false in the event handler. Can you confirm this behavior?

Cheers,

– Joe

[jgornickParticipant]

Bump.

[Peter StoevKeymaster]

Hi Joe,

It is not possible to stop an event by calling preventDefault. That’s not an ordinary browser event to prevent its default behavior like that. If you need to disable cell editing, set the “editable” property to false.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[jgornickParticipant]

Hey Peter,

My 2 cents:

I don’t think you should look at custom events triggered from the grid as “grid events” vs “browser events”. Any event triggered from the grid (DOM or custom) should have the same abilities as the declarative event callbacks.

For example

grid
    .jqxGrid({
        // ...
        columns: [
            { 
                text: 'Name', 
                datafield: 'name',
                cellbeginedit: function(...args) {
                    // prevent default behavior
                    return false;
                } 
            }
        ],
        // ...
    })
    .on('cellbeginedit', function(e) {
        // prevent default behavior
        e.preventDefault();
    });

The point is this is “one event” that is triggered multiple ways. You should be able to perform the same actions for both handlers. Even though you are triggering events through jQuery doesn’t make them “browser events”. The grid becomes an event emitter and the type of event determines if it’s a custom or DOM event.

Cheers,

– Joe

[Peter StoevKeymaster]

Hi Joe,

The events can be used only in the way they’re documented in the Grid’s API documentation. As we have not exposed methods such as preventDefault, stopPropagation, etc and we have not documented these, then most probably they are not available.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts