dropItem is returning null

[pandian78Participant]

I am using .net MVC5 application with jqxtree. dragEnd property function is working fine. but i can not get the value from dropItem. dropItem and dropPosition are return always null.

My code is like this

@{
Layout = “~/Views/Shared/_Layout.cshtml”;
}
<link rel=”stylesheet” href=’@Url.Content(“~/Content/jqwidgets/jqx.base.css”)’ type=”text/css” />
<script type=”text/javascript” src=’@Url.Content(“~/Scripts/jqwidgets/jquery-1.11.1.min.js”)’></script>
<script type=”text/javascript” src=’@Url.Content(“~/Scripts/jqwidgets/jqxcore.js”)’></script>
<script type=”text/javascript” src=’@Url.Content(“~/Scripts/jqwidgets/jqxbuttons.js”)’></script>
<script type=”text/javascript” src=’@Url.Content(“~/Scripts/jqwidgets/jqxscrollbar.js”)’></script>
<script type=”text/javascript” src=’@Url.Content(“~/Scripts/jqwidgets/jqxpanel.js”)’></script>
<script type=”text/javascript” src=’@Url.Content(“~/Scripts/jqwidgets/jqxdragdrop.js”)’></script>
<script type=”text/javascript” src=’@Url.Content(“~/Scripts/jqwidgets/jqxtree.js”)’></script>
<script type=”text/javascript” src=’@Url.Content(“~/Scripts/jqwidgets/jqxmenu.js”)’></script>
<script type=”text/javascript”>
var source = [
{
label: “Item 1”, expanded: true, items: [
{ label: “Item 1.1” },
{ label: “Item 1.2”, selected: true }
]
},
{ label: “Item 2” },
{ label: “Item 3” },
{
label: “Item 4”, items: [
{ label: “Item 4.1” },
{ label: “Item 4.2” }
]
},
{ label: “Item 5” },
{ label: “Item 6” },
{ label: “Item 7” }
];
$(‘#myTree’).jqxTree({ source: source, width: ‘100%’ });

$(‘#myTree’).jqxTree({
allowDrag: true, allowDrop: true, height: ‘300px’, width: ‘100%’,
dragStart: function (item) {
if (item.label == “Community”)
return false;
},
dragEnd: function (item, dropItem, args, dropPosition, tree) {
debugger;
var target = dropItem;
return false;
}
});
</script>
Please help me on this

[ivailoParticipant]

Hi pandian78,

Probably this topic will be helpful.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[pandian78Participant]

Sorry, I got the solution. Our UI developer did the mistake. He did the below style change in css file.

.jqx-draggable
{
height: 0;
}

I removed this style. The dropItem and dropPosition return the values.

But here I have a one more question. How to reduce the each node list height?

[pandian78Participant]

How to reduce the each node height?

If I am reduce the height as I mentioned in below, the dragEnd method is return the dropItem and dropPosition values are null.

.jqx-draggable
{
height: 0;
}

please help me on this.

[ivailoParticipant]

Hi pandian78,

You can collapse the node with collapseItem. Then you don’t have to reduce it’s height.
Here is a demo.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts