Set the title and width of Kanban Editor

Webix JS
1

I would like to change the title of the Kanban popup editor as well as control it’s width and height (ideally 90% of the page width, I need a lot of fields on the form).

I’ve spent a couple of hours searching the examples and forum but can’t find one example of how to do this, can anyone offer a snippet of code ?.

Currently I call the editor like this :-

editor:[
{ view:“nic-editor”,name:“text” , config:{ fullPanel : true }, height:200 },
],

2

Hello elbie,

To change the title of the editor you can use the onAfterEditorShow event. Using queryView({localId:“$kanban_header”}) you can find the title of the popup editor and change it with the define method.

As for the editor size, by default the Kanban editor’s size is adjusted to the sizes of the form controls (you can define height and width for the particular view in the editor.) You can use getEditor method to get the editor and with the help of the define method to set the width of the whole editor window.

Please take a look at the example: Code Snippet

As for responsive width of the editor, you need to use the define method as well and change the position property. The position can be a function which recieves the state parameter. And you can adjust this parameter to the responsive values you need:

    editor.define({
    position: function(state) {
      //state.maxHeight shows window.innerHeight || document.documentElement.offsetWidth;
      let calcWidth = Math.round(state.maxWidth * 0.90); // 90% of the screen 
      state.width = calcWidth > 200 ? calcWidth : 200; 
      state.left = (state.maxWidth - state.width) / 2;

      let height = Math.round(state.maxHeight * 0.90);
      state.height = height;
      state.top = (state.maxHeight - height) / 2;
    }
  });

To have a lot of fields in the popup editor you may need to put the editor’s body into a scrollview. With the help of the protoUI() method, we are able to either create a new custom component or redefine an existing one.
So, we could change the structure of the editor in the protoUI - $init function this way:

  webix.protoUI({
    name: "kanbaneditor", //name of the editor view used in Kanban 
    $init: function (config) {     
      let cfg = webix.copy(config.body);
      config.body = {
        view: "scrollview", body: cfg
      }
    }
  }, webix.ui.kanbaneditor);

Please see the snippet with the example: Code Snippet

3

Hello Natalia and apologies for not replying sooner, I’ve been on holiday for 2 weeks and only returned this morning.

I have tried using queryview when onAfterEditorShow fires but cannot find a “title” when I use “queryView({localId: “$kanban_header”})”.

I can see the id, text, tags, color etc, but no title (or “Edit Card” string).

I’m sure I must be doing something wrong, do you have a code snippet ?

4

Hello elbie,

An editor in Kanban is based on a window where a form with editor fields and bottom buttons are located in editor.config.body, while a title is located in editor.config.head.
For easiest searching inside the editor some elements have a built-in localId property, by which we can find the desired element using queryView .

Please take a look at the snippet: Code Snippet

In the console you can see the editor and label view with the text Edit Card, which we can change to another through the define() method.

5

Thank you so much for the code and explanation, works perfectly.

I had just managed to figure it out myself (had made a mistake), but your solution is much more elegant.

I got there using this code if anyone is interested in the future -

let lb_card_label = $$(“mykanban”).getEditor();
var myObj = lb_card_label.queryView({localId: “$kanban_header”});
myObj.define({ label:‘test’,});
myObj.refresh();