Example for rich Vertical/Property Grid

Webix JS
1

Please tell me on which of your components (maybe Pro) it is better to implement a grid of properties

I need the following properties:

  1. the user can change the width of the headers (i.e. a splitter is needed between the field header and the values)
  2. different custom editors for each property, including several buttons
  3. before the header of each field, I need to display specific icons

maybe you have a similar example
I looked at https://docs.webix.com/desktop__property_sheet.html
but it is too simple, and there are no points 1 and 2 - important for me

thanks

2

Hello @Alexander_Krakhotko ,

To use all the features you’ve described it’s better to use datatable view.

Please check this example: Code Snippet

  1. the user can change the width of the headers (i.e. a splitter is needed between the field header and the values)

You can change the width of the headers by setting the resizeColumn: true property.

  1. different custom editors for each property, including several buttons

To apply different custom editors it is important to use the onBeforeEditStart event where you have to close the previously opened editor and set another editor depending on the item data.
As for handling events of custom elements (like checkbox and buttons in the example ) the onClick property is used. To trigger the events of the custom elements don’t forget to add classes to them (rows 12/14).

1 Like