Hello Kendo-Team,

I have the following bug with multiple Inline Editing Grids using Internet Explorer 8. The bug only occurs in native IE8. It does not occur if you simulate (via the IE Developers Toolbars) IE8 behavior in IE versions > 8. So to reproduce this bug, you need IE 8.

I think the problem is a timing problem. If you edit a cell in the first grid, and then click into a cell of the second grid (or create a new row in the second grid), the EditorTemplate for the second grid cell is not completly initialized and the binding does not work. See screenshot  #1 (IE8_MultipleGrids_Bug.png).

If you first leave the edit mode of the first grid (for example, by clicking outside the grid)  and then click into the cell of the second grid then it works without any errors. See screenshot  #2 (IE8_MultipleGrids_Working.png)

So I assume, the problem is, that the first grid is still in editing mode, when the second grid switches to editing mode. You can notice that wrong behavior only in IE 8.

One funny (or weird) thing I noticed while testing, if you have multiple grids, and you click from the most bottom grid in one of the top grids it works, but it does not work if you click from the top grid to grids below...

Can you please help me on that bug. It is a very critical bug for our clients. Any ideas or workarounds?

Thanks.

Hello Dietmar,

The Grid creates textboxes with name and id attributes during editing. If you are using the same data fields in the two Grids, the names and ids will turn out to be the same, which should not be allowed. You have two options:

1. use different field names in the Grids' datasources.

or

2. ensure that users are not able to enter edit mode in one Grid before explicitly exiting edit mode in all other Grids. The easiest option is to use modal popup editing. Alternative solutions that require custom coding include: hiding butttons or Grids when needed; adding some transparent overlays over the non-edited Grids, so that they are not clickable, etc.

The weird thing that you reported is quite logical and expected - when there are two elements with the same ID on the page, referencing this ID will return the first element, so the new edit widgets are successfully initialized.

Regards,
Dimo
Telerik

Hello Dimo,

thanks for your fast reply.

Indeed, the problem are the same binded property names for drop down lists and auto complete controls in the grids, even if they have a completly different data source.

I don't understand, why this bug only occurs in IE 8. For all other browsers it works having the same property names on the data sources. I assume in IE8 the "End Grid Editing" event for the previous grid is called AFTER the "Begin Grid Editing" event for the current grid...

What should I do, if I need to create multiple Grids (I have a partial view of my grid) from the same data source at runtime? I cannot change the binding property names for each grid, because I need the same data source for all those grids.

I get the the the grid view from an ajax call and simple put the result in a html table row for each grid.
Can I manipulate the ajax response (which contains the grid html) in any way, before adding it to the html table row? Do I need to modify any property names of the response to get it working?

You suggested making a popup edit grid, but that is not a solution for our customer. The customer wants an inline batch grid. Also adding an overlay over the unused (not focused) grids is not an option. I simply want the same behavior (even it is a dirty or really dirty workaround) in IE8 like it is in all other browsers.

Please help me on that. Thanks a lot.

Greetings

Hello,
in the meanwhile I just found a workaround to get multiple grids with the same data source working in IE 8.

I have my grid definition in a partial view. Whenever I need to create a new grid, I simple make an ajax call to the controller, which returns my grid as a result.
Now here comes the magic:
- Just replace the property name that is bound to the grid with a new property name (I just append an index of the grid to the property name to make it unique)
- Then I add the modified result string in a html table row and the grid is shown on the page.

Now all the grids work fine in IE8 (and in all other browsers), because all of them have different bounded column names.

When posting on the controller, of course you have to replace the grid json properties back to the original values before you can deseralize them in data object. Thats it.

Greetings