Datatable in Dataview or List

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:


  • 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:

  • 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

  • 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:

    But truly, there's no any "global" click event which will fire on the entire "module".

  • 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

  • Check the updated snippet

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

  • edited January 2018

    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):
    • 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.

  • 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.

  • 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 if you need to be more precise
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!