Render Issues with two datagrids on the same page (FF and IE)

[gonzalopezzi]

When I use two datagrids on the same page, the width of the columns is not properly set. The component uses classes to set the width of the columns (r0, l0, r1, l1, etc). The Shadowdom polyfill does not provide css encapsulation in this case and the classes of the second datagrid are affecting the classes in the first one.

Slickgrid uses a runtime generated ID for the component and all the classes look like this: .slickgrid_629476 .r0 { ... }

Is it possible to add this behaviour to this component to workaround this polyfill issue?

[zoechi]

Thanks for reporting. I guess this was added after I ported it to Dart. I saw that there were issues in SlickGrid not too long ago, when more than one grid was added to a page, but didn't look closer what was the cause. Sure, this is why I packed it into a Polymer element to make this easier.

[gonzalopezzi]

Cool! If there is something I can do to help you, let me know.

[gonzalopezzi]

Zoechi, I'm in a hurry with this. I don't want to rush you ... so could you just point me in the right direction so I can try to fix it myself? I just need you to tell me where is it setting the r0, l0, r1, l1 (and so on) styles. I tried to find it last week but I had no luck.

[zoechi]

An approach would be to add the id of the grid to these rules

• https://github.com/bwu-dart/bwu_datagrid/blob/master/lib/bwu_datagrid.dart#L1202 #mygrid

    var rules = [
      "#mygrid .bwu-datagrid-header-column { left: 1000px; }",
      "#mygrid .bwu-datagrid-top-panel { height:${_gridOptions.topPanelHeight}px; }",
      "#mygrid .bwu-datagrid-headerrow-columns { height:${_gridOptions.headerRowHeight}px; }",
      "#mygrid .bwu-datagrid-cell { height:${rowHeight}px; }",
      "#mygrid .bwu-datagrid-row { height:${_gridOptions.rowHeight}px; }"
    ];

    if (columns != null) {
      for (int i = 0; i < columns.length; i++) {
        rules.add("#mygrid .l${i} { }");
        rules.add("#mygrid .r${i} { }");
      }
    }

not hardcoded but dynamically inserted from the current grid element id attribute

[gonzalopezzi]

Great! Thanks Günter. I will give it a try today.

[gonzalopezzi]

Thanks for your advice, zoechi. It was not difficult to write the fix. I have just made a pull request.