We Keep Coding

fancytree - sortable getting the order of nodes, sorting in same nest level only

I am using fancytree with sortable extensions and I found 2 problems which I am trying to fight for hours. Maybe someone might help me.
The goal is to be able to sort between elements in the same nest level, but now I am only able to sort root nodes.
Second think is more important and I have no idea why it works like that. When I am trying to get fancytree nodes (of course i would like to get them in current sorted order), all the time I get same order without relying on view display.
I am using these event to get nodes: $('#tree').fancytree("getTree").toDict()
html:
<div id="tree"></div>
Javascript:
$(function() { // on page load
$("#tree").fancytree({
debugLevel: 0,
selectMode: 1,
extensions: ["dnd"],
source: [{
title: "Node 1",
key: "1",
"baloney": 44
},
{
title: "Node 2",
key: "2432"
},
{
title: "Folder 2",
key: "2",
folder: true,
children: [{
title: "Node 2.1",
key: "3",
myOwnAttr: "abc"
},
{
title: "Node 2.2",
key: "4"
},
{
title: "Node 2.3",
key: "5"
}, {
title: "Node 2.4",
key: "6"
}, {
title: "Node 2.5",
key: "7"
}
]
}
],
dnd5: {
preventForeignNodes: true,
preventRecursiveMoves: true, // Prevent dropping nodes on own descendants
preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
dragStart: function(node, data) {
return true;
},
dragEnter: function(node, data) {
return true;
},
dragDrop: function(node, data) {
data.otherNode.moveTo(node, data.hitMode);
},
activate: function(event, data) {
},
draggable: {
appendTo: "body",
connectToSortable: '#tree > ul',
containment: "parent",
revert: "invalid"
}
},
});
$('#tree > ul').sortable({
connectWith:"#fancytree",
out: function(event, ui) {
if (event.originalEvent.type === "mousemove") {
$(ui.item).data('drugout', true);
}
}
});
});
And here is fiddle link: Link

You need to add sortable to the child nodes also. Add the below code to fancytree initialization. This function basically observes child node expands and then activates sortable for the child nodes.
expand: function() {
$('.fancytree-has-children').siblings().sortable();
},
I have updated the jsfiddle also. Check the link: https://jsfiddle.net/3zmLfe1h/11/
Answer to your 2nd Question: I am not sure about it but I guess maybe fancytree is saving the order in some way and returning it to you whenever you are trying to get it. You can get all the values using jQuery and Sortable though.

Kendo UI Grid - Custom command button disabled depending on boolean property

How can I set the class to disabled for a custom command on a Kendo grid depending on the boolean value of a property?
I want to use this approach to make the button disabled:
https://docs.telerik.com/kendo-ui/knowledge-base/disable-the-grid-command-buttons
Javascript:
{ command: { name: "custom", text: "Exclude", click: excludeCategorization }, title: " ", width: "60px" }
I want to add a condition like this using the property IsEnabled but if possible using the k-state-disabled class
#= IsEnabled ? disabled="disabled" : "" #

I don't believe you can assign classes conditionally through a template, however you can use the dataBound event to crawl through the rows and manipulate the classes. I would start with all of them disabled and then enable the ones that need to be active, but you can build your own logic. Here's an example:
<div id="grid"></div>
<script>
var grid;
$("#grid").kendoGrid({
dataBound:function(e){
var grid = $("#grid").data("kendoGrid");
var items = e.sender.items();
items.each(function (index) {
var dataItem = grid.dataItem(this);
$("tr[data-uid='" + dataItem.uid + "']").find(".excludeCategorization").each(function( index ) {
if(dataItem.isEnabled)
{
$(this).removeClass('k-state-disabled')
}
});
})
},
columns: [
{ field: "name" },
{ field: "enabled" },
{ command: [{ className: "k-state-disabled excludeCategorization", name: "destroy", text: "Remove" },{ className: "k-state-disabled", name: "edit", text: "Edit" }] }
],
editable: true,
dataSource: [ { name: "Jane Doe", isEnabled: false },{ name: "John Smith", isEnabled: true } ]
});
</script>
Here's a link to a Dojo: https://dojo.telerik.com/ubuneWOB

how to build href in bootstrap-treeview?

I'm using bootstrap-treeview to display a tree-like view of my data. The initial and basic implementation is working but I need it to when I click the text value, i get redirected to the link.
The JS function that renders the tree is:
function initTree(treeData) {
$('#treeview_json').treeview({
data: treeData,
enableLinks: true
});
// collapses all nodes
$('#treeview_json').treeview('collapseAll', { silent: true });
}
The enableLinks: true node property renders the link. But I could not find any documentation or example on the href property.
Does the link has to be supplied with the data or can it be built by the javascript?

You pass href as node attribute (see https://github.com/jonmiles/bootstrap-treeview#node-properties), so it is supplied with the data:
var tree = [
{
text: "Parent 1",
nodes: [
{
text: "Child 1",
nodes: [
{
text: "Google",
href: "https://www.google.com"
},
{
text: "Twitter",
href: "https://www.twitter.com"
}
]
},
{
text: "Facebook",
href: "https://www.facebook.com"
}
]
}
];
Check this example: https://jsfiddle.net/beaver71/bvpncxko/

Remember you must have enableLinks:true
function initTree(treeData) {
$('#treeview_json').treeview({
data: treeData,
enableLinks: true,
});
}

Displaying object inside object in kendo grid

I new with kendo and I have problem with kendo grid. I have structure like this
var data = [{
key1: value1,
key2: value2,
objectInside: [{
insideKey1: insideValue1,
insideKey2: insideValue2,
insideKey3: insideValue3
},
{
insideKey1: insideValue1a,
insideKey2: insideValue2a,
insideKey3: insideValue3a
},
{
insideKey1: insideValue1b,
insideKey2: insideValue2b,
insideKey3: insideValue3b
}]
}];
and I need to create kendo grid and fill it with objectInside elements. For now I can display one of the element of the array:
var grid = $("#grid").kendoGrid({
pageable: true,
selectable: "row",
dataSource: data
columns : [
{ field: "objectInside.insideKey1[0]", title: "Value1:" },
{ field: "objectInside.insideKey2[0]", title: "Value2:" },
{ field: "objectInside.insideKey3[0]", title: "Value3:" }
]
}).data("kendoGrid");
But I do not have idea how to reach all the elements. Without indexing it doesn't work. It is possible to make loop here? I thought about making another variable contain only objectInside and try to read only this element but I failed here too. I try to do it like this:
var newData = data.objectInside;
or
var newData = JSON.stringify(data.objectInside);
Could anyone give me a hint how to deal with it?

Try this template:
{ template: "#= data.objectInside[0].insideKey1 #", title: "Value1" },
{ template: "#= data.objectInside[1].insideKey2 #", title: "Value2" },
{ template: "#= data.objectInside[2].insideKey3 #", title: "Value3" }
Demo
But this will show only one row, because the grid data contains one item in the first level. You can do like this to show all your data inside insideObject.

Cell values not displayed correctly in Kendo UI Grid using custom DropDownList editor

The title may be confusing, but I had a bit of trouble explaining myself in a single sentence, so read on for a bit more detailed scenario.
I am trying to get a Kendo UI DropDownList working correctly when used as an editor in a Kendo UI Grid.
I've got the following #model in my view;
{
"DataItems": [
{ "Id": 1, "Name": "Foo", "Category": { "Id": 1 } },
{ "Id": 2, "Name": "Bar", "Category": { "Id": 2 } }
],
"CategoryOptions": [
{ "Id": 1, "Name": "A" },
{ "Id": 2, "Name": "B" },
{ "Id": 3, "Name": "C" }
],
}
This is passed to my script, which upon initializing constructs the following data source and grid
var gridDataSource = new kendo.data.DataSource({
data: _model.DataItems,
schema: {
model: {
id: "Id",
fields: {
Id: { type: "number", editable: false, nullable: false },
Name: { type: "string", validation: { required: true } },
Category: { type: "object" },
}
},
}
});
$("#grid").kendoGrid({
dataSource: _model.DataItems,
columns: [
{ field: "Id", hidden: true },
{ field: "Name", width: "200px", title: "Name", },
{ field: "Category", title: "Category", editor: categoryDropDownList, template: "#= (Category != null && Category.Name !== null) ? Category.Name : ' ' #" },
{ command: "destroy", title: " "}
],
toolbar: ["save", "cancel"],
editable: true,
});
As you'll notice this grid is in-line editable, so clicking a cell will allow you to edit its contents. To edit Category I've added a custom editor (categoryDropDownList), which displays _model.CategoryOptions.
function categoryDropDownList(container, options) {
$('<input data-value-field="Id" data-text-field="Name" data-bind="value:' + options.field + '"/>').appendTo(container)
.kendoDropDownList({
dataSource: _model.CategoryOptions,
dataValueField: "Id",
dataTextField: "Name",
});
}
This seems to work as expected.
You can click the Category cell, and select a value (A, B, or C). When you remove focus from that cell, a small flag appear in the top left corner to mark that cell as dirty, requiring you to save changes.
In my model the data item Bar has the category B. This means that upon loading the page, one would expect the cell value of Category to be B, as dictated by the template;
#= (Category != null && Category.Name !== null) ? Category.Name : ' ' #
Instead the text value in the Category cell is always empty, as if you hit the else of the ternary if template, which shouldn't be the case. It should be B.
However, if you click the cell to reveal the editor, you'll notice that the selected item in the DropDownList is actually B. Remove focus from the cell, and the value disappears with the DropDownList.
So it's as if the editor knows about the selected category, but the grid doesn't.
Does this make any sense for you guys?
Please leave a comment if you need a better explanation, more code etc.

It's most likely because the editor template is asking for Category.Name, but it is null. The Category object in DataItems only has Id defined and has no idea that there is a relationship defined at CategoryOptions.
In your editor template, you can try something like this (or similar).
#= (Category.Id !== null) ? $.grep(CategoryOptions, function(e){ return e.Id == Category.Id; })[0].Name : ' ' #
Basically, return the Name of the object in CategoryOptions with an Id that matches the Category Id of DataItem.
If trying that does not work, you can try the column.values configuration that kendo supports. I imagine it would look something like this:
Your category column (no more template):
{
field: "Category",
title: "Category",
editor: categoryDropDownList,
values: CategoryOptions
},
Your data model would then need to be like this:
{
"DataItems": [
{ "Id": 1, "Name": "Foo", "Category": 1 },
{ "Id": 2, "Name": "Bar", "Category": 2 }
],
"CategoryOptions": [
{ "value": 1, "text": "A" },
{ "value": 2, "text": "B" },
{ "value": 3, "text": "C" }
],
}
Adding function to kendo template context
Declare your wrapper function inline as part of the editor template:
"# var GetCategoryNameById = function(id){ return $.grep(CategoryOptions, function(e){ return e.Id == id; })[0].Name; }; # #= GetCategoryNameById(name) #"
Kendo Template Hash Usage FYI:
#= # --> Render as HTML
# # --> Arbitrary JS