Kendo UI TreeView Drag and Drop get the destination (dropped) treeview object - javascript

I have two TreeViews structure with drag and drop functionality.
The nodes from both the Treeviews can be dragged and dropped on one another.
If I am dragging some content from source to destination i want updated list of destination in console
For reference you can check link here.
In this DEMO I can move something from one category to another but I want to capture the updated list of category containing all the subcategory.
Here is the snippet of my code
<div id="example">
<div class="demo-section k-content">
<h4>Treeview One</h4>
<div id="treeview-left"></div>
<h4 style="padding-top: 2em;">Treeview Two</h4>
<div id="treeview-right"></div>
</div>
<script>
$("#treeview-left").kendoTreeView({
dragAndDrop: true,
dataSource: [
{ text: "Furniture", expanded: true, items: [
{ text: "Tables & Chairs" },
{ text: "Sofas" },
{ text: "Occasional Furniture" }
] },
{ text: "Decor", items: [
{ text: "Bed Linen" },
{ text: "Curtains & Blinds" },
{ text: "Carpets" }
] }
]
});
$("#treeview-right").kendoTreeView({
dragAndDrop: true,
dataSource: [
{ text: "Storage", expanded: true, items: [
{ text: "Wall Shelving" },
{ text: "Floor Shelving" },
{ text: "Kids Storage" }
]
},
{ text: "Lights", items: [
{ text: "Ceiling" },
{ text: "Table" },
{ text: "Floor" }
]
}
]
});
</script>
how can I achieve this?
Thank you

I have created a JsFiddle DEMO here.
You will need to bind the dragend event of both of your Treeviews to a function and then you can get the destination Treeview list from there. Here is the snippet from the DEMO:
function tree_dragend(e) {
alert("See your console");
console.log("Drag end sourceNode = ", e.sourceNode, "dropPosition = ", e.dropPosition, "destinationNode = ", e.destinationNode);
var destinationTreeviewDOMElement = $( e.destinationNode ).closest( "div.k-treeview" );
console.log("destinationTreeviewDOMElement = ", destinationTreeviewDOMElement);
var destinationTreeview = $(destinationTreeviewDOMElement).data("kendoTreeView");
console.log("destinationTreeview = ", destinationTreeview);
console.log("destinationTreeviewData = ", destinationTreeview.dataSource.data());
}
var treeview_left = $("#treeview-left").data("kendoTreeView");
var treeview_right = $("#treeview-right").data("kendoTreeView");
treeview_left.bind("dragend", tree_dragend);
treeview_right.bind("dragend", tree_dragend);

Related

Href link is not rendering properly

I am using Kendo Menu bar to call javascript function on the click of Menu Item. But url of Kendo Menu is not rendering properly. Below is the code
function kendoMenu() {
$('#menu').kendoMenu({
//orientation: "vertical",
dataSource: [
{
text: "Export",
value: "newtransaction",
items: [
{
text: " Managers",
value: "managers",
url: "javascript:ImportExport('OFD')"
},
{
text: " Terms",
value: "terms",
url: "javascript:doImportExport('OFI')"
},
]
},
],
// select: onKendoMenuselect
});
}
But when i run the program, on the html side it is rendering as
<a class="k-link" href="javascript:ImportExport(" ofi')'=""> Terms</a>
But i want href to be rendered as:
<a class="k-link" href="javascript:ImportExport('ofi')"> Terms</a>
What should be the best approach?
Thanks for the help in advance.
Escape quotes inside string using backslash (\)
url: "javascript:ImportExport(\"OFD\")"
url: "javascript:doImportExport(\"OFI\")"
you can do that in select event try the code below.
$('#menu').kendoMenu({
//orientation: "vertical",
dataSource: [
{
text: "Export",
value: "newtransaction",
items: [
{
text: " Managers",
value: "managers"
},
{
text: " Terms",
value: "terms"
},
]
},
],
function onMenuSelect(ev) {
var selected=ev.item.textContent;
if(selected == "Managers"){
window.location.href='your url here';
}
else
{
and so on...
}
}
});

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 dynamically add and remove GROUPS to KendoUI Scheduler

I am using KendoUI Scheduler control and here is initialization code
$("#Scheduler").kendoScheduler({
dataSource: [],
selectable: true,
height: 500,
editable: false,
eventTemplate: $("#event-template").html(),
views: [
"day",
{ type: "week", selected: true },
"month",
"agenda"
],
resources: [
{
field: "resourceviewid",
name: "ResourceViews",
dataColorField: "key",
dataSource: [
{ text: "Appointments", value: 1, key: "orange" },
{ text: "Delivery Specialist", value: 2, key: "blue" },
{ text: "Orientation Specialist", value: 3, key: "green" }
]
}
],
group: {
resources: ["ResourceViews"],
orientation: "horizontal"
}
});
Here "Appointments" group is default, it will be available always
I have check box in my screen
<div id="divResourceView">
<label><input checked type="checkbox" value="1" />Delivery Specialist</label>
<label><input checked type="checkbox" value="2" />Orientation Specialist</label>
</div>
On change event I wrote below code to get selected values from checkbox and updating GROUP datasource of KendoUI scheduler as below
$("#divResourceView :checkbox").change(function (e) {
var checked = $.map($("#divResourceView :checked"), function (checkbox) {
return parseInt($(checkbox).val());
});
});
var scheduler = $("#Scheduler").data("kendoScheduler");
var arrayOfStrings = checked.toString().split(",");
for (var i = 0; i < arrayOfStrings.length; i++)
{
if(arrayOfStrings[i] == 1)
{
var data = [{ text: "Delivery Specialist", value: 2, color: "blue" }];
scheduler.resources[1].dataSource.data(data);
}
if (arrayOfStrings[i] == 2) {
var data = [{ text: "Orientation Specialist", value: 3, color: "green" }];
scheduler.resources[2].dataSource.data(data);
}
}
scheduler.refresh();
But it removes all groups and add only one. I want to see both groups when arrayOfStrings has values "1,2",
I can see all groups during initialization But it disappears when i check the check box.
Images for reference
During Initialization
After
As you can see clearly, Delivery Specialist is missing in scheduler control
Found some link: http://www.telerik.com/forums/add-filter-to-resource-datasource
But not sure what they talking about? seems like refresh issue.
I have done this I believe you're right and your issue is to do with refreshing, I use the following to refresh it.
var scheduler = $("#scheduler").data("kendoScheduler");
scheduler.view(scheduler.view().name);
hope this helps through it is stupidly late (I'm currently looking up how to do this lazerly

Kendo Grid Draggable Rows With Kendo Template

I'm going to implement drag and drop behaviour with kendo grid which is populated using template. How can I achieve draggable rows and reordering with kendo grid.
.Orderable()
Works a treat. Maybe try ".Dragable()" I'm a bit unsure about that though.
Take a look at following my demo code and try it to implement.
var data = [
{ id: 1, text: "text 1", position: 0 },
{ id: 2, text: "text 2", position: 1 },
{ id: 3, text: "text 3", position: 2 }
]
var dataSource = new kendo.data.DataSource({
data: data,
schema: {
model: {
id: "id",
fields: {
id: { type: "number" },
text: { type: "string" },
position: { type: "number" }
}
}
}
});
var grid = $("#grid").kendoGrid({
dataSource: dataSource,
scrollable: false,
columns: ["id", "text", "position"]
}).data("kendoGrid");
grid.table.kendoDraggable({
filter: "tbody > tr",
group: "gridGroup",
hint: function(e) {
return $('<div class="k-grid k-widget"><table><tbody><tr>' + e.html() + '</tr></tbody></table></div>');
}
});
grid.table/*.find("tbody > tr")*/.kendoDropTarget({
group: "gridGroup",
drop: function(e) {
var target = dataSource.get($(e.draggable.currentTarget).data("id")),
dest = $(e.target);
if (dest.is("th")) {
return;
}
dest = dataSource.get(dest.parent().data("id"));
//not on same item
if (target.get("id") !== dest.get("id")) {
//reorder the items
var tmp = target.get("position");
target.set("position", dest.get("position"));
dest.set("position", tmp);
dataSource.sort({ field: "position", dir: "asc" });
}
}
});
put .Dragable()
but make sure that you sit it in the right place, the ordering is required. Some times you may not get the expected result and that may happen due to not paying attention to the order.

Dynamic columns in extjs Portal Example

Dynamic columns in extjs Portal Example.
I want to insert columns dynamically in extjs portal example -- specifically i would like to nest them, the problem is i am able to add the columns dynamically but cant drop a portlet inside it, however if i nest columns manually (i.e if they are there already and not defined on runtime) then everything works fine i.e i am able to drop the portlets inside it.
Can anyone help?
here is the some relevant code:
basic declaration:
Ext.define('Ext.app.Portal', {
id: 'parentPortal',
extend: 'Ext.container.Viewport',
requires: ['Ext.app.PortalPanel', 'Ext.app.PortalColumn', 'Ext.app.GridPortlet', 'Ext.app.ChartPortlet'],
initComponent: function(){
items: [{
xtype: 'portalpanel',
id:'threecolumn',
region: 'center',
items: [{
id: 'col-1',
width: 200,
childAnchor: '50% 50%' ,
items: [
{
xtype: 'portalpanel',
items: [
{
id: 'col-4',
minHeight:200
}
],
}
]
},{
id: 'col-2',
items: [
{
xtype: 'portalpanel',
items: [
{
id: 'col-5',
minHeight:200
}
],
}
]
},{
id: 'col-3'
}]
}]
}
}
dynamic column:
Ext.create('Ext.app.PortalPanel', {
xtype: 'portalpanel',
});
}
Please Add Listener
listeners: {
render: function() {
var panel = this;
setTimeout( function() {
var parent = panel.up('portalpanel');
var bb = Ext.ComponentQuery.query('#threecolumn')[0]
console.log( bb == parent );
parent.dd.unreg();
parent.dd = Ext.create('Ext.app.PortalDropZone', parent, parent.dropConfig);
bb.dd.unreg();
bb.dd = Ext.create('Ext.app.PortalDropZone', bb, bb.dropConfig);
console.log(panel);
console.log(parent);
}, 500);
}
}

Categories