We are trying to create a new custom popup for handling edit in the gantt chart

Webix JS
#1

We are trying to create a new custom popup for handling edit in the gantt chart.

How do we handle the events of Add. Edit and Delete Task and Assignments using jquery. Could please share some sample codes.?

#2

Good day @Kruteeka_M_S,

The [Gantt] and most of our complex widgets (except Kanban and Spreadsheet) are built as modularized apps on Webix Jet, and the user can customize existing modules or add new ones.

Modules are implemented as JetViews (ES6 classes) where any UI element, data-related service, or feature can be customized by the same rules. For more details about this architecture, please check the following blog article, which describes the general idea and reasons for this structure.

Please note that complex modifications may require observing the source code of the tool in order to build the most feasible solution that will correctly alter/extend the original logic.

Depending on your needs, customization of Jet Services will be required.
To determine which service you need to customize, refer to the following topic.

If you want to customize the sending of an update to the server, requests customization of the Backend service will be sufficient. The methods can be customized according to general principles. The main requirement is to preserve the format of the data returned by these methods in Gantt, as this is important for further data processing.

In other words, you can rewrite any method (for example, addTask) so that it sends a request by any method to any alternative URL, supplementing or even replacing default logic. You can find more information about Gantt Backend service in the Working with Server article.

If you need to change the behavior of Gantt, you will need to customize the necessary methods within service Operations.

After customization you need to replace the default service via the override map:

webix.ui({
    view: "gantt",
    url: "https://docs.webix.com/gantt-backend/",
    override: new Map([[gantt.services.Backend, MyBackend]]),
});

Please, check out the snippet with the example: Code Snippet

Speaking of jQuery, you can use its API and combine it with the Webix API and pure JS without any difficulties.
However, using Webix, you cannot directly manipulate HTML elements via jQuery. The elements of our widgets in the DOM are built on the basis of the JS configuration and direct changes will either be overwritten or may break the inner logic.

#3

Hi Natasha,

image
image1360×605 9.8 KB

Here is the javascript driven popup which we created. Ideally what we are planning to implement is, Instead of showing the edit section at the right side toolbar(sidebar) next to gantt chart. We would like to show the edit section in popup similar to Kanban Board(Kanban UI Editor of UI Complex Widgets, Kanban Board Webix Docs). I dint not find any sample to make this happened.

#4

You can also customize Gantt views. To determine which view to customize, use the Class Map. For example, you can customize the popup of each taskbar: Code Snippet.

You can also disable the default popup if you want to implement your own: Code Snippet.

To implement your own form, use gantt.getService(“operations”), which is described in the answer above. Here you will find a list of all methods with parameters that the default Gantt popup uses.

#5

Well is this what I’m trying to implement, I need a edit popup but here we are getting view popup.