khan4019/tree-grid-directive

Remote data contains column names...

CobraFlow opened this issue · 11 comments

CobraFlow commented

I have a static tree grid working fine but would now like two features :

  1. Dynamic col_defs.
    The idea here is that the data is retrieved from an external source via a promise. Once the promise is complete, I have both the col_defs and the tree_data. Is there any way to 'refresh' or 'reload' the tables from the new definition?

  2. Different col_defs per branch.
    I have a requirement to have different col_defs per branch. Is this possible?

Kind regards

jirihelmich commented

+1 for dynamic col_defs, I assumed it works like that and now I'm wondering how to use the directive.

jirihelmich commented

Sorry, after diving into the source code, I found a way, I just need to keep using the same array, since the reference to it is set just during compile and is not updated later.

So, to use it dynamically:

$scope.colDefs = [];

allMightyApi.loadData(function(data){
...
   updateColDefs(data);
...
});

function updateColDefs(data){
   $scope.colDefs.length = 0; // you can't do $scope.colDefs = []; it will not update
   data.columns.forEach(function(c){
       $scope.colDefs.push(transform(c));
    });
}

function transform(c){
    // anything you need to do
}
  • 👍1
holimL commented

This helped me a great deal, thanks!!

Hesesses commented

Wow, thanks @jirihelmich!

TrueDub commented

I've added a link to this issue to the readme, to share the knowledge. Closing the issue.

zatchgordon commented

So OP asked 2 questions and only the first question was answered. I'm also wondering about question number 2. Is there anyway to have different col_defs per each branch?
Example:
The first row has columns : lastName, firstName, Email
but then the second row has : firstName, lastName, phoneNumber, jobTitle
(and then the third column has completely different col_defs)

Is that possible with the current code? Is it ever going to be possible with this directive?

Deleted user commented

how use drag and drop item? thanks

rezanadimi72 commented

HI
i want to hide first column that automatic create!!!
is it possible???

zatchgordon commented

@rezanadimi72 It looks like the only possibility (without changing code yourself) is to change what icons are shown

<tree-grid
    icon-leaf     = "icon-file"
    icon-expand   = "icon-plus-sign"
    icon-collapse = "icon-minus-sign">
</tree-grid>

hypothetically you could make them invisible by giving them a class that doesn't exist.

Alternatively, assuming your tree-grid has the class of "tree-grid" you can use the following css

        .tree-grid tr th:first-child {
            display: none;
        }

        .tree-grid tr td:first-child {
            display: none;
        }

Finally, I don't think there is a point to doing this. The first column is what offsets "children" rows which is the whole reason for using this directive. Getting rid of the first column would make this directive act like a regular table. It seems like you might actually want a grid directive such as ui-grid.

ANaveenA commented

Do you have anything like this for Angular 5 table bootstrap tree.will it supports angular5

Deleted user commented