Not sure how to use umb-table
m
Hi, I am wondering how to get the select all box working as by default, its marked and I can't even get it unchecked. Also the sorting/unsorting isn't working either. Now I am sure I need more code than what I have copied from the API doc but if anyone could guide me a bit here, that would be appreciated. Here is my code:
Copy code
html
<umb-table
                  ng-if="vm.items"
                  items="vm.items"
                  item-properties="vm.options.includeProperties"
                  allow-select-all="vm.allowSelectAll"
                  on-select="vm.onSelect"
                  on-click="vm.onClick"
                  on-select-all="vm.selectAll"
                  on-selected-all="vm.onSelectedAll"
                  on-sorting-direction="vm.onSortDirection"
                  on-sort="vm.onSort"
               >
               </umb-table>
Copy code
js
vm.onSelect = onSelect;
      vm.onClick = onClick;
      vm.selectAll = selectAll;
      vm.onSelectedAll = onSelectedAll;
      vm.onSortDirection = onSortDirection;
      vm.allowSelectAll = true;
      vm.onSort = onSort;

      function selectAll($event) {
         alert('select all');
      }

      function onSelectedAll() {
         return true;
      }

      function onClick(item) {
         console.log('clicked', item);
         alert('click node');
      }

      function onSelect(selectedItem, $index, $event) {
         alert('select node');
      }

      function onSortDirection(col, direction) {}

      function onSort(field, allow, isSystem) {}
https://cdn.discordapp.com/attachments/1194969651894026330/1194969652032454696/0.png?ex=65b24936&is=659fd436&hm=94008e1a22d39aaa6f174c0e44d1e42cb625daacaafafae0e336b475fc233165&
j
You'd probably want to have a var telling you whether all are currently selected or not - looks like it expects it to be in vm.isSelectedAll() - https://github.com/umbraco/Umbraco-CMS/blob/2e61d6449ae8e0c837dafa1e93ac950eda36c4f2/src/Umbraco.Web.UI.Client/src/views/components/umb-table.html#L10 Then you can do something like this to toggle them all on/off
Copy code
js
vm.items.forEach(function(item){
  item.selected = vm.isSelectedAll()
})
m
ah okay will try this thank you 🙂 could you please also assist with how to implement the sorting feature in the table?
j
Hmm actually it looks like the listview has an example of using the table, you can see it in the view and controller here: https://github.com/umbraco/Umbraco-CMS/tree/2e61d6449ae8e0c837dafa1e93ac950eda36c4f2/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/list
m
thank you for all these examples it actually helped me understand how Umbraco Dashboard is built I wish the docs were better than how it is right now cuz its really lacking a lot of guides to do a lot of things related to creating custom sections/dashboards using its API :/
j
Yea checking the source code is often the best way.
m
a bit off topic question is there any way to get umbraco dashboard hot reload (or even load the changes when i hit refrest) whenever I change CSS/JS cuz right now, i have to quit -> build -> run the solution to see the changes
j
If you are running in debug mode you should be able to do a refresh of the page to just get it. Often the browser caches something anyways though, so I normally do a full refresh of the page: https://cdn.discordapp.com/attachments/1194969651894026330/1195016159041425428/image.png?ex=65b27486&is=659fff86&hm=081fdcb1cd5006e422acecc820ab88cec09266b6a00d8c01bc04f6cb916d9a20&
m
ah ok just tried this didn't work sadly
134 Views