jQWidgets Forums

jQuery UI Widgets Forums Grid highligh entire row based on condition

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

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author

  • antrax13
    Participant

    Hi again,

    I know how to highligh cell but how to highlight entire row based on value.

    $(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 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: true,
                    autoheight: true,
                    sortable: true,
                    altrows: true,
                    enabletooltips: true,
                    editable: true,
                    selectionmode: 'multiplecellsadvanced',
                    columns: [
                      { text: 'Product Name', columngroup: 'ProductDetails', datafield: 'ProductName', width: 250 },
                      { text: 'Quantity per Unit', columngroup: 'ProductDetails', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                      { text: 'Unit Price', columngroup: 'ProductDetails', 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' }
                    ],
                    columngroups: [
                        { text: 'Product Details', align: 'center', name: 'ProductDetails' }
                    ]
                });
            });

    How to highlight (apply css style) row if QuantityPerUnit > 5?


    Peter Stoev
    Keymaster

    Hi antrax13,

    Add cellsrenderer to all columns so highlight all cells in a GRID row.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com


    antrax13
    Participant

    Thanks Peter it works like a charm.

    Just in case someone will need it here is the code:

    var cellclassname = function (row, columnfield, value, rowdata) {
        if(rowdata.isInTechnique == false){
           return 'red';
        }
    }
    {text: 'id', datafield: 'id', hidden: true},
     {text: firstLevelLabel, datafield: 'firsttag', width: 150, filterable: false, cellclassname: cellclassname},
     {text: 'Has Technique?', datafield: 'isInTechnique', width: 150, filtertype: 'checkedlist', cellclassname: cellclassname}

    each field/cell got cellclassname and based on isInTechnique field I will highlight all cells for that row.

    Thanks

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

You must be logged in to reply to this topic.