Datatable in Dataview or List

Webix JS
1

Hi, let’s say I have a set of data that contain header as well as details. My initial idea is use the dataview to show the header, and put the details as a datatable in the dataview. Would it be possible? Or is there any better way of using webix to present this kind of data?

May refer the snippet: Code Snippet

2

Hello,
You can embed datatable into the fieldset component.

Maybe information about SubView helps you to solve it.

Instead of ui.list, you can use a list-like datatable without a header.
Please check the following sample: https://webix.com/snippet/7e276c4f

3

Hi @Nastja , cant achieve the visual effect needed. I solved the issue by generating header and datatable dynamically and put it into the layout. The remaining issue is the layout cannot be click as the cell in the dataview

4

Hi @laicp

Could you please clarify the exact desired result?
If one item per row is allowed, the datatable with a subview can be tuned with CSS for rows and some layout settings for subview.

As an option, you can try the DataLayout (or FlexDataLaout) for data representation: https://webix.com/snippet/3ea2ecd8

But truly, there’s no any “global” click event which will fire on the entire “module”.

5

And if the datalayout can listen onAfterSelect or onItemClick would be perfect

DataLayout repeats the same set of full-featured Webix views where particular data attributes are set as values/data.

Therefore, you can handle all needed events for these components, but if you want to access the source data item from DataLayout, there is a pecuuilarity you need to consider:

  • when you set name:"$value", component gets the entire source data object, so you can do something like next (click the header): Code Snippet
  • in its turn, name:"attr_name" will transfer the value of the particular data attribute without any built-in reference to the original data item

For example, by default there is no property/method to detect in the authorList of which item you have selected a row.

Solution requires a bit of custom code, but you can add some reference (id of the source item) to the authorList data and access the original data using it.

6

Hi @Listopad , it is very close to what I looking forward. You means the view cannot be column like the layout? And if the datalayout can listen onAfterSelect or onItemClick would be perfect

7

Check the updated snippet
https://webix.com/snippet/68817cb8

DataLayout can work in both rows and columns modes. The scrollview in the sample was added to make the resulting layout scrollable.

8

Hi @maksim / @Listopad , would it be possible for the datatable to listen the onclick on webix_ss_center_scroll which the empty part of the datatable? So, no matter where to click, I can show the selected cell info on the top.

9

You can always fallback to native html events

webix.event("click", $$("dt").$view, handler(ev){
    var id = $$("dt").locate(ev);
    // if click was in the cell, id.row and id.column will provide its position
    // if id is empty, than it is a click on the empty area
    // you can check ev.target if you need to be more precise
});