jQuery UI Widgets › Forums › Grid › Grid rowrenderer or equivalent

Tagged: , , , , , , , , ,

This topic contains 1 reply, has 2 voices, and was last updated by  Dimitar 10 years, 2 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Grid rowrenderer or equivalent Posts
  • November 17, 2014 at 5:16 am Grid rowrenderer or equivalent #62813

    luesak
    Participant

    Hi,

    I need to format the entire row in the grid by adding saying a border top a row based on some condition in the data. This is kind of achievable with cellsrender if I put it on every single column, but this makes the grid very slow because there are lots of columns. And the result is not idea because the data in the cell is actually an inner div of the grid cell div.

    There is no way to back track using jquery to find the row div because of the way data is loaded into the grid… row divs are created by screen height and are not created for every single row in the data of the grid… as the user scrolls down the data, the data in the row div is replaced without creating new row divs. The cellsrender function is only fired for new row data that has not been shown before.

    This causes a problem where if you try to format the entire row by getting the id of the row div using query because the as the user scrolls, new data is put into the SAME row div and the cellsrender function is not called again.

    Here’s my data scenario… So we have order numbers and descriptions from order items… the data is sorted using the order number… we need to draw a border for each row that is a new order. How do we know when to draw? When ItemNum == 1.

    OrderNum, ItemNum, OrderItemDesc
    1, 1, “Coke 1”
    1, 2, “Coke 2”
    1, 3, “Coke 3”
    __________________________________
    2, 1, “Coke 1”
    2, 2, “Coke 2”
    2, 3, “Coke 3”
    __________________________________
    3, 1, “Coke 1”
    3, 2, “Coke 2”
    3, 3, “Coke 3”

    Is there anyway this can be achieved? We’ve tried.

    We have tried:
    1. Putting the OrderNum as an attribute in the div content of the first column of each row where the ItemNum == 1 then calling a second format function to use Jquery to find the $(“div[OrderNum=” + rowData[“OrderNum”] + “]”).parent(“div”).parent(“div”)… this is the role=”row” div. This works on first load but when you scroll, despite the OrderNum attribute changing to the correct div content, the format function is not called. causing the grid not to repaint.
    2. Putting a format func for every single column, this kinda works, but the border is separated because it’s not drawn on the row.. but the div in the row=”cell” div.

    Thanks

    Kim

    November 17, 2014 at 11:35 am Grid rowrenderer or equivalent #62850

    Dimitar
    Participant

    Hello Kim,

    Here is a solution using cellclassname. Whenever the quantity in a row is less than 20, the row has a 3px top border. In your case, the condition would be if (ItemNum == 1).

    <!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <style type="text/css">
        .borderClass
        {
            border-top: 3px solid;
        }
    </style>
    <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/jqxcheckbox.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/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var url = "../sampledata/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 cellclass = function (row, columnfield, value) {
                var quantity = $('#jqxgrid').jqxGrid('getcellvalue', row, 'QuantityPerUnit');
                if (quantity < 20) {
                    return 'borderClass';
                }
            }

            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: true,
                autoheight: true,
                sortable: true,
                altrows: true,
                enabletooltips: true,
                editable: true,
                selectionmode: 'multiplecellsadvanced',
                columns: [
                  { text: 'Product Name', datafield: 'ProductName', width: 250, cellclassname: cellclass },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 120, cellclassname: cellclass },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 100, cellclassname: cellclass },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100, cellclassname: cellclass },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued', cellclassname: cellclass },
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id="jqxgrid">
    </div>
</body>
</html>

    Best Regards,
    Dimitar

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

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.