jQuery UI Widgets Forums Grid autorowheight and scroll bar

This topic contains 3 replies, has 2 voices, and was last updated by  Dimitar 10 years, 4 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • autorowheight and scroll bar #47357

    morgenweck
    Participant

    How can I set the height of a grid and have a vertical scrollbar when I use autoheight: true, and autorowheight: true,
    I want to populate the row but I don’t know how much data will fill it, it’s mostly text. It seems that this may not be possible, if not do you have another suggestion?

    Thanks

    autorowheight and scroll bar #47360

    Dimitar
    Participant

    Hello morgenweck,

    You can either have a fixed height (e.g. “300px”) or you can have autoheight set to true. Both options are not possible at the same time. When you have set autoheight to true, you can enable paging (pageable: true), instead of having all the rows shown at the same time.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    autorowheight and scroll bar #47385

    morgenweck
    Participant

    But even using paging I would have enough screen at times without the help of a scroll bar. I think I should start investigating the jqxDatatable or if I put the grid into a jqxPanel would that then show a scroll bar?

    autorowheight and scroll bar #47509

    Dimitar
    Participant

    Hi morgenweck,

    Here is an example of a jqxGrid with its autoheight and autorowheight properties both set to true, inside a jqxPanel. Note, however, that this is not a good practice and there may be unexpected behaviour. Remember to include the z-index adjustment to the panel scrollbars in your project, too.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <style type="text/css">
            #jqxpanel .jqx-scrollbar
            {
                z-index: 10000;
            }
        </style>
        <script type="text/javascript" src="../../scripts/jquery-1.10.2.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/jqxgrid.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxnumberinput.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
        <script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script>
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <script type="text/javascript" src="generatedata.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                // prepare the data
                var data = generatedata(200);
    
                var source =
                {
                    localdata: data,
                    datatype: "array",
                    updaterow: function (rowid, rowdata, commit) {
                        // synchronize with the server - send update command
                        // call commit with parameter true if the synchronization with the server is successful 
                        // and with parameter false if the synchronization failder.
                        commit(true);
                    },
                    datafields:
                    [
                        { name: 'firstname', type: 'string' },
                        { name: 'lastname', type: 'string' },
                        { name: 'productname', type: 'string' },
                        { name: 'available', type: 'bool' },
                        { name: 'quantity', type: 'number' },
                        { name: 'price', type: 'number' },
                        { name: 'date', type: 'date' }
                    ]
                };
    
                var dataAdapter = new $.jqx.dataAdapter(source);
    
                // initialize jqxGrid
                $("#jqxgrid").jqxGrid(
                {
                    width: 685,
                    autoheight: true,
                    source: dataAdapter,
                    editable: true,
                    enabletooltips: true,
                    selectionmode: 'multiplecellsadvanced',
                    columns: [
                      { text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 80 },
                      { text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 80 },
                      { text: 'Product', columntype: 'dropdownlist', datafield: 'productname', width: 195 },
                      { text: 'Available', datafield: 'available', columntype: 'checkbox', width: 67 },
                      {
                          text: 'Ship Date', datafield: 'date', columntype: 'datetimeinput', width: 110, align: 'right', cellsalign: 'right', cellsformat: 'd',
                          validation: function (cell, value) {
                              if (value == "")
                                  return true;
    
                              var year = value.getFullYear();
                              if (year >= 2014) {
                                  return { result: false, message: "Ship Date should be before 1/1/2014" };
                              }
                              return true;
                          }
                      },
                      {
                          text: 'Quantity', datafield: 'quantity', width: 70, align: 'right', cellsalign: 'right', columntype: 'numberinput',
                          validation: function (cell, value) {
                              if (value < 0 || value > 150) {
                                  return { result: false, message: "Quantity should be in the 0-150 interval" };
                              }
                              return true;
                          },
                          createeditor: function (row, cellvalue, editor) {
                              editor.jqxNumberInput({ decimalDigits: 0, digits: 3 });
                          }
                      },
                      { text: 'Price', datafield: 'price', align: 'right', cellsalign: 'right', cellsformat: 'c2', columntype: 'numberinput',
                          validation: function (cell, value) {
                              if (value < 0 || value > 15) {
                                  return { result: false, message: "Price should be in the 0-15 interval" };
                              }
                              return true;
                          },
                          createeditor: function (row, cellvalue, editor) {
                              editor.jqxNumberInput({ digits: 3 });
                          }
    
                      }
                    ]
                });
    
                $("#jqxpanel").jqxPanel({ width: 500, height: 250 });
    
                // events
                $("#jqxgrid").on('cellbeginedit', function (event) {
                    var args = event.args;
                    $("#cellbegineditevent").text("Event Type: cellbeginedit, Column: " + args.datafield + ", Row: " + (1 + args.rowindex) + ", Value: " + args.value);
                });
    
                $("#jqxgrid").on('cellendedit', function (event) {
                    var args = event.args;
                    $("#cellendeditevent").text("Event Type: cellendedit, Column: " + args.datafield + ", Row: " + (1 + args.rowindex) + ", Value: " + args.value);
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id='jqxWidget'>
            <div id='jqxpanel'>
                <div id="jqxgrid">
                </div>
            </div>
            <div style="font-size: 12px; font-family: Verdana, Geneva, 'DejaVu Sans', sans-serif;
                margin-top: 30px;">
                <div id="cellbegineditevent">
                </div>
                <div style="margin-top: 10px;" id="cellendeditevent">
                </div>
            </div>
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

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

You must be logged in to reply to this topic.