Open a window from a row in Webix Jet

Site and Services
#1

Hi, I have this code: https://snippet.webix.com/284zi9yc

I using webix jet and I want to open a modal but when I click the button in the row all the page is blocked and it doesn’t show the window. Please help!

#2

Hello @Hellekin,

I using webix jet and I want to open a modal but when I click the button in the row all the page is blocked and it doesn’t show the window. Please help!

The way you initiliaze and show windows/popups is a bit different in the case of Webix Jet. In standart Webix you have to initialize windows and popups with the help of the webix.ui constructor, here, however, you will have to initialize the window with the help of the this.ui() method (which is analogous to webix.ui()). this.ui() takes care of the windows it creates and destroys them when their parent views are destroyed.

Please note that the configuration of the said window has to be stored as a separate JetView class or a simple object that you can refer to (either way, it has to be stored separately, it can’t be located in the JetView that contains other views).

Here is the fixed snippet, which demonstrates the correct way to create and initialize a window in Webix Jet: https://snippet.webix.com/xp1aypnc.

You can learn more about popups and windows in Webix Jet from this article.

#3

Thanks @Dzmitry
Now I trying to pass the data from the datatable to the windows, for example pass the subtotal and total from the datatable to the textbox in the form, I was trying to use the property bind but it didn’t work, here is the code:
https://snippet.webix.com/87faiy58

#4

Hey @Hellekin, there are a few things wrong with your snippet:

1\. You are trying to bind your datatable to the window component instead of binding it to the form.

    //instead of
    $$('detailWindow').bind($$('ordersDatatable')) 

    //should be
    $$('formView').bind($$('ordersDatatable'));

But since we are working with Webix Jet here, it is a bad practive to reference global ids. Please avoid using them altogether and use localId instead, as it is only accessible within the scope of the current JetView, unlike id, which is available from any place in the app. In this case, binding could look like this:

  init() {
    this.win = this.ui(window);
    //get the form via the queryView method instead of referring to the global id
    let form = this.win.queryView({view: "form"});
    //use localId to reference the datatable 
    form.bind(this.$$("ordersDatatable"));
  }

2\. If we take the binding approach, to make it work without any significant changes you should enable selection in the datable, so that the binding actually gets applied.

3\. position: right - the value right doesn’t signify anything, as the only applicable values are “top” and “center”, as can be seen here. The position that gets applied in your case is “center”, which is why you should explicitly state it. If you wish to adjust the position to be different from these two values, it is also possible to provide a function inside of that property and define the exact position of your window (you can read more about window positioning here).

Overall, the end result looks something like this: https://snippet.webix.com/pw133uv5.

#5

Thank you @Dzmitry, now I facing another problem, I need to show a datatable that require 2 params, I need to pass one param from my datatable to the window and then show another datatable with this parameters but my datatable doesn’t show the data, I using this code in the datatable.

url:function(){
var state = webix.storage.local.get(“state”); // 01
var transaccion =$$(“numtra”).getValue(); //‘MV001458’;
return webix.promise(function(res){
res( webix.ajax().post("//localhost:3000/webapi/ordenesVendedorLista", { codemp: state, numtra: transaccion }, “json”));
});
}
What is the best way to do it?
Also, I have this code: https://snippet.webix.com/bxzcwwyf