Author Topic: Conditional Formatting of Selected Row after value change  (Read 165 times)

mikep

  • Pro Ultimate
  • Full Member
  • *
  • Posts: 161
    • View Profile
Conditional Formatting of Selected Row after value change
« on: July 29, 2024, 11:01:15 pm »
For the following column, I need to format the selected row. I'm able to change cell data (below), but how can I format the selected grid row? I want to apply strikethrough text.

                {
                    title: "Actions", editable: true, dataIndx: 'Action', width: 140
                    editor: {
                        type: 'select',
                        options: ['', 'Edit Resource', 'Remove Resource'],
                        init: function (ui) {
                            ui.$editor.on('change', function () {
                                rd = ui.rowData
                                if ($(this).val() == "Remove Resource") {
                                    rd.ResourceName = "(Delete) " + rd.ResourceName
                                    rd.ResourceName.style('color', "red")    //this doesn't work, how can I format this row with strikethrough text? If that's not possible, how can I set font color to
                                   red?
                                }
                            });
                        }
                    },
                },

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6296
    • View Profile
Re: Conditional Formatting of Selected Row after value change
« Reply #1 on: July 30, 2024, 08:49:27 am »
Conditional styles are added in rowInit and column.render callbacks.

Please check this example: https://paramquery.com/pro/demos/condition_style

However if you want to add style while editing the cell, you can use class API. ( addClass and removeClass )

With class API:

Code: [Select]
grid.addClass({ rowIndx: ui.rowIndx, cls: 'pq-row-delete' });

Apply strikethrough style to cells in css.
Code: [Select]
.pq-row-delete > .pq-grid-cell {
    text-decoration: line-through;
}