ParamQuery grid support forum

General Category => Help for ParamQuery Pro => Topic started by: mewbie on January 19, 2018, 09:19:01 am

Title: Custom Render all Columns in Table
Post by: mewbie on January 19, 2018, 09:19:01 am

Hello,

I have data only receiving 1 and 0, and I want to display it as ✓ and ✗ instead.

I can try with

Code: [Select]

var tickRender = function (ui) {
dataRow = ui.rowData.Circuit
  // validation function
}

colModel:  { title: "Circuit", width: 120, dataIndx: "Circuit", render: tickRender }
but if I have several columns it would be tedious to write every function per column,
could you help me know the proper way doing it?

Thanks

Title: Re: Custom Render all Columns in Table
Post by: paramvir on January 19, 2018, 01:09:54 pm

Any common property for all columns can be added in columnTemplate.

https://paramquery.com/pro/api#option-columnTemplate

Title: Re: Custom Render all Columns in Table
Post by: mewbie on January 19, 2018, 02:10:08 pm

Thank you,

it works great, although the function is called multiple times with column number.

Title: Re: Custom Render all Columns in Table
Post by: paramvir on January 19, 2018, 02:35:53 pm

Quote

the function is called multiple times with column number.

Not sure what you mean by that.

Title: Re: Custom Render all Columns in Table
Post by: mewbie on January 22, 2018, 08:49:45 am

This is my function for columnTemplate :

Code: [Select]

    var renderTick = function (ui) {
        var dataRow = ui.rowData;
        // var indxRow = ui.rowIndx;
        console.log(ui);
        Object.keys(dataRow).forEach(function (key) {
            if (dataRow[key] == '1') {
                return dataRow[key] = '✓';
            } else if (dataRow[key] == '0') {
                return dataRow[key] = '✗';
            }
        });
    }
ui is called multiple times upon children tab expansion (it has several column),
not like what I thought it would be single ui call, not a problem at the moment and I don't know how to refactor it yet.

Title: Re: Custom Render all Columns in Table
Post by: paramvir on January 22, 2018, 02:27:27 pm

You have least control on how many times render is called, but your render callback is implemented incorrectly, it should return rendered value for current cell.

Code: [Select]

    var renderTick = function (ui) {       
            if (ui.cellData == '1') {
                return '✓';
            } else if (ui.cellData == '0') {
                return '✗';
            }
        });
    }