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.
HI Vasya,
I am passing the json data to the IG Grid from the view model, i want a column dynamically as Checkbox as header,and one checkbox column for all the other rows, one rows have a data bool , so the checkbox should be check if the bool value is true or else unchecked and vice versa, in case if all the rows have the data is true means all the checkbox should be check and header checkbox also should be cheked, if any one of the value is not true, the header checkbox should be unchecked.
Hope you understand my requirements, please suggest me on this .
Please fee free to ask any queries.
Thanks
Vadivel (India)
Hello Vivadel,
Thank you for posting in our community
Let me clarify whether I understood your requirement correctly. Can you please answer the following questions:
This information is going to be highly appreciated and will help me decide how to proceed further.
Looking forward to hearing from you.
Let me clarify you question,
1. For Example, i have a data as json [{Name: Vadivel, City:Hyderabad, IsActive: true}]. only one row
2. so in my IGGrid, i want a column header as checkbox which are not bounded, but the column should contain the value of IsActive as checkbox (true means checked, false means unchecked)
3. Suppose i have 5 rows , all the rows IsActive is true means, all the checkbox should be checked as well as the column header checkbox also checked, if any one of the 5 rows contains value IsActive is false means the column header should not be checked, only the column should be checked which having IsActive value as true.
Hope you understand my explanation, please feel free to ask any info or queries.
Vadivel M
Senior Programmer Analyst