0

I'm having problems with Material Design Lite's table component. I defined it with the class mdl-data-table--selectable which should make its rows selectable. It does if it is statically defined in HTML, but when I create my nodes dynamically and add that to the table, it does not become selectable.

Please see this fiddle

I did add a componentHandler.upgradeElement(tr); but it does not solve the problem and it even throwed an exception so I went on without that.

Hi, since I can't find an answer to this, I'm open to new suggestions on how I can refresh a table. Currently, I am removing all its contents and generating the table again which requires adding of elements dynamically. Any suggestions are welcome.

u_mulder
  • 54,101
  • 5
  • 48
  • 64
krato
  • 1,226
  • 4
  • 14
  • 30

4 Answers4

2

From the project site:

Material Design Lite will automatically register and render all elements marked with MDL classes upon page load. However in the case where you are creating DOM elements dynamically you need to register new elements using the upgradeElement function.

http://www.getmdl.io/started/index.html#dynamic

HaloWebMaster
  • 905
  • 6
  • 16
  • I did an upgrade element but it does not work so I removed it – krato Jul 23 '15 at 01:50
  • can you point out in my fiddle where to use the upgradeElement? – krato Jul 23 '15 at 13:08
  • 2
    There's an open issue about this. I'm looking into a workaround: https://github.com/google/material-design-lite/issues/984 – HaloWebMaster Jul 23 '15 at 13:39
  • @krato: Take a look at this and see if it works for you https://jsfiddle.net/16pfgydv/ – HaloWebMaster Jul 23 '15 at 13:57
  • I see there's an issue with this. For now I will just work with hiding the rows and populating it with editing the row data. I don't see any other alternative. Btw the fiddle you linked works the same as my previous fiddle. It seems that MDL's `upgradeElement` does not work as expected. – krato Jul 24 '15 at 02:32
2

Class "mdl-data-table--selectable" will be removed. Now you can control the checkboxes by yourself.

https://github.com/google/material-design-lite/wiki/Deprecations#automatic-selection-checkboxes

Tuan Ha
  • 620
  • 2
  • 8
  • 25
0

I had this same problem and found a workaround. Create a new MDL table dynamically, including the rows you want to add, upgrade the table with:

componentHandler.upgradeElement(tableelem);

After the upgrade you can then move the rows from the new table to the one on the page by appending the row to the tbody element of the original table. The look, feel, and behavior go with the row.

The only issue I found is that the MaterialRipple behavior is not implemented on the checkboxes. This seems to be a problem with any table upgraded using the componentHandler.upgradeElement(tableelem) method. It's most likely a MDL bug.

If you get errors when running componentHandler.upgradeElement(tableelem) try specifying the behavior:

componentHandler.upgradeElement(tableelem,'MaterialDataTable');
Johnsonium
  • 2,005
  • 1
  • 13
  • 15
  • Try the recently released 1.0.5. This problem seems to be fixed in this release. Dynamically added rows to a table automatically inherit the selectable checkbox and associate animations. – Johnsonium Sep 30 '15 at 17:56
0
componentHandler.upgradeDom()

does the job, by updating any components in the document with MDL classes. Works in MDL 1.1.3.

db255
  • 1