jQWidgets Forums

This topic contains 4 replies, has 2 voices, and was last updated by Peter Sloth 10 years, 6 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)

Author

Vertical scrollbar Posts

November 2, 2014 at 2:52 pm Vertical scrollbar #62003

Participant

I have modified the file javascript-datatable-rows-rendering.htm as seen below. The page has two sections at the top of the page and then the datatable with custom rendering in the bottom section. Further, I have disabled paging since I want to use a vertical scrollbar instead. The problem is that I don’t get a scrollbar! I want the scrollbar to render for the bottom section only. How can this be achieved?

thanks

//Peter


<!DOCTYPE html>
<html lang="en">
<head>
    <title id="Description">Data Rows with customized rendering in jqxDataTable</title>
    <meta name="description" content="This sample demonstrates how we can customize the rendering of the Data Rows in the jQWidgets DataTable widget.">
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatatable.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
      $(document).ready(function () {
            // prepare the data
            var data = [
                {
                    laptops:
                    [
                        { 'img': '../../images/l-13.jpg', ram: '8GB DD3', cpu: 'Intel Core i7-3720QM', price: 2999, display: 15.4, hdd: '512GB SSD', model: 'Apple MacBook Pro' },
                        { img: '../../images/l-14.jpg', ram: '8GB DD3', cpu: 'Intel Core i7-3667U', price: 1299, display: 13.3, hdd: '256GB SSD', model: 'Apple MacBook Air' },
                        { img: '../../images/l-15.jpg', ram: '8GB DD3', cpu: 'Intel Core i7-3632QM', price: 2199, display: 15.4, hdd: '256GB SSD', model: 'Asus ZenBook UX51VZ' }
                    ]
                },
                {
                    laptops:
                    [
                        { img: '../../images/l-16.jpg', ram: '4GB DD3', cpu: 'Intel Core i5-3317U', price: 1899, display: 13.3, hdd: '128GB SSD', model: 'ASUS TAICHI31-CX009H' },
                        { img: '../../images/l-17.jpg', ram: '4GB DD3', cpu: 'Intel Core i7-3517U', price: 1799, display: 13.3, hdd: '628GB', model: 'Asus TX300CA-C4024H' },
                        { img: '../../images/l-18.gif', ram: '16GB DD3', cpu: 'Intel Core i7-3820QM', price: 2499, display: 15.6, hdd: '1TB', model: 'Lenovo ThinkPad T530' }
                    ]
                },
                {
                    laptops:
                    [
                        { img: '../../images/l-19.jpg', ram: '8GB DD3', cpu: 'Intel Core i5-3210M', price: 1499, display: 15.6, hdd: '750GB', model: 'Samsung Series 7 Chronos' },
                        { img: '../../images/l-20.jpg', ram: '8GB DD3', cpu: 'Intel Core i7-3720QM', price: 1499, display: 17.3, hdd: '256GB SSD', model: 'HP EliteBook 8770w' },
                        { img: '../../images/l-21.jpg', ram: '8GB DD3', cpu: 'Intel Core i7-3517U', price: 1499, display: 14.0, hdd: '512GB', model: 'Dell XPS 14' }
                    ]
                },
                {
                    laptops:
                    [
                        { img: '../../images/l-22.jpg', ram: '32GB DD3', cpu: 'Intel Core i7-4800MQ', price: 3499, display: 17.3, hdd: '750GB', model: 'Dell Alienware 17' },
                        { img: '../../images/l-23.jpg', ram: '8GB DD3', cpu: 'Intel Core i7-3537U', price: 1699, display: 15.6, hdd: '1TB', model: 'Acer Aspire R7-571G' },
                        { img: '../../images/l-24.jpg', ram: '8GB DD3', cpu: 'Intel Core i7-4500U', price: 1599, display: 15.6, hdd: '256GB SSD', model: 'Acer Aspire V5-573G' }
                    ]
                },
                {
                    laptops:
                    [
                        { img: '../../images/l-25.jpg', ram: '32GB DD3', cpu: 'Intel Core i7-4700MQ', price: 2199, display: 17.3, hdd: '1TB', model: 'Toshiba Qosmio X70-A-114' },
                        { img: '../../images/l-26.gif', ram: '4GB DD3', cpu: 'Intel Core i7-3667U', price: 2699, display: 14.0, hdd: '256GB SSD', model: 'Lenovo Thinkpad X1 Carbon' },
                        { img: '../../images/l-27.jpg', ram: '8GB DD3', cpu: 'Intel Core i5-3317U ', price: 1699, display: 12.5, hdd: '128GB SSD', model: 'Dell XPS Duo 12' }
                    ]
                },
                {
                    laptops:
                    [
                        { img: '../../images/l-28.png', ram: '8GB DD3', cpu: 'Intel Core i7-3537U', price: 1799, display: 12.5, hdd: '256GB SSD', model: 'Lenovo ThinkPad Twist S230u' },
                        { img: '../../images/l-29.jpg', ram: '4GB DD3', cpu: 'Intel Core i5-3317U ', price: 1299, display: 11.6, hdd: '128GB SSD', model: 'Sony Vaio Duo' },
                        { img: '../../images/l-30.jpg', ram: '4GB DD3', cpu: 'Intel Core i5-3230M', price: 999, display: 15.5, hdd: '256GB SSD', model: 'Sony VAIO' }
                    ]
                }
            ];

            var source =
            {
                localData: data,
                dataType: "array"
            };

            var dataAdapter = new $.jqx.dataAdapter(source);

            $("#dataTable").jqxDataTable(
            {
                width: 640,
                source: dataAdapter,
                sortable: false,
                pageable: false,
                enableHover: false,
                selectionMode: 'none',
                showHeader: false,
                theme: theme,
                rendered: function () {
                },
                columns: [
                      {
                          align: 'left', dataField: 'model',
                          // row - row's index.
                          // column - column's data field.
                          // value - cell's value.
                          // rowData - rendered row's object.
                          cellsRenderer: function (row, column, value, rowData) {
                              var laptops = rowData.laptops;
                              var container = "<div>";
                              for (var i = 0; i < laptops.length; i++) {
                                  var laptop = laptops[i];
                                  var item = "<div style='float: left; width: 210px; overflow: hidden; white-space: nowrap; height: 265px;'>";
                                  var image = "<div style='margin: 5px; margin-bottom: 3px;'>";
                                  var imgurl = laptop.img;
                                  var img = '<img width=160 height=120 style="display: block;" src="' + imgurl + '"/>';
                                  image += img;
                                  image += "</div>";

                                  var info = "<div style='margin: 5px; margin-left: 10px; margin-bottom: 3px;'>";
                                  info += "<div><i>" + laptop.model + "</i></div>";
                                  info += "<div>Price: $" + laptop.price + "</div>";
                                  info += "<div>RAM: " + laptop.ram + "</div>";
                                  info += "<div>HDD: " + laptop.hdd + "</div>";
                                  info += "<div>CPU: " + laptop.cpu + "</div>";
                                  info += "<div>Display: " + laptop.display + "</div>";
                                  info += "</div>";

                                  var buy = "<button class='buy' style='margin: 5px; width: 80px; left: -40px; position: relative; margin-left: 50%; margin-bottom: 3px;'>Buy</button>";

                                  item += image;
                                  item += info;
                                  item += buy;
                                  item += "</div>";
                                  container += item;
                              }
                              container += "</div>";
                              return container;
                          }
                      }
                ]
            });
        });
    </script>
    <style>
        h4 {
            font-size: 14px;
            margin: 18px 0 15px 15px;
        }

        .tag-title-info {
            background: transparent;
            width: 1px;
            height: 0px;
            border-color: #4272b8 transparent #4272b8 #4272b8 !important;
            border-width: 26px 26px;
            border-style: solid;
            z-index: 1000;
            top: 0px;
            position: absolute;
            left: 598px;
        }

        div#GalleryHeader
        {
            padding-left: 5px;
            padding-right: 5px;
            height: 67px;
            position: absolute;
            width: 100%;
            background-color: green;
        }

        div#GalleryLinksbar
        {
            padding-left: 5px;
            padding-right: 5px;
            height: 20px;
            top: 75px;
            position: absolute;
            white-space: nowrap;
            width: 100%;
            background-color: red;
        }

        .tag-title {
            font-size: 16px;
            color: #fff;
            position: absolute;
            z-index: 100;
            left: 0;
            line-height: 100%;
            background: #4272b8 !important;
            height: 52px;
            padding: 0px;
            margin: 0px;
            top: 0px;
            width: 500px;
            vertical-align: middle;
        }

        .cart-top {
            font-family: Arial, Helvetica, sans-serif;
            height: 35px;
            position: absolute;
            left: 500px;
            top: 0;
            color: #fff;
            padding: 16px 14px 1px 14px;
            font-size: 11px;
            font-weight: 400;
            background: #4272b8 !important;
            z-index: 199;
        }

            .cart-top p {
                font-weight: bold;
                font-size: 11px;
                background: url(../../images/cart-icon.png) no-repeat right center;
                min-height: 16px;
                text-align: left;
                padding: 0 24px 0 0;
                margin-top: 2px;
                float: left;
                font-size: 11px;
                color: #fff;
                text-decoration: none;
            }
    </style>
</head>
<body class='default' style="overflow: hidden">
    <div id="galleryContent" style="height: 100%">
        <div id="GalleryHeader"></div>
        <div id="GalleryLinksbar"></div>
        <div style="box-sizing: border-box; -moz-box-sizing: border-box; padding-top: 90px; width: 100%; height: 100%">
          <div id="dataTable" style="border: 0px"></div>
        </div>
    </div>
</body>
</html>

November 3, 2014 at 6:21 am Vertical scrollbar #62024

Peter Stoev

Keymaster

Hello Peter Sloth,

If you want to have vertical scrollbar, you will have to set the DataTable’s height property, because by default it’s height is automatic.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

November 3, 2014 at 5:20 pm Vertical scrollbar #62061

Peter Sloth

Participant

Hi Peter Stoev

thanks for the reply. The problem is that I don’t know what to set the widget’s height to! I want of course the widget to fill out the remaining vertical space, i.e it’s height should be something like this: “100% – 20px – 75px”.
Is it possible to achieve this in some way?

thanks

Best regards
Peter Sloth

November 4, 2014 at 6:52 am Vertical scrollbar #62076

Peter Stoev

Keymaster

Hi Peter Sloth,

Sorry, it’s not possible to set height in format “100%” – something. It’s possible to set it either in percentages or fixed number. You can also change it dynamically by setting the “height” property again.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

November 4, 2014 at 8:47 pm Vertical scrollbar #62136

Peter Sloth

Participant

I have fixed the problem. For everyone whose interested, the code is below.

Thanks

//Peter

<!DOCTYPE html>
<html lang="en">
<head>
    <title id="Description">Data Rows with customized rendering in jqxDataTable</title>
    <meta name="description" content="This sample demonstrates how we can customize the rendering of the Data Rows in the jQWidgets DataTable widget.">
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatatable.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
      $(document).ready(function () {
            // prepare the data
            var data = [
                {
                    laptops:
                    [
                        { 'img': '../../images/l-13.jpg', ram: '8GB DD3', cpu: 'Intel Core i7-3720QM', price: 2999, display: 15.4, hdd: '512GB SSD', model: 'Apple MacBook Pro' },
                        { img: '../../images/l-14.jpg', ram: '8GB DD3', cpu: 'Intel Core i7-3667U', price: 1299, display: 13.3, hdd: '256GB SSD', model: 'Apple MacBook Air' },
                        { img: '../../images/l-15.jpg', ram: '8GB DD3', cpu: 'Intel Core i7-3632QM', price: 2199, display: 15.4, hdd: '256GB SSD', model: 'Asus ZenBook UX51VZ' }
                    ]
                },
                {
                    laptops:
                    [
                        { img: '../../images/l-16.jpg', ram: '4GB DD3', cpu: 'Intel Core i5-3317U', price: 1899, display: 13.3, hdd: '128GB SSD', model: 'ASUS TAICHI31-CX009H' },
                        { img: '../../images/l-17.jpg', ram: '4GB DD3', cpu: 'Intel Core i7-3517U', price: 1799, display: 13.3, hdd: '628GB', model: 'Asus TX300CA-C4024H' },
                        { img: '../../images/l-18.gif', ram: '16GB DD3', cpu: 'Intel Core i7-3820QM', price: 2499, display: 15.6, hdd: '1TB', model: 'Lenovo ThinkPad T530' }
                    ]
                },
                {
                    laptops:
                    [
                        { img: '../../images/l-19.jpg', ram: '8GB DD3', cpu: 'Intel Core i5-3210M', price: 1499, display: 15.6, hdd: '750GB', model: 'Samsung Series 7 Chronos' },
                        { img: '../../images/l-20.jpg', ram: '8GB DD3', cpu: 'Intel Core i7-3720QM', price: 1499, display: 17.3, hdd: '256GB SSD', model: 'HP EliteBook 8770w' },
                        { img: '../../images/l-21.jpg', ram: '8GB DD3', cpu: 'Intel Core i7-3517U', price: 1499, display: 14.0, hdd: '512GB', model: 'Dell XPS 14' }
                    ]
                },
                {
                    laptops:
                    [
                        { img: '../../images/l-22.jpg', ram: '32GB DD3', cpu: 'Intel Core i7-4800MQ', price: 3499, display: 17.3, hdd: '750GB', model: 'Dell Alienware 17' },
                        { img: '../../images/l-23.jpg', ram: '8GB DD3', cpu: 'Intel Core i7-3537U', price: 1699, display: 15.6, hdd: '1TB', model: 'Acer Aspire R7-571G' },
                        { img: '../../images/l-24.jpg', ram: '8GB DD3', cpu: 'Intel Core i7-4500U', price: 1599, display: 15.6, hdd: '256GB SSD', model: 'Acer Aspire V5-573G' }
                    ]
                },
                {
                    laptops:
                    [
                        { img: '../../images/l-25.jpg', ram: '32GB DD3', cpu: 'Intel Core i7-4700MQ', price: 2199, display: 17.3, hdd: '1TB', model: 'Toshiba Qosmio X70-A-114' },
                        { img: '../../images/l-26.gif', ram: '4GB DD3', cpu: 'Intel Core i7-3667U', price: 2699, display: 14.0, hdd: '256GB SSD', model: 'Lenovo Thinkpad X1 Carbon' },
                        { img: '../../images/l-27.jpg', ram: '8GB DD3', cpu: 'Intel Core i5-3317U ', price: 1699, display: 12.5, hdd: '128GB SSD', model: 'Dell XPS Duo 12' }
                    ]
                },
                {
                    laptops:
                    [
                        { img: '../../images/l-28.png', ram: '8GB DD3', cpu: 'Intel Core i7-3537U', price: 1799, display: 12.5, hdd: '256GB SSD', model: 'Lenovo ThinkPad Twist S230u' },
                        { img: '../../images/l-29.jpg', ram: '4GB DD3', cpu: 'Intel Core i5-3317U ', price: 1299, display: 11.6, hdd: '128GB SSD', model: 'Sony Vaio Duo' },
                        { img: '../../images/l-30.jpg', ram: '4GB DD3', cpu: 'Intel Core i5-3230M', price: 999, display: 15.5, hdd: '256GB SSD', model: 'Sony VAIO' }
                    ]
                }
            ];

            var source =
            {
                localData: data,
                dataType: "array"
            };

            var dataAdapter = new $.jqx.dataAdapter(source);

            $("#dataTable").jqxDataTable(
            {
              width: '100%',
              //height: '100%',
                source: dataAdapter,
                sortable: false,
                pageable: false,
                enableHover: false,
                selectionMode: 'none',
                showHeader: false,
                theme: theme,
                rendered: function () {

                },
                columns: [
                      {
                          align: 'left', dataField: 'model',
                          // row - row's index.
                          // column - column's data field.
                          // value - cell's value.
                          // rowData - rendered row's object.
                          cellsRenderer: function (row, column, value, rowData) {
                              var laptops = rowData.laptops;
                              var container = "<div>";
                              for (var i = 0; i < laptops.length; i++) {
                                  var laptop = laptops[i];
                                  var item = "<div style='float: left; width: 210px; overflow: hidden; white-space: nowrap; height: 265px;'>";
                                  var image = "<div style='margin: 5px; margin-bottom: 3px;'>";
                                  var imgurl = laptop.img;
                                  var img = '<img width=160 height=120 style="display: block;border-radius: 5px; " src="' + imgurl + '"/>';
                                  image += img;
                                  image += "</div>";

                                  var info = "<div style='margin: 5px; margin-left: 10px; margin-bottom: 3px;'>";
                                  info += "<div><i>" + laptop.model + "</i></div>";
                                  info += "<div>Price: $" + laptop.price + "</div>";
                                  info += "<div>RAM: " + laptop.ram + "</div>";
                                  info += "<div>HDD: " + laptop.hdd + "</div>";
                                  info += "<div>CPU: " + laptop.cpu + "</div>";
                                  info += "<div>Display: " + laptop.display + "</div>";
                                  info += "</div>";

                                  var buy = "<button class='buy' style='margin: 5px; width: 80px; left: -40px; position: relative; margin-left: 50%; margin-bottom: 3px;'>Buy</button>";

                                  item += image;
                                  item += info;
                                  item += buy;
                                  item += "</div>";
                                  container += item;
                              }
                              container += "</div>";
                              return container;
                          }
                      }
                ]
            });
        
            //Initial load of page
            sizeContent();

      });
      
      //Dynamically assign height
      function sizeContent() {
        var newHeight = $(window).height() - $("#GalleryHeader").height() - $("#GalleryLinksbar").height();
        $('#dataTable').jqxDataTable({ height: newHeight });
      }
      
      //Every resize of window
      $(window).resize(sizeContent);

    </script>
    <style>
        h4 {
            font-size: 14px;
            margin: 18px 0 15px 15px;
        }

        .tag-title-info {
            background: transparent;
            width: 1px;
            height: 0px;
            border-color: #4272b8 transparent #4272b8 #4272b8 !important;
            border-width: 26px 26px;
            border-style: solid;
            z-index: 1000;
            top: 0px;
            position: absolute;
            left: 598px;
        }

        div#GalleryHeader
        {
            padding-left: 5px;
            padding-right: 5px;
            height: 67px;
            position: absolute;
            width: 100%;
            background-color: green;
        }

        div#GalleryLinksbar
        {
            padding-left: 5px;
            padding-right: 5px;
            height: 20px;
            top: 67px;
            position: absolute;
            white-space: nowrap;
            width: 100%;
            background-color: red;
        }

        .tag-title {
            font-size: 16px;
            color: #fff;
            position: absolute;
            z-index: 100;
            left: 0;
            line-height: 100%;
            background: #4272b8 !important;
            height: 52px;
            padding: 0px;
            margin: 0px;
            top: 0px;
            width: 500px;
            vertical-align: middle;
        }

        .cart-top {
            font-family: Arial, Helvetica, sans-serif;
            height: 35px;
            position: absolute;
            left: 500px;
            top: 0;
            color: #fff;
            padding: 16px 14px 1px 14px;
            font-size: 11px;
            font-weight: 400;
            background: #4272b8 !important;
            z-index: 199;
        }

            .cart-top p {
                font-weight: bold;
                font-size: 11px;
                background: url(../../images/cart-icon.png) no-repeat right center;
                min-height: 16px;
                text-align: left;
                padding: 0 24px 0 0;
                margin-top: 2px;
                float: left;
                font-size: 11px;
                color: #fff;
                text-decoration: none;
            }
    </style>
</head>
<body class='default' style="overflow: hidden; margin: 0px">
    <div id="galleryContent" style="height: 100%">
        <div id="GalleryHeader"></div>
        <div id="GalleryLinksbar"></div>
        <div id="dataTable" style="border: 0px;padding-top: 87px;"></div>

<!--        <div style="box-sizing: border-box; -moz-box-sizing: border-box; padding-top: 87px; width: 100%; height: 100%">
          <div id="dataTable" style="border: 0px"></div>
        </div>-->
    </div>
</body>
</html>

Author

Posts

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.