ParamQuery grid support forum

General Category => Help for ParamQuery Pro => Topic started by: mikep on July 29, 2024, 11:01:15 pm

Title: Conditional Formatting of Selected Row after value change
Post by: mikep 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?
                                }
                            });
                        }
                    },
                },

Title: Re: Conditional Formatting of Selected Row after value change
Post by: paramvir 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;
}