jQuery UI Widgets Forums Grid Auto row height on a per-row basis

This topic contains 5 replies, has 2 voices, and was last updated by  Dimitar 8 years, 9 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • Auto row height on a per-row basis #76473

    fritzfrancis
    Participant

    Hello,

    I have a grid with columns that cannot fit the amount of text inside them without cutting off. The general solution is to set autorowheight: true and autoheight: true, but doing so has huge performance issues depending on the amount of data in my grid. I’d like to be able to expand a row by clicking on it. I already have the beginning of my click event that adds the proper jqx-grid-cell-wrap to the cells in the row:

    $("#jqxGrid").on("rowselect", function (e) {
        var row = e.args.rowindex;
        var selectorString = "#row" + row + "jqxGrid > div.jqx-item";
        $(selectorString).addClass("jqx-grid-cell-wrap");
    });

    Now I just need to set the height of the row to the correct amount of pixels calculated from the text wrapping inside the cell. If there is an easy way to do this, please let me know.

    My second option is to simply use rowdetails to display the information that’s being cut off, but I don’t have a clue on how to do that. I’ve read the rowdetailstemplate documentation, but it doesn’t describe a way to simply display the information that’s in each cell of the row.

    Please advise on how I should proceed.

    Regards,
    Fritz Francis

    Auto row height on a per-row basis #76496

    Dimitar
    Participant

    Hello Fritz Francis,

    1. Unfortunately, row height setting is not supported. However, you can implement autorowheight: true and pageable: true to avoid the performance issues that arise with autoheight: true.
    2. Here is an example that shows how to display the value of the first cell in a row in its row details:
      <!DOCTYPE html>
      <html lang="en">
      <head>
          <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/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/jqxgrid.aggregates.js"></script>
          <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.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 () {
                  var data = generatedata(5);
                  var source = {
                      localdata: data,
                      datafields: [{
                          name: 'firstname',
                          type: 'string'
                      }, {
                          name: 'lastname',
                          type: 'string'
                      }, {
                          name: 'productname',
                          type: 'string'
                      }, {
                          name: 'date',
                          type: 'date'
                      }, {
                          name: 'quantity',
                          type: 'number'
                      }, {
                          name: 'price',
                          type: 'number'
                      }],
                      datatype: "array"
                  };
      
                  var adapter = new $.jqx.dataAdapter(source);
                  $("#jqxgrid").jqxGrid({
                      width: 700,
                      autoheight: true,
                      theme: 'energyblue',
                      height: 300,
                      source: adapter,
                      rowdetails: true,
                      rowdetailstemplate: { rowdetails: '<div style="margin: 10px;"></div>', rowdetailsheight: 35 },
                      initrowdetails: function (index, parentElement, gridElement, datarecord) {
                          container = $($(parentElement).children()[0]);
                          var firstCell = $('#jqxgrid').jqxGrid('getcellvalue', index, 'productname');
                          container.append(firstCell);
                      },
                      columns: [{
                          text: 'Product',
                          datafield: 'productname',
                          width: 100
                      }, {
                          text: 'First Name',
                          datafield: 'firstname',
                          width: 90
                      }, {
                          text: 'Last Name',
                          datafield: 'lastname',
                          width: 90
                      }, {
                          text: 'Order Date',
                          datafield: 'date',
                          width: 160,
                          cellsformat: 'dd-MMMM-yyyy'
                      }, {
                          text: 'Quantity',
                          datafield: 'quantity',
                          width: 80,
                          cellsalign: 'right'
                      }, {
                          text: 'Unit Price',
                          datafield: 'price',
                          cellsalign: 'right',
                          cellsformat: 'c2'
                      }]
                  });
              });
          </script>
      </head>
      <body class='default'>
          <div id='jqxWidget'>
              <div id="jqxgrid">
              </div>
          </div>
      </body>
      </html>

    Best Regards,
    Dimitar

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

    Auto row height on a per-row basis #76537

    fritzfrancis
    Participant

    Thanks, Dimitar. This looks like an excellent and elegant solution. Unfortunately, with the rowdetails, all of my rows are auto-expanding as soon as the grid binding is complete. I searched on the forum and saw Peter mention a property called rowdetailshidden, but could not find any such property in the documentation. Could you let me know how I can prevent these rows from being expanded by default? I am using jQWidgets 3.8.0.

    Thanks,
    Fritz Francis

    Auto row height on a per-row basis #76548

    Dimitar
    Participant

    Hi Fritz Francis,

    Are you sure you are not calling the method showrowdetails in your code (e.g. in the ready callback)? The only ways for row details to be shown is with this method and through user interaction.

    Best Regards,
    Dimitar

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

    Auto row height on a per-row basis #76573

    fritzfrancis
    Participant

    I am sure. I have even done a complete search in my Visual Studio solution for the text “showrowdetails”, and the only match I get is in jqx-all.js.

    Auto row height on a per-row basis #76590

    Dimitar
    Participant

    Hi Fritz Francis,

    Could you, please, share a JSFiddle/jsEditor example reproducing this issue? Please also try updating to version 3.8.2 and see if this strange behaviour persists.

    I am looking forward to your reply.

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.