Author Topic: Change the row color to red dynamically  (Read 3345 times)

Ajay

  • Pro Ultimate
  • Newbie
  • *
  • Posts: 31
    • View Profile
Change the row color to red dynamically
« on: February 18, 2015, 06:03:34 pm »
Hi ,
i am paramQuery grid.

i ma getting rows with staus as1 and 0.
when the status is 0, i have to mark that row as red.
I have tried with the following code.Butin vain.
Please help me in fixing this.

Code:

this.initialize = function (tab) {
        loadablesTab = tab;
        gridLoadables = $('#gridLoadables');

        var columnModel = [
            { title: platform.strings.Node, dataIndx: "Node", width: 140,  align: "left" },
            { title:platform.strings.Description, dataIndx: "Description", width: 500, align: "left" },
            { title: platform.strings.Assembly, dataIndx: "AssemblyPath", width: 500, align: "left" },
            {
                title: platform.strings.Type, dataIndx: "Type", width: 140, align: "left"     },
            { title: platform.strings.Version, dataIndx: "Version", width: 70, align: "left" },
            {
                title:platform.strings.Status, dataIndx: "Status", width: 20, align: "left",
                render: function (ui) {
                    var rowData = ui.rowData,
                    dataIndx = ui.dataIndx,
                    cellData = rowData[dataIndx];

                    if (typeof cellData === "undefined")
                        return "<span ></span>";
                    else {
                        if (cellData == "1") {
                            return "<span>UP</span>"
                        }
                        if (cellData == "0") {
                            debugger;
                            var $tr = gridLoadables.pqGrid("getRow", { rowIndxPage: ui.rowIndx });
                            $tr.context.css("color", "red");
                            //gridLoadables.pqGrid("option", { pq_rowcls: "red" });

                            return "<span>DOWN</span>"
                        }
                    }
                }
            }
        ];
        gridLoadables.pqGrid({
            width: NMCApp.getSearchGridWidth(),
            height: NMCApp.getSearchGridHeight(),
            editable: false,
            topVisible: false,
            bottomVisible: false,
            numberCell: false,
            roundCorners: false,
            wrap: false,
            colModel: columnModel,
            dataModel: { data: [] },
            scrollModel: { pace: 'consistent', horizontal: false },
        });
     
    }
    function searchLoadables() {
        $.ajax({
            type: 'GET',
            url: searchUrl,
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            processdata: false,
            cache: false,
            success: function (data) {
                for (var i = 0; i < data.length; i++) {
                   
                    loadables.push(data);

                }
                    gridLoadables.pqGrid("option", "dataModel", { data: loadables });
               
            },
            error: function (request, status, error) {
                hideLoadingWindow();
                handleNMCException(request.responseText);
            }

        });
    }