user2833621 user2833621 - 1 month ago 6
jQuery Question

On rightclick for contextmenu retrive a particular cell value from a row in (dynamic) datatable

I am using Ajax sourced datatable https://www.datatables.net/examples/data_sources/ajax.html to show my content..

On it I have used context menu http://medialize.github.io/jQuery-contextMenu/demo.html. But I have customized it as I wanted it to be dynamic.

I wanted the contextmenu items to be populated based on the the value present in the ActivityStatus column(6th col) in the datatable. For that i have to retrive that column value.

Please help me to retrive the value when the context menu is triggered.

var contxtM={
"contextMain": [
{
"actstatus": "Draft",
"contextmenu": "edit,delete,submit"
},
{
"actstatus": "Completed",
"contextmenu": "delete"
},
{
"actstatus": "Awaiting",
"contextmenu": "edit,delete,modify"
}
]
};

$('#datatb tbody').contextMenu({
selector: 'tr',
build: function($trigger, e) {
var dynamicContextMenu;
//I want this actSt to be retrived from datatable here
var actSt = "Draft";
var menustr;
for(var i=0;i<contxtM.contextMain.length;i++){
if(actSt==contxtM.contextMain[i].actstatus){
menustr =contxtM.contextMain[i].contextmenu;
}
}
/* alert(menustr); */
var menu= menustr.split(",");
var arrayitems= new Array();
$.each( menu, function( i, val ) {
arrayitems.push("'"+val+"': {name: '"+val+" Activity'}");
});
dynamicContextMenu="{"+arrayitems.join()+"}";
var json = JSON.stringify(eval("(" + dynamicContextMenu + ")"));
var dynamicContextMenu = jQuery.parseJSON(json);
return {
callback: function(key, options) {
alert(key+" "+$(this).text());
},
items: dynamicContextMenu
};
}
});


I have tried to retrive using the below code. but it does not work in the contextmenu part of code.

$('#datatb tbody tr',this).eq(6).text()


But when I use it on simple click it does work.

$('#datatb tbody').on('click', 'tr', function () {
alert($('td',this).eq(6).text());
});


Please help me to retrive the value when the context menu is triggered.

Answer

First of all "eq() starts with 0"

So you need to pass n-1 to access to nth element.

Use following jquery script to get 6th column text :

var currentTr = e.currentTarget;                
var actSt = $(currentTr).find('td:eq(5)').text();

your code will look like :

 var contxtM={
            "contextMain": [
                {
                    "actstatus": "Draft",
                    "contextmenu": "edit,delete,submit"
                },
                {
                    "actstatus": "Completed",
                    "contextmenu": "delete"
                },
                {
                    "actstatus": "Awaiting",
                    "contextmenu": "edit,delete,modify"
                }
            ]
        };

    $('#datatb tbody').contextMenu({
        selector: 'tr', 
        build: function($trigger, e) {
            var dynamicContextMenu; 
            //I want this actSt to be retrived from datatable here

            var currentTr = e.currentTarget;                
            var actSt = $(currentTr).find('td:eq(5)').text();
            //var actSt = "Draft";
            var menustr;
            for(var i=0;i<contxtM.contextMain.length;i++){
                if(actSt==contxtM.contextMain[i].actstatus){
                     menustr =contxtM.contextMain[i].contextmenu;
                }
            }
                /* alert(menustr); */
            var menu= menustr.split(","); 
            var arrayitems= new Array();                
            $.each( menu, function( i, val ) {
                    arrayitems.push("'"+val+"': {name: '"+val+" Activity'}");
            });
            dynamicContextMenu="{"+arrayitems.join()+"}";
            var json = JSON.stringify(eval("(" + dynamicContextMenu + ")"));
            var dynamicContextMenu = jQuery.parseJSON(json);
            return {
                callback: function(key, options) {
                    alert(key+"  "+$(this).text());
                },  
                items: dynamicContextMenu
            };
            }
    });
Comments