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: https://webix.com/snippet/f4ec2b07

Comments

  • 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

  • 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: https://webix.com/snippet/3ea2ecd8

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

  • 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): https://webix.com/snippet/2a18c8e2
    • 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 ev.target 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!