Search code examples
javascriptjqueryjqxgridjquery-widgets

How to edit jqwidgets jquery grid cellclassname/css using row id and column name?


{
    text: 'sell',
    datafield: 'Sales',
    width: '3%',
    columntype: 'button',
    filterable: false,
    cellsrenderer: function(row, columnfield, value, defaulthtml, columnproperties) {
        return '<i class="fa fa-list" aria-hidden="true"></i>';

    },
    buttonclick: function(rowData) {
        var dataRecord = $("#ProductPriceList").jqxGrid('getrowdata', rowData);

        sellIndex = $("#ProductPriceList").jqxGrid('getrowboundindex', rowData);
    }

},
{
    text: 'Code',
    datafield: 'ProductCode',
    columntype: 'textbox',
    filtercondition: 'contains',
    width: '5%'
}

how do I change the CSS(background color) of the cell Code on the row that has Id sellIndex via sell button click?

Thanks in advance.


Solution

  • I don't know if this is a good solution but I applied this:

    • Set sellIndex=-1 initially

    added this under Sales buttonclick

    sellIndex = $("#ProductPriceList").jqxGrid('getrowboundindex', rowData);
    
    $("#ProductPriceList").jqxGrid('updatebounddata');
    

    and this under Code

     cellsrenderer:
        function (row, columnfield, value, defaulthtml, columnproperties) 
                                   {
                                        if (sellIndex != -1)
                                        {
        
                                            if (row == sellIndex) {
                                                return '<br>&nbsp<span class="chosen">' + value + ' </span>';
                                            } else {
                                                return '<br>&nbsp' + value ;
                                            }
                                        }
                                        
                                    }