Saturday, May 14, 2011

JQuery context menu items active/ deactivate for .NET TreeView

I was needed to give some functionality to .NET tree view for user so that user can add, edit, activate or deactivate node. Jquery context menu is very nice and give me functionality to customize context menu according to my requirement. My requirement was to make some items active based on image of treeview. .NET treeview use table structure. if the node contain is <td> wich id is ‘xyz_01’ then image <td> id will be ‘xyz_01i’ . Based on this I find the image element and according to source of image I have changed the active menu items on mousedown event. MouseDown event work before displaying jquery context menu. The code is given here.

Context menu div is

<ul id="myMenu" class="contextMenu"> 
<li class="copy"><a href="#add">Add</a></li>
<li class="edit"><a href="#edit">Edit</a></li>
<li class="inactive"><a href="#Inactive">Inactivate</a></li>
<li class="active"><a href="#Active">Activate</a></li>
<li class="quit separator"><a href="#cancel">Cancel</a></li>
</ul>



The mouse down code for activate and deactive element according to treeview image source.




$("#MyTreeDiv A").mousedown(function () { 
var itemId = $(this).attr('id');
var imageItemId = itemId + 'i';

var img = $('#' + imageItemId).children('img').first();
var s = $(img).attr('src');
if (s.indexOf('inactive') > -1) {
$('#myMenu').enableContextMenuItems('#Active');
$('#myMenu').disableContextMenuItems('#Inactive');
$('#myMenu').disableContextMenuItems('#add');
$('#myMenu').disableContextMenuItems('#edit');
}
else if (s.indexOf('active') > -1) {

$('#myMenu').disableContextMenuItems('#Active');
$('#myMenu').enableContextMenuItems('#Inactive');
$('#myMenu').enableContextMenuItems('#add');
$('#myMenu').enableContextMenuItems('#edit');
}

});

1 comment: