How I can add checkbox in header for all rows selection at a time?

[saru19]

Hi,
I am using jsgrid for one of my project requirement. My requirement is to select all rows at a time using common checkbox in grid header. I have gone through the Demos and documentation of jsgrid but i didn't find anything that suits to my requirement.
It is little same as Batch Delete demo but here instead of delete button in header i need checkbox.So when i select that checkbox all rows checkboxes should select, so that i can perform required action on that.
I tried by keeping checkbox insted of button in header template code but no luck. I am struggling with this issue.Can anyone help me on this.

[tabalinas]

What was the problem when you put checkbox instead of the Delete button?
This sounds like the right solution.

[saru19]

Suppose i have total 20 records and showing 5 records per page. So there are 4 pages. If i click on select all checkbox in header it is selecting first page 5 records and not selecting other page records, this is fine. But the problem is common header checkbox is still showing as checked in 2nd,3rd and 4th pages eventhough none of the records are selected in those pages.
Below is the code i am using for this.

                            fields: [
				{
				 	 headerTemplate: function() {
					  	 return $("<input>").attr("type", "checkbox").attr("id", "selectAllCheckbox")
				 	 },
				 	 itemTemplate: function(_, item) {
					  	 return $("<input>").attr("type", "checkbox").attr("class", "singleCheckbox")
					  	 .prop("checked", $.inArray(item.firstName, selectedItems) > -1)
					  	 .on("change", function () {
					  	 $(this).is(":checked") ? selectItem($(this).parent().next().text()) : unselectItem($(this).parent().next().text());
					  	 });
				 	 },
				 	 align: "center",
				 	 width: 10,
				 	 sorting: false
				},
	             { name: "firstName", type: "text" , title: "First Name", width:"300"}
		]
				 
				 var selectedItems = [];
		 
			    var selectItem = function(item) {
				    selectedItems.push(item);
				    if($(".singleCheckbox").length == $(".singleCheckbox:checked").length) {
	                    $("#selectAllCheckbox").prop("checked", true);
	                } else {
	                    $("#selectAllCheckbox").prop("checked", false);
	                }
				};
			     
			    var unselectItem = function(item) {
				    selectedItems = $.grep(selectedItems, function(i) {
				    return i !== item;
				    });
				    if(selectedItems.length == 0) {
				    	$('#selectAllCheckbox').attr('checked', false);
				    }
				    if($(".singleCheckbox").length == $(".singleCheckbox:checked").length) {
	                    $("#selectAllCheckbox").prop("checked", true);
	                } else {
	                    $("#selectAllCheckbox").prop("checked", false);
	                }
			    };
				
				   $("#selectAllCheckbox").click(function(item) {
			    	selectedItems = [];
			    	if(this.checked) { // check select status
			            $('.singleCheckbox').each(function() { 
			                this.checked = true;   
			                selectItem($(this).parent().next().text());           
			            });			         
			        }else {
			        	
			            $('.singleCheckbox').each(function() { 
			                this.checked = false;      
			                unselectItem(item);
			            });  
			            selectedItems = [];
			        }
			    });

[saru19]

For more clarity of problem :
I have grid with a large number of records. The first header column is a select all checkbox and every row has its own checkbox.

I would like to have following functionality in my grid:

1. User can navigate through the grid and randomly select/deselect checkboxes.

2. Clicking on "select all" checkbox in the header should check/uncheck all the currently visible records only.

3. The "select all" button should maintain a state(checked/unchecked) for different pages E.g. if the user clicks select all on page 1 and navigates to next page, the Select all checkbox should be deselected and clicking it again would check all the rows in this page only while the previously selected checkboxes will get deselected.

[tabalinas]

@saru19, you could reset #selectAllCheckbox state this in onPageChanged http://js-grid.com/docs/#onpagechanged.
Have you tried it?