Editing a row of data table via a popup/Modal window

Hi,

As,I have seen that data table update is possible via HTML form but need to have a detail that Is there any option to edit the data table via Pop-up/Modal window in webix.
If you have any examples,Please share.

Thanks in advance,

Regards,
Kaleem B N

Hello,

For this use case you can initialize a modal window with a form inside and bind this form to a datatable.

Please, have a look at the snippet (doubleclick the row to edit): https://webix.com/snippet/3c23a13f

Or, the same with a popup: https://webix.com/snippet/d07c2638

Hi Helga,

Thanks for your time and this matches my requirement.

Regards,
Kaleem B N

Hi Helga,

How to make the modal to launch on click of button in the row. I tried the below one . Please check and suggest: https://webix.com/snippet/3c23a13f

Thanks in advance

webix.ui({
  view:"window",
  id:"editwin",
  head:"Edit.. ",
  modal:true,
  position:"center",
  body:{
  	view:"form", id:"editform", elements:[
      { view:"text", label:"Title", name:"title"},
      { view:"text", label:"Year", name:"year"},
      { view:"text", label:"Votes", name:"votes"},
      { cols:[
        { view:"button", value:"Cancel", click:function(){
          this.getTopParentView().hide(); 
        }},
        { view:"button", type:"form", value:"Save", click:function(){
          this.getFormView().save();
          this.getTopParentView().hide(); 
        }}
      ]}
    ]
  }
});

webix.ui({
  view:"datatable",id:"table",
  columns:[
    { template:"<input class='editBtn' type='button' value='Edit'>", width:100 },
    { id:"rank",	header:"",             css:"rank", width:50},
    { id:"title",	header:"Film title",   width:200},
    { id:"year",	header:"Released" ,    width:80},
    { id:"votes",	header:"Votes", 	   width:100}    
  ],
  autoheight:true,
  autowidth:true,
  select:true,
  data: [
    { id:1, title:"The Shawshank Redemption", year:1994, votes:678790, rating:9.2, rank:1},
    { id:2, title:"The Godfather", year:1972, votes:511495, rating:9.2, rank:2}
  ],
  on:{
     onClick:{
        "editBtn":function(ev){
              $$("editwin").show();
        }
    }
    }
});

$$("editform").bind($$("table"));

Hi,

The CSS-based click handlers should be placed outside the on object.

view:"datatable",
onClick:{
     "editBtn":function(ev){
            $$("editwin").show();
      }
}

Please, check the snippet: https://webix.com/snippet/b785e5fd

Thanks a lot Helga :slight_smile: