Not able to get vertical scrolling

edited September 10 in Technical questions

I am trying to get vertical scrolling for datatable. But it is not appearing. What is that i am missing to specify.

below script for reference:



    webix.ready(function(){
        dataTable = webix.ui({
            container:"testA",
            view:"datatable",
            footer:true,
            css:"webix_data_border webix_header_border",
            autoheight:true,
            fixedRowHeight:false,
            rowLineHeight:20,
            hover:"myhover",
            ready:function(){
                this.adjustRowHeight("description");
                },
            columns:[
                     { id:"relativeTime", header:"Relative Time [ms]", css:"rank", width:150, footer:'Relative Time [ms]', fillspace:true, sort:"int"},
                     { id:"signal", header:"Signal Name",width:200, footer:'Signal Name', fillspace:true, sort:"string"},
                     { id:"description", header:"Description", width:300, footer:'Description', fillspace:true},
                     { id:"transtion", header:"Transition", width:100, footer:'Transition', fillspace:true, sort:"string"},
                     { id:"absoluteTime", header:"Absolute Time", width:200, footer:'Absolute Time', fillspace:true, sort:"time"}
                    ],

            data: [
                    {"relativeTime": "0","signal": "ACFltSB","description":"AC Fault SideB","transtion": "High","absoluteTime": "14:35:21.361056"},
                    {"relativeTime": "82.04","signal": "3BL1RFRTr","description":"Pole3 SideB Lane1 RapidFilter RemovalTrip xxxxxxxxyyyyyyyyy","transtion": "High","absoluteTime": "14:35:21.443096"},
                    {"relativeTime": "82.712","signal": "3AL2RFRTr","description":"Pole3 SideA Lane2 RapidFilterRemovalTrip","transtion": "High","absoluteTime": "14:35:21.443768"},
                    {"relativeTime": "82.712","signal": "3AL2RFRTr","description":"Pole3 SideA Lane2 RapidFilterRemovalTrip","transtion": "High","absoluteTime": "14:35:21.443768"},
                    {"relativeTime": "82.712","signal": "3AL2RFRTr","description":"Pole3 SideA Lane2 RapidFilterRemovalTrip","transtion": "High","absoluteTime": "14:35:21.443768"},
                    {"relativeTime": "82.712","signal": "3AL2RFRTr","description":"Pole3 SideA Lane2 RapidFilterRemovalTrip","transtion": "High","absoluteTime": "14:35:21.443768"},
                    {"relativeTime": "82.712","signal": "3AL2RFRTr","description":"Pole3 SideA Lane2 RapidFilterRemovalTrip","transtion": "High","absoluteTime": "14:35:21.443768"},
                    {"relativeTime": "82.712","signal": "3AL2RFRTr","description":"Pole3 SideA Lane2 RapidFilterRemovalTrip","transtion": "High","absoluteTime": "14:35:21.443768"},
                    {"relativeTime": "82.712","signal": "3AL2RFRTr","description":"Pole3 SideA Lane2 RapidFilterRemovalTrip","transtion": "High","absoluteTime": "14:35:21.443768"},
                    {"relativeTime": "82.712","signal": "3AL2RFRTr","description":"Pole3 SideA Lane2 RapidFilterRemovalTrip","transtion": "High","absoluteTime": "14:35:21.443768"},
                    {"relativeTime": "82.712","signal": "3AL2RFRTr","description":"Pole3 SideA Lane2 RapidFilterRemovalTrip","transtion": "High","absoluteTime": "14:35:21.443768"},
                    {"relativeTime": "82.712","signal": "3AL2RFRTr","description":"Pole3 SideA Lane2 RapidFilterRemovalTrip","transtion": "High","absoluteTime": "14:35:21.443768"},
                    {"relativeTime": "82.712","signal": "3AL2RFRTr","description":"Pole3 SideA Lane2 RapidFilterRemovalTrip","transtion": "High","absoluteTime": "14:35:21.443768"},
                ]
        });

    });
    </script>
</body>
Tagged:

Comments

  • edited September 10

    Hey @ganeshkp, it really depends on the container you are trying to embed your datatable in. By default, the scroll should appear if the height of the component exceeds the height of the parent element. So, with your code, it would look like this: https://snippet.webix.com/mkow5j28.

    Could please try and provide the full use case, or a snippet where the issue could be seen?

  • @Dzmitry Thanks for help..I got the point..
    I have one more question..Absolute Time column in the same link you provided(https://snippet.webix.com/mkow5j28), when i try to sort it, it is showing as script error. Can i know how to sort column having time stamp please

  • edited September 11

    There is no such sorting function called time, that is why the sorting in the code you've provided isn't working (you can check all of the already existing sorting function here. In order to implement the sorting you want, you will have to write a custom sorting function.

    Here is an example of how you can compare the timestamps in the provided format: https://snippet.webix.com/7mgcgrkp.

    To compare the actual time these strings represent you will need to convert them into a Date object (the date provided beside the time is arbitrary and doesn't mean anything). This will only cover the use case for comparing the timestamps with 3 places after the decimal point, meaning the comparison will think values like 14:35:21.443096 and 14:35:21.443768 are the same (both represent 14:35:21.443). That's why you'll also need to compare the milliseconds separately.

  • @Dzmitry Thank you so much for your help.

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!