Datatable and Menu on each row

Webix JS
1

Hello,

I create my datatable with the columns and rows. My last column is always the Actions column where I have HTML tag < a href >. Each row can EDIT a form but there are different IDs to edit the form.

How can I create menu for each row with

< a href=“EDIT_FORM&uid=10” >

< a href=“EDIT_FORM&uid=11” >

< a href=“EDIT_FORM&uid=12” >

…

< a href=“EDIT_FORM&uid=N” >

Thanks

2

Would be nice to know if this is possible so every row has its menu with its links. Maybe onRight click would be possible to build the menu of the row.

Sincerely

3

Using the ui.contextmneu, you can reload/filter its data.
Also, menu items have a specific href property:

http://webix.com/snippet/7e190519

4

Thank you, I ll implemented on Datatable with more options.

5

HI,

What I wanted is this

        on:{

                onBeforeShow:function(){
			    	
			    	
			    	var context = this.getContext();
			      	var grid = context.obj;
			   		var itemId = context.id;  
			      	var sourceItem = grid.getItem(itemId);
			      	 
			      	var links = $(sourceItem.actions).toArray();  
                                    // I get the links of the actions column
                                         
			      	that = this;
			      	
			      	this.clearAll();
			      	$.each(links, function(index, item){
			      		// for each link i added in the menu		
			      		that.add({  value: $(item).attr('title'), href: $(item).attr('href') }); 		       
			    		
			      	});


			      					    	
			    }
			}
6

My question is how can I set an option of menu as disabled ?

7 
that.add({ id: sourceItem.id + index, value: $(item).attr('title'), href: $(item).attr('href') }); 		       
if ( index == 0 )
that.disableItem( sourceItem.id + index );

The option has now the webix_disabled class but is clickable

8

The way I solved it is

if ( $(item).hasClass('disabled') )
    that.addCss( sourceItem.id + index, "disabled" );
9

The solution is right. While disableItem prevents Webix click events, the html node is still clickable, as the native events are still working.

So you really need to use the combination of

this.disableItem(id);
this.addCss(id, "disableLink")

where disableLink is something like

.disableLink {
  cursor: default;
  pointer-events: none;       
}