How to handle events in Grid+Sub Grid?

[nuno.nogueira]

I have two grids in selector #tabela:

• $objOrcamento is the main grid
• $grid is the details grid

Now I want to handle events like cellBeforeSave, load, etc for both of them but I keep receiving the error:

Code: [Select]

Uncaught TypeError: Object #<Object> has no method 'pqGrid'
For example, to handle cellBeforeSave in $grid, I tried:

Code: [Select]

var $grid={
   //colModel, dataModel, etc...

  cellBeforeSave: function (evt, ui) {
            var isValid = $grid.pqGrid("isValid", ui);
            if (!isValid.valid) {
                evt.preventDefault();
                return false;
            }

   },
}

This isn't working, so I've tried outside var $grid:

Code: [Select]

    $("#tabela").on("pqgridcellbeforesave", function (event, ui) {
        var isValid = $grid.pqGrid("isValid", ui);
        if (!isValid.valid) {
            evt.preventDefault();
            return false;
        }
    });
But this is generating the same error.
What is the correct way to handle events in multiple grids?

Thanks in advance for your help!

[paramvir]

When you have multiple grids, especially nested ones, you can't rely upon global instance variable i.e $grid

you can get instance of the grid which generated the event from within the event itself by using $(this)

Code: [Select]

cellBeforeSave: function (evt, ui) {
            var isValid = $(this).pqGrid("isValid", ui);
            if (!isValid.valid) {
                evt.preventDefault();
                return false;
            }

   },


[nuno.nogueira]

Hi,

Thanks a lot, I was thinking (this) would help :-D

So this means that I will have to repeat the same code for the two grids. I thought i could have one event handler to validate the two grids simultaneously.

[paramvir]

You can use the same event handler for multiple grids as long as the logic in handler is same.

[nuno.nogueira]

Exactly. The problem is how to put that into practice.

Say you want to delete a row of the subgrid ($grid) which is initialized in $('#tabela'). You can call function acceptChanges, like:

Code: [Select]

function acceptChanges() {
        //more code goes here
       
           var changes = $grid.pqGrid("getChanges", {
                format: "byVal"
            }),
}
It doesn't help to use $(this), $grid or $objOrcamento.

You have to identify which grid is calling acceptChanges, but how?

[paramvir]

Good question!

You have to pass the reference of the grid obtained through $(this) in an event handler to acceptChanges ( $grid )

For example in this demo
http://paramquery.com/pro/demos/editing_batch

acceptChanges is called from an button in a toolbar (line 108). here you can obtain reference to the grid using

Code: [Select]

  //this points to button instance in the toolbar
  //so we get the parent pqGrid instance.
  var $grid = $(this).closest( ".pq-grid" );
  acceptChanges($grid);


[nuno.nogueira]

I found a similar solution: get the instance of the grid from within the event handler and pass it as an argument to the acceptChanges function. It seems to be working OK.