How to add title when the "header" set as "true" in "cb"

[noctrona]

Hi team,

I used "checkBoxSelection" in one of my table column.
My codes for this column:

Code: [Select]

{ title: "", dataIndx: "state", maxWidth: 30, minWidth: 30, align: "center", cls:'checkReadForReview',
   cb: { header: true, all: false },
   type: 'checkBoxSelection',  resizable: false, sortable: false, editable: false
}

As the API said, when I set "header" as "true", the checkbox will display on the header without any title. And if I set it as "false", I can set title for the column.
But I want to let user choose the whole column so I set "true" for "header". And I try to use jquery to add a title dynamically.

Have a look with my codes:

Code: [Select]

$("td[pq-col-indx=126][pq-row-indx=0]").append('<div class="pq-td-div">Ready For Review<span class="pq-col-sort-icon">&nbsp;</span></div>');

When these codes run, the title can add on the header, but the first column in my table have a problem. It looks like the title contents change the whole style for the table.(As the screenshot pic "FirstColumn").
The column will become normally after I click it("Normally" pic). And the title which I just add by js will disappear.


So do you have any suggestion to add a title when I want to keep "header:true" ?


Thank you!

[paramvir]

Any change to the grid DOM should be done in refresh event.

Code: [Select]

refresh: function(){
$(this).find(".pq-grid-title-row input[type='checkbox']").wrap("<span>Title</span>");
},


[noctrona]

Any change to the grid DOM should be done in refresh event.

Code: [Select]

refresh: function(){
$(this).find(".pq-grid-title-row input[type='checkbox']").wrap("<span>Title</span>");
},


Works. Thanks for your feedback!
BTW, the "editable" only control the cell content. So how to control the check-box editable permission?


Thank you!

[paramvir]

"editable" works for checkbox editors too. Check this demo (column "Discontinued") http://paramquery.com/pro/demos/editing

[noctrona]

"editable" works for checkbox editors too. Check this demo (column "Discontinued") http://paramquery.com/pro/demos/editing

Sorry, I didn't described clearly. I use the "checkBoxSelection", but I want to control then edit permission for each row.

Code: [Select]

{ title: "Ready for review", dataIndx: "state", maxWidth: 50, minWidth: 50, align: "center", cls:'checkReadForReview',
cb: { header: true, all: false },
type: 'checkBoxSelection',  resizable: false, sortable: false,
editable: false,
}

At before, I used "render" option to generate "checkbox" by html string. And I can check some value and control the edit permission.

Code: [Select]

render: function (ui){
    var rowData = ui.rowData, dataIndx = ui.dataIndx;
    var val = rowData[dataIndx];
    if(val == 'total'){
        return '';
    }
    else{
        var currentId = rowData['Id']+'PMM';
        var currentStatus = rowData['status'];
        str = "";
        if (val) {
            str = "checked='checked'";
        }
        var validatedValue = rowData['validatedandLocked'];
        if(isPriceAnalyst == 'true'){
            if(String(validatedValue) == 'true' && {!(isUnlocked)}){
                reStr = "<input id='"+currentId+"' type='checkbox' " + str + " onclick='pmmDoneCheck(\""+currentId+"\")' />";
            }
            else{
                reStr = "<input id='"+currentId+"' type='checkbox' " + str + "  disabled='true' />";
            }
            return reStr;
        }
        else{
            return "<input id='"+currentId+"' type='checkbox' " + str + "  disabled='true' />";
        }
                                   
    }
}

Thank you!