Hello,
I have used nestable2, I want to prevent child node not to dragged in another parent node. It should be dragged in its parent node only.
I have used this method of nestable2 to get source and destination. I want to put validation that child node should not dragged to another parent. it should dragged in its parent.
I have applied below method, but it is not giving me destinationtype, Please suggest help
$('#nestable').nestable({
beforeDragStop: function(l,e, p){
// l is the main container
// e is the element that was moved
// p is the place where element was moved.
var sourcetype = $(e).data('type');//field
var destinationtype = $(p).data('type');//field
var sourcegroupid = $(e).data('groupid');//5
var destinationgroupid = $(p).data('groupid');//5
if (sourcetype == 'field' && destinationtype == 'field') {
if (sourcegroupid == destinationgroupid)//suppose 5=5
return true;
else
return false;
}
}
});
Solved the problem by assigning type in ol too. Because i was trying to drag child to another ol list so i have to give same type.
just wanted to let you know that adding "data-type" to the ol element was a great logic I was missing for my own personalized nestable2 istance :D
This is my code that I used to allow children in root to only move inside main root and all their children can only move between "them". In short: 1st level elements stays on 1st level and 2nd level elements stays on 2nd level.
beforeDragStop: function(l,e, p){
var type = $(e).data('type');
var type2 = $(p).data('type');
if(type == 'root')
{
if(type2 != 'rooter')
return false;
else
return true;
}
else if(type == 'child')
{
if(type2 == 'rooter')
return false;
else
return true;
}
}
Related
In Ag-grid you can navigate with the keyboard. When you use grouping you can press enter to expand the current node.
Is there a way to stop this when the node is a leaf?
GroupCellRenderer.prototype.onKeyDown = function (event) {
var enterKeyPressed = isKeyPressed(event, KeyCode.ENTER);
if (!enterKeyPressed || this.params.suppressEnterExpand) {
return;
}
var cellEditable = this.params.column && this.params.column.isCellEditable(this.params.node);
if (cellEditable) {
return;
}
this.onExpandOrContract();
};
This is the code that checks if the node should be expanded.
So I would need suppressEnterExpand to be a function so I can give it some context on the current node.
Or it should not try to call the expand when it's on a leaf.
I created a new tool in ContentTools that adds a static table (I don't want you to edit).
But being a static element doesn't maintain focus and I can not remove it when I click remove button.
I can do so that the table is not editable but can be removed if you click on it?
That's how I created the element:
new ContentEdit.Static('div', {'data-ce-moveable': true}, '<table><thead><tr><th>Foo head</th></tr></thead><tbody><tr><td>Foo body</td></tr></tbody></table>')
Thank you!
Static elements can't be interacted with for the most part (other elements can be dragged around them but that's about it). ContentEdit/Tools does allow you to restrict the some behaviour for elements but not being able to modify the content of a text element isn't one right now (though I think this might be a worthy addition).
However whilst there's no set way to do this at the moment here's an approach you can use that should provide the behaviour you describe (do let me know how you get on):
ContentEdit.Root.get().bind('mount', function(element) {
// We only care about `TableCell` elements
if (element.type() != 'TableCell') {
return;
}
// We only want to make the element read-only if the parent table has
// the `data-read-only` attribute.
var table = element.closest(function(node) {
return node.type() == 'Table';
});
if (table.attr('data-read-only') !== undefined) {
// Disable text editing for the table cell
element.tableCellText()._onKeyDown = function(ev) {
ev.preventDefault();
}
}
// Disable dragging of the table rows
var tableRow = element.closest(function(node) {
return node.type() == 'TableRow';
});
tableRow.can('drag', false);
tableRow.can('drop', false);
});
I'm having a problem where I have a listview that contains a group of spinners. If I select an option for the first spinner and then scroll down I'll see a spinner that I haven't even touched has the same value as the first spinner I just set. I'm assuming this is an issue with the Spinner view being recycled and improperly used below. Has anyone else ran into this issue with spinners? I'm thinking we need to implement a solution similar to this in MvxAdapter?
I implemented my own MyMvxAdapter and MyMvxListView to handle this. The only thing I changed in the MyMvxListView was to have it use MyMvxAdapter as its adapter instead of the normal MvxAdapter. I then changed the GetBindableView in MyMvxAdapter to look like this:
protected virtual View GetBindableView(View convertView, object dataContext, int templateId)
{
if (templateId == 0)
{
// no template seen - so use a standard string view from Android and use ToString()
return GetSimpleView(convertView, dataContext);
}
// we have a templateid so lets use bind and inflate on it :)
var viewToUse = convertView as IMvxListItemView;
if (viewToUse != null)
{
if (viewToUse.TemplateId != templateId)
{
viewToUse = null;
}
}
if (viewToUse == null)
{
viewToUse = CreateBindableView(dataContext, templateId);
}
else
{
var spinner = (MvxSpinner)convertView.FindViewById(Resource.Id.taskFieldSpinner);
if (spinner != null)
{
spinner.SetSelection(((WrappedEmployeeTaskField)dataContext).TheField.SpinnerSelection);
}
BindBindableView(dataContext, viewToUse);
}
return viewToUse as View;
}
You'll notice the only real difference is that I needed to directly access my spinner resource to properly set it if viewToUse is not null. Then the last of the "magic sauce" was to keep track of the spinner's selected value on my data model, in this case as the property "SpinnerSelection" on my model which gets filled in every time the value gets selected.
I've got a CellTree working with simple text cells.
Now I want, for every tree node, a different kind of cell depending on if it is a leaf or not.
This cells would be:
(1) if the node is a leaf (doesn't have children): a TextCell
(2) if the node is a root (it has >= children):.
- It must display the same string as the leafs
- + 1 clickable image (this is an icon that is used to rename the node's name).
- + 1 clickable image (this is an icon that is used to remove the node).
I've tried with:
(1) Custom cell, extending AbstractCell. The point here is that I can't get the clickable images to respond to de mouse click. So no action can be performed (edit name or remove node).
(2) CompositeCell. The point here is that altought I get the clickable images to respond on mouseclick, I can't get an implementation that chooses correctly which kind of cell must be displayed (based on if it has children or not, show TetxCell or custom cell with icons).
Could someone explain how I could achieve this? My code so far is:
public NodeInfo getNodeInfo(T value) {
if (value == null) {
return new DefaultNodeInfo<CellTreeNode>(treeData.getDataProvider(), new IconCell(!isLeaf(value)),
selectionModel, null);
}
else if (value instanceof CellTreeNode) {
CellTreeNode node = (CellTreeNode) value;
//data provider for this cell
ListDataProvider<CellTreeNode> nodeDataProvider = new ListDataProvider<CellTreeNode>(node.getChildren());
IconCell nodeCell = new IconCell(this, node, !isLeaf(node));
// add a reference to the visual representation of the element
node.setCell(nodeCell);
return new DefaultNodeInfo<CellTreeNode>(nodeDataProvider, nodeCell,
selectionModel, null);
}
// Unhandled type.
String type = value.getClass().getName();
throw new IllegalArgumentException(
"[CellLargeTreeListBox] Unsupported object type: " + type);
}
// Check if the specified value represents a leaf node. Leaf nodes cannot be
// opened.
public boolean isLeaf(Object value)
{
if (value == null) return false;
CellTreeNode node = (CellTreeNode) value;
return value instanceof CellTreeNode && !node.isRoot();
}
The cell won't depend on the value it'll display, but on the value of the parent node.
So, you'll need a generic cell that supports both renderings/behaviors and switches between them based on the value it's asked to display: for a value that you can tell is a leaf, then only render text, otherwise also render the images/buttons (note you can also render the same HTML –to make it possible/easier to use a CompositeCell– but switch visibility of the images/buttons using CSS (class=xxx rendered on a container element).
I'm trying to prevent the dragging and dropping of nodes outside of the parent node ("LLCA") with no luck.
Any suggestions?
Image of Treeview
I ended up getting it to work using your code below:
function onDrop(e) {
var dst = e.destinationNode;
var first = $('.k-item:first');
var pos = e.dropPosition;
if (dst && dst.uid === first.uid && pos !== "over") {
e.setValid(false);
}
}
Lets define the treeview:
var tree = $("#tree").kendoTreeView({
dataSource :content,
dragAndDrop:true
}).data("kendoTreeView");
What I'm going to do is add a drop callback where I will control that:
We are not dropping outside the tree
We are not dropping before or after the first node of the tree
The definition of the tree would be:
var tree = $("#tree").kendoTreeView({
dataSource :content,
dragAndDrop:true,
drop :function (ev) {
var dst = tree.dataItem(ev.destinationNode);
var first = tree.dataItem(".k-item:first");
var pos = ev.dropPosition;
if (dst && dst.uid === first.uid && pos !== "over") {
console.log("invalid");
ev.setValid(false);
}
}
}).data("kendoTreeView");
Check http://docs.kendoui.com/api/web/treeview#drop for information on drop event.
Because I cannot comment on an answer, I will write my own.
User Mithrilhall asked about MVC wrappers, also the top answer only prevents movement to the root node.
I will attempt to answer both Mithrilhall and provide an example where you can only move a child within the context of its parent. To put it another way, to only allow children of any parent to change their order within the parent.
Firstly, for MithrilHall, this is how you get to the events in MVC.
#(Html.Kendo().TreeView()
.Name("ourTreeView")
.Events(e => e.Drop("treeViewDrop"))
There are other events in treeview, you can take a gander for yourself. The argument is the name of a javascript function. Here is an example javascript function for this MVC wrapper to prevent children from moving outside of their parent, but allowing them to still move within the parent.
<script type="text/javascript">
function treeViewDrop(dropEvent) {
var treeView = $("#ourTreeView").data("kendoTreeView");
var destination = treeView.dataItem(dropEvent.destinationNode);
var source = treeView.dataItem(dropEvent.sourceNode);
if (!(destination && destination.parentID == source.parentID)) {
dropEvent.setValid(false);
}
}
</script>
I had a parentID field modeled in my datasource. You could accomplish this in many ways. The dataItem method returns a kendo treeview item, so it has all of your modeled fields in it.
Also understand, this solution does not change the widget to show an X when you are moving to a place you cannot drop to. This is another problem with another solution.
I hope this helps, good luck!