Tips on optimizing grid script - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: grid, jqxgrid, performance, script

This topic contains 4 replies, has 3 voices, and was last updated by oscar.gonzalez 10 years, 1 month ago.

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

Author

Tips on optimizing grid script Posts

January 27, 2015 at 8:46 pm Tips on optimizing grid script #66105

Participant

Hi there,

We are in the process of selecting a front end library for a big client and we would like your help clarifying a question about the grid performance based on the following script:

<!DOCTYPE html>
<html lang="en">
<head>
  <title id='Description'>jQGrid Example </title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" href="./codebase/jqwidgets/styles/jqx.base.css" type="text/css" />
  <script type="text/javascript" src="./codebase/scripts/jquery-1.11.1.min.js"></script>
  <script type="text/javascript" src="./codebase/jqwidgets/jqxcore.js"></script>
  <script type="text/javascript" src="./codebase/jqwidgets/jqxdata.js"></script>
  <script type="text/javascript" src="./codebase/jqwidgets/jqxbuttons.js"></script>
  <script type="text/javascript" src="./codebase/jqwidgets/jqxscrollbar.js"></script>
  <script type="text/javascript" src="./codebase/jqwidgets/jqxmenu.js"></script>
  <script type="text/javascript" src="./codebase/jqwidgets/jqxcheckbox.js"></script>
  <script type="text/javascript" src="./codebase/jqwidgets/jqxlistbox.js"></script>
  <script type="text/javascript" src="./codebase/jqwidgets/jqxdropdownlist.js"></script>
  <script type="text/javascript" src="./codebase/jqwidgets/jqxgrid.js"></script>
  <script type="text/javascript" src="./codebase/jqwidgets/jqxgrid.sort.js"></script>
  <script type="text/javascript" src="./codebase/jqwidgets/jqxgrid.pager.js"></script>
  <script type="text/javascript" src="./codebase/jqwidgets/jqxgrid.selection.js"></script>
  <script type="text/javascript" src="./codebase/jqwidgets/jqxgrid.edit.js"></script>
</head>
<body class='default'>
  <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
    <div id="jqxgrid">
    </div>
  </div>
  <script src="grid.js"></script>
  <script type="text/javascript">jQWidgetsGrid.create();</script>
</body>
</html>

var jQWidgetsGrid = {

  create: function() {
    var url = "./products.xml";
    // prepare the data
    var source =
  {
    datatype: "xml",
    datafields: [
  { name: 'ProductName', type: 'string' },
{ name: 'QuantityPerUnit', type: 'int' },
{ name: 'UnitPrice', type: 'float' },
{ name: 'UnitsInStock', type: 'float' },
{ name: 'Discontinued', type: 'bool' }
],
root: "Products",
record: "Product",
id: 'ProductID',
url: url
};
var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
  if (value < 20) {
    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #ff0000;">' + value + '</span>';
  }
  else {
    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #008000;">' + value + '</span>';
  }
}
var dataAdapter = new $.jqx.dataAdapter(source, {
  downloadComplete: function (data, status, xhr) { },
  loadComplete: function (data) { },
  loadError: function (xhr, status, error) { }
});
// initialize jqxGrid
$("#jqxgrid").jqxGrid(
{
  width: 850,
  source: dataAdapter,
  pageable: false,
  autoheight: false,
  sortable: true,
  altrows: true,
  enabletooltips: true,
  editable: true,
  selectionmode: 'multiplecellsadvanced',
  columns: [
{ text: 'Product Name', datafield: 'ProductName', width: 250 },
{ text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
{ text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
{ text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', cellsrenderer: cellsrenderer, width: 100 },
{ text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
]
});
  }
};

Any help would be greatly appreciated

January 28, 2015 at 7:58 am Tips on optimizing grid script #66117

Dimitar

Participant

Hello oscar.gonzalez,

Your code is fine. The only thing we can recommend here is that you initialize all jQWidgets components in $(document).ready(). It may also help to include all scripts in the head section:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>jQGrid Example </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="./codebase/jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="./codebase/scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="./codebase/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="./codebase/jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="./codebase/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="./codebase/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="./codebase/jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="./codebase/jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="./codebase/jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="./codebase/jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="./codebase/jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="./codebase/jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="./codebase/jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="./codebase/jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="./codebase/jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="grid.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            jQWidgetsGrid.create();
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

February 10, 2015 at 4:01 pm Tips on optimizing grid script #66838

oscar.gonzalez

Participant

Thanks a lot, that helped, but now I am seeing a gap after we load the JS and the time we load the images as shown in the image:

Image can also be found here: https://www.evernote.com/shard/s2/sh/d3576630-a497-451c-b27f-c02506faf1c3/8c18560507916889f8d0ecfc390fd993

Gap in load time

February 10, 2015 at 4:07 pm Tips on optimizing grid script #66840

Peter Stoev

Keymaster

Hi oscar.gonzalez,

Images are loaded after your widget and its styles are rendered. We do not find this to be a problem in any way.

Best Regards,
Peter Stoev

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

February 11, 2015 at 2:34 pm Tips on optimizing grid script #66927

oscar.gonzalez

Participant

Sorry Peter, what I was trying to understand is why it takes nearly 300ms to render the grid, is this expected? I just want to understand if this is something we should expect as we have some performance constraints that we would like to evaluate before selecting the product.

Thanks for your help.

Author

Posts

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

You must be logged in to reply to this topic.