Hi,
How do I add a checkbox to column header. I don't want to use the multiselect checkbox which is already available, I want a custom checkbox to be displayed on the grid column header(note: may be third column in the grid).
Functionality of this checkbox displayed on the header is something like selecting all the checkboxes in the grid. That is say I have 3 columns with checkboxes , so on clicking the custom checkbox I want to check all the checkboxes in 3 columns.
Please Suggest.
Thanks,
Veena
Hello Veena,
Thank you for posting in our community.
What I can suggest for achieving your requirement is handling headerRendered event of the igGrid. Since this event is fired after headers have been rendered this is a suitable place to append the checkbox element. This could be achieved by using the append/prepend function which inserts content, specified by parameter as the first child/last child. After the checkboxes are appended their click event could be handled in order to check what is the current state of the checkbox that triggered the event and set the state of all other checkboxes accordingly. For example:
[code]
function colHeadersChkbx() {
$($('#grid').igGrid("headersTable").find("span")[0]).prepend("<input id='Checkbox1' type='checkbox' />");
$($('#grid').igGrid("headersTable").find("span")[2]).prepend("<input id='Checkbox2' type='checkbox' />");
$("#Checkbox1").click(function (event) {
var isChecked = $("#Checkbox1")[0].checked;
if (isChecked === true) {
$("#Checkbox2")[0].checked = true;
}
else {
$("#Checkbox2")[0].checked = false;
});
$("#Checkbox2").click(function (event) {
var isChecked = $("#Checkbox2")[0].checked;
$("#Checkbox1")[0].checked = true;
$("#Checkbox1")[0].checked = false;
[/code]
Please keep in mind that when this approach is used sorting behavior of the igGrid should be either canceled or disabled. The reason is that in case it is enabled a click on the grid`s header will cause sorting to occur.
I made a small sample project illustrating my suggestion and I am attaching it for your reference.
Please feel free to contact me if you have any additional questions regarding this matter.
Please let me know if I can provide you any further assistance with this matter.
Thanks for the post. It worked fine :)
I was able to get the checkbox added to the column header. I have a requirement where I should show the checkbox tick color as RED instead on black.
I have added custom checkboxes to the igGrid even the same style should be applied to those checkboxes as well.
headerRendered:function (evt, ui) {
$(_$selectDisplayGrid.igGrid("headersTable").find("span")[0]).prepend("<input type='checkbox' id='checkAllCheckBox'/>");
used below function for formatter to add custom checkbox.
_buildCheckBox =function (value) {
if (value !== null && value !== "") {
return "<input type='checkbox' class='selectedDisplay' id='" + value + "'/>";
else {return "";}}
How do I do that?
Kiran