I have the following:
$('#sidebar-tree').tree({
data: data,
autoOpen: false,
dragAndDrop: true,
selectable: false,
closedIcon: $('<i class="fas fa-angle-up"></i>'),
openedIcon: $('<i class="fas fa-angle-down"></i>')
})
Though for some nodes, I'd like to allow the user to reorder them (so dragging the node between nodes is cool) but I want to prevent the user from dropping them into other nodes. Is there a way to configure this "permitted behavior" per node?
Note: this has been asked on GitHub here: https://github.com/mbraak/jqTree/issues/598
You can use the onCanMoveTo option: https://mbraak.github.io/jqTree/#options-oncanmoveto
I think the onCanMoveTo should look like this (not tested it):
onCanMoveTo: function(moved_node, target_node, position) {
return position !== 'inside';
}
Related
I have an ag-grid table (Enterprise version: 22.1.0) which is grouped using autoGroupColumnDef property. The grouping is dependent on the table's data and the data loads on a button click. I need to update the autoGroupColumnDef property's field name (_this.colName in the below code) after the page is loaded, right before loading the data.
Table's grid options:
_this.gridOptions = {
defaultColDef: {
sortable: true,
resizable: true,
filter: true
},
columnDefs: _this.columnDefs,
rowData: [],
enableRangeSelection: true,
autoGroupColumnDef: {
headerName: "Sector",
field: _this.colName,
cellRendererParams: {
suppressCount: true
},
tooltipValueGetter: function(params) {
return _this.tooltipVal
}
},
suppressAggFuncInHeader: true,
enableBrowserTooltips: true
};
I update the variable _this.colName before setting data to the grid. I have tried the following options and none of them worked for me:
_this.gridOptions.api.refreshClientSideRowModel('group');
_this.gridOptions.api.refreshCells();
_this.gridOptions.autoGroupColumnDef.field = 'Column's Name'
Any help would be appreciated!
There is a good workaround for this. You can set autoGroupColumnDef, then remove and readd all row groupings. It will redraw the group column with the new name.
gridOptions.autoGroupColumnDef.headerName = 'new_name';
// Get current groupings
var colstate = gridOptions.columnApi.getColumnState();
var colstateclear = gridOptions.columnApi.getColumnState();
// Clear groupings
var x = 0, xcount = colstateclear.length;
while ( x < xcount ) {
colstateclear[x].rowGroupIndex = null;
x += 1;
}
gridOptions.columnApi.setColumnState(colstateclear);
// Reset groupings
gridOptions.columnApi.setColumnState(colstate);
I contacted ag-grid support and apparently this is a bug and they have it in their backlog with no ETA available for now. A workaround they provided was to use: https://www.ag-grid.com/javascript-grid-grouping/#showRowGroup.
This is not really a good workaround because the grouped columns are separated and makes the page feel cramped. Also there are some look and feel issues that keep popping up (Eg: empty space added before each column that increases with each grouped column. ie second column has 1 cm added before it, third column has 2 cm added before it and so on. I guess this was added to bring the grouped look in the group column but you wouldn't expect this behavior when the columns are separated.)
ag-grid's backlog ID for the ticket: AG-3359 - Allow the autoGroupColumn to be used in the API calls for columns, at the moment there is no way to dynamically change it after creation. (ie, setColumnDefs …)
Link to track the progress: https://www.ag-grid.com/ag-grid-pipeline/
there is a straight forward method to update the autoGroupColumnDef object and its properties with setAutoGroupColumnDef
this.gridOptions.api.setAutoGroupColumnDef(<ColDef>{
...this.gridOptions.autoGroupColumnDef, // preserve the other settings except the ones you need to change
minWidth: 500
})
if any problems with the spread operator,
do it manually:
this.gridOptions.api.setAutoGroupColumnDef(<ColDef>{
// ...this.gridOptions.autoGroupColumnDef, // preserve the other settings except the ones you need to change
headerName: this.gridOptions.autoGroupColumnDef.headerName,
minWidth: 500
})
and one more thing, add this if you have any visual bugs, like: header row gets resized but bellow rows stays the same as previus state, so the refresh of model is required:
this.gridOptions.api.refreshClientSideRowModel();
this refresh is not ideal solution, because it refreshes everything, so you will loose expanded levels for example, still no clue how to preserve all settings.
https://angulargrid.com/angular-grid/client-side-model/#refreshing-the-client-side-model
and best solution for now is tu use:
this.gridOptions.api.redrawRows();
it keeps the rows expanded if are, checkbox selected if is.
I have a custom section in Umbraco, when you click a node in my custom tree, the URL is correctly displayed and the data loads successfully.
When you then click another node in the tree (sibling, exactly the same controller and view)
All the data loads...... except for the data that should shown in the calender control. If I reload the page the data loads.
For testing, I created and added an extra control but this time it is just a Umbraco.Textbox, and the data always loads correctly
So what is it about the Umbraco.DateTime all the other controls I have on the same page load drop downs, check boxes etc
Is there something I can do in my Angular(v1.6) controller to force these to update everytime?
Update: Code in my view looks like this.
<umb-property property="vm.endDateTimeTxt">
<umb-editor model="vm.endDateTimeTxt"></umb-editor>
</umb-property>
<umb-property property="vm.startDateTimePropertyEditor">
<umb-editor model="vm.startDateTimePropertyEditor"></umb-editor>
</umb-property>
<umb-property property="vm.endDateTimePropertyEditor">
<umb-editor model="vm.endDateTimePropertyEditor"></umb-editor>
</umb-property>
And For the Umbraco.DatePicker controls this is the method that genrates the property editor
function buildUmbracoClockPropertyEditor(alias, editor, view, label, description, config, mandatory = true) {
return {
editor: "Umbraco.DateTime",
label: label,
description: description,
hideLabel: false,
view: view,
alias: alias,
value: null,
validation: {
mandatory: mandatory,
pattern: ""
},
config: {
pickDate: true,
pickTime: false,
useSeconds: false,
format: "YYYY-MM-DD HH:MM:SS",
icons: {
time: "icon-time",
date: "icon-calendar",
up: "icon-chevron-up",
down: "icon-chevron-down"
}
},
}
I have also updated the format of the string when it is loaded in to the text box so now this is before a hard refresh.
And this is after
So as you can see the data is there, it gets loaded in to the text box first time you click on a node, but required me to go to my browser address bar and press enter to get the dates to load in to the Umbraco.DateTime controls.
this is just nuts! the data is there, the format is the same... what else could it be!
The reason is that Umbraco is loading all javascript on load and we need to force it to load again.
I have tried to recycle AppPool, restart website, touch web.config etc. its not easy to reload it.
I have a treepanel and one procedure that expands the tree and selects one particular node. The problem is - I do not know how to scroll to this node, so that it becomes visible. I tried these two methods, I've seen at stackoverflow and other forums:
1.
tree.getSelectionModel().select(node);
tree.getView().focusRow(node);
2.
location.hash=node.data.id;
Take a look at this: http://jsfiddle.net/slemmon/P9TkZ/3/.
You may have to use tree.selectPath instead of SelectionModel:
tree.selectPath('/Root/path/to/your/node', 'text', '/', function (s, n) {
var nodeEl = Ext.get(tree.view.getNode(n));
nodeEl.scrollIntoView(tree.view.el, false, true);
});
Found it here: https://www.sencha.com/forum/showthread.php?251980-scrolling-to-specific-node-in-tree-panel&p=923068#post923068
Use selectPath method
tree.selectPath(node.getPath())
First of all: I'm using ExtJs 4.2.1
I have two grids: the first one collects records from a database (countries) and the second is a treegrid (should show countries and each country should expand a list of cities).
The behaviour I'm trying to achieve is that once you select a record (or multiple records) on the first grid, those records are copied to the treegrid as leafs so then I can fill those leafs with more records (cities).
I get the records from the first grid with:
grid.getSelectionModel().getSelection()
But I don't know how to copy them on the treegrid. I've tried using setRootNode and I can see the records on the "raw" property of the root node but I'm not able to show them on the grid.
What am I missing?
Updated: I've manage to get the countries with:
var records = grid.getSelectionModel().getSelection();
treegrid.getStore().setRootNode({ root: true, expanded: true, children: records})
Now I'm having problems to load the subrecords. As a test I've tried using the same "country records" to make sure there's no conflicts with the model. This is what I've tried:
var records = grid.getSelectionModel().getSelection();
for (record in records){
records[record].expanded = true;
records[record].children = records;
}
treegrid.getStore().setRootNode({ root: true, expanded: true, children: records})
This should show a list of countries and when expanding one of the records, it should show again the list as children of the selected record. It's not working :(
Solved it. I didn't liked the solution so eventually I constructed the whole thing on the backend but it was working.
Using insert/appendChild as Reimius said wasn't working since my records were not nodes so I had to loop over the country array and make each country a node with createNode(). For every country node I created, I looped through its cities, created a node for each one and then used insertChild() to associate it with the country.
Once everything was done I used:
treegrid.getStore().setRootNode({ root: true, expanded: true, children: records})
With "records" being an array of this monstrous creation of nodes.
I have an ExtJs TreePanel in which i've set the enableDrop as true and set the property ddGroup to one of the groups. I have this another ExtJs view from where i need to drag and drop the images. And i know that ddGroup defined for this is media
However the drag and drop never happens. This is my code snippet:
var treePanel = new Ext.tree.TreePanel({
"id": "myTree",
"lines": true,
"animate": true,
"enableDrop": true,
"enableDrag": false,
"ddGroup": "media",
"containerScroll": true,
"autoScroll": true,
"split": true,
"stateful": true,
"renderTo": "treeStruc",
"loader": //my loader,
"root": new Ext.tree.AsyncTreeNode(treeRootConfig),
"dropConfig": {
"ddGroup": 'media'
},
"listeners": {
"nodedrop": function(e) {
//do the check
}
}
});
Is there anything else that needs to be done?
Thanks.
Although the documentation states that nodedrop is fired when a "DD object" is dropped on a tree node, the source seems to indicate that it's still expecting a valid node.
In order to implement the drag-drop from view to tree, I believe you would have to initialize your own TreeDropZone to handle dropped DD items that are not tree-compatible nodes.
This example: http://dev.sencha.com/deploy/dev/examples/dd/dragdropzones.html shows something similar (although it is a view to grid drag-drop), but you'll likely have to use a TreeDropZone instantiation where they've used a straight out Ext.dd.DropZone object.
Also, make sure that your source view and the target tree share the same ddGroup - although I think you mentioned that they do.
I hope this is in any way helpful!