Author Topic: How to add title when the "header" set as "true" in "cb"  (Read 6137 times)

noctrona

  • Pro Enterprise
  • Jr. Member
  • *
  • Posts: 82
    • View Profile
How to add title when the "header" set as "true" in "cb"
« on: July 13, 2015, 08:28:43 am »
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

  • Administrator
  • Hero Member
  • *****
  • Posts: 6121
    • View Profile
Re: How to add title when the "header" set as "true" in "cb"
« Reply #1 on: July 14, 2015, 06:23:56 pm »
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

  • Pro Enterprise
  • Jr. Member
  • *
  • Posts: 82
    • View Profile
Re: How to add title when the "header" set as "true" in "cb"
« Reply #2 on: July 15, 2015, 12:09:18 pm »
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

  • Administrator
  • Hero Member
  • *****
  • Posts: 6121
    • View Profile
Re: How to add title when the "header" set as "true" in "cb"
« Reply #3 on: July 15, 2015, 12:20:44 pm »
"editable" works for checkbox editors too. Check this demo (column "Discontinued") http://paramquery.com/pro/demos/editing

noctrona

  • Pro Enterprise
  • Jr. Member
  • *
  • Posts: 82
    • View Profile
Re: How to add title when the "header" set as "true" in "cb"
« Reply #4 on: July 15, 2015, 12:47:27 pm »
"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!