Datatable modal custom editor

Webix JS
#1

Hi,

I’m struggling to make my custom editor modal. The screen opacity changes behind the popup but a user can still click outside the popup to close it.

The following snippet shows the issue.

https://webix.com/snippet/b59b8463

Any help would be great.

Thanks,

Chris

#2

Hey,
you can try this -

webix.ui({ 
	 	view:"window",
	    id:"editWindow",
  		head:'Edit',
	    modal:true,
	    height:500,
	    width:500,
	    body:{
	    	view:"form",
			id:"form", 
			scroll:false,
			elements:[
			          { view:"text"},
			          {
			        	  view:"button",
			        	  value:"Close", 
			        	  click : function(){
			        		  $$('editWindow').hide();
			        	  } 
			          }	
			          ],
	    }
	});

webix.ui({
  rows:[
    { type:"header", template:"Preview" },
    { view:"resizer" },
    { view:"datatable",
     id:'grid1',
     select:true,
     editaction:"dblclick",
     columns:[{id:"name", header:"name", editor:"popup"}],
     data:[{id:1,name:"John"}],
    on : {
				        	"onItemDblClick" : function(id, ev){
				        		$$("editWindow").show(ev);
				        		$$("editWindow").getBody().focus();
				        	}, 
    },
    "onAfterSelect" : function(data, preserve){
				        		$('form').bind('grid1');
				        	}}
  ]
});
#3

Hi Meera,

Thanks for your reply. I wanted to avoid show(ev) because I didn’t like the window/popup jumping to the ‘click’ - I never realised the importance of bind().

Thanks very much for pointing me in the right direction!

Chris