I know I can loop through the rows and get all the id and set the rows to selected via an array.
var rows = [];
for (var i = 0; i < _grid.getDataLength(); i++) {
rows.push(i);
}
_grid.setSelectedRows(rows);
But how can i fire the event programatically to check/uncheck the header checkbox which selects/unselects all the rows?
This is the snippet in the plugin JS file that looks for the header box to be checked:
function handleHeaderClick(e, args) {
if (args.column.id == _options.columnId && $(e.target).is(":checkbox")) {
// if editing, try to commit
if (_grid.getEditorLock().isActive() && !_grid.getEditorLock().commitCurrentEdit()) {
e.preventDefault();
e.stopImmediatePropagation();
return;
}
if ($(e.target).is(":checked")) {
var rows = [];
for (var i = 0; i < _grid.getDataLength(); i++) {
rows.push(i);
}
_grid.setSelectedRows(rows);
}
else {
_grid.setSelectedRows([]);
}
e.stopPropagation();
e.stopImmediatePropagation();
}
}
Setting the selected rows as you describe using grid.setSelectedRows() will update the 'Select/Deselect All' checkbox in the header row. The 'Checkbox Select Column' plugin subscribes to the grids onSelectedRowsChanged event which is triggered by grid.setSelectedRows(). When this event occurs the plugin calls the function handleSelectedRowsChanged(e, args) which determines if the 'Select/Deselect All' checkbox should be checked and updates it accordingly.
Setting the selected items to an empty array using the following snippet will clear all checkbox.
//Select no rows - clear the header checkbox
grid.setSelectedRows([]);
Setting the selected items to an array of all items using the following snippet will check the checkbox .
//Select all rows - will check header checkbox
//Generate an array of all rows ids from the grid data
var rows = [];
for (var i = 0; i < grid.getDataLength(); i++) {
rows.push(i);
}
//Set selected rows on grid
grid.setSelectedRows(rows);
If you really must trigger an event to check / uncheck the 'Select/Deselect All' header checkbox then you could use something like the below. However I'd strongly recommend sticking to the above methods.
//Determine if the checkbox is currently checked
var currentlyChecked = $('#myGrid').find('.slick-header-column:first-child').find('input').prop('checked')
//Set to reverse of current i.e. !currentlyChecked
$('#myGrid').find('.slick-header-column:first-child').find('input').prop('checked', !currentlyChecked).trigger('click');
The following fiddle demonstrates this with buttons for each of the methods for selecting items.
http://jsfiddle.net/z83fjth4/
Related
I have used a bootstrap DataTable to show data. At the same time i have a HTML checkbox as a column of that dataTable. I have a submit button to get the selected checkbox's value to do some stuff. I am fetching the following problem while select checkboxes under searching.
When i select all checkboxes and Click Save button I got all the values. It works as my expectation.
But Unexpected occures when i search via built-in search box of bootstrap dataTable.Here is the pictorial view
In this case when i press Save i got just the two value though all other values are still selected. How can i get all the selected values while searching
Here is my jquery code of Save button of getting the checkboxes value
$("#btnSave").click(function () {
var checkboxes = document.getElementsByName('foo');
var vals = "";
for (var i = 0, n = checkboxes.length; i < n; i++) {
if (checkboxes[i].checked) {
vals += "," + checkboxes[i].value;
}
}
....
//Other stuff
....
}
Please help me.
When you are doing a search, it is going to check only for the rows, that satisfy the given criteria. So your search logic works like this
if(searchCriteria==true)
{
showValue
}
Even if you had previously selected values it won't be showing all of them, because they don't satisfy the given criteria. Now in this case when you click on Save, it is taking only those rows in the datatable which are checked and satisfy the given criteria, as per your java script.
Now if you still wish, that all selected values should be taken in, there is one way you can try, put the selected values in some kind of List or Set, and place the list object in session. So everytime you click on Save, you can retrieve the List from the session. But I really don't see why you would want to do it, unless you need to retrieve the selected values every time.
I got my job done like this
var table = $('#tblReportList').dataTable();
When i was searching through dataTable, i was getting just the selected values matching the search criteria. But the previously selected values was disappeared. To get the previously selected value i used the following code...
table.$('input[type="checkbox"]').each(function () {
if (!$.contains(document, this)) {
if (this.checked) {
previousVal = previousVal + ',' + this.value;
}
}
});
Now, for getting the selected values of search I used the previous code posted before. And that was
var checkboxes = document.getElementsByName('foo');
var vals = "";
for (var i = 0, n = checkboxes.length; i < n; i++) {
if (checkboxes[i].checked) {
vals += "," + checkboxes[i].value;
}
}
So all selected checkbox's values are
var allValues=previousVal+vals;
I have code which generates markers on a Google map based on certain criteria. What I'm attempting to do is generate a list next to the map which would contain the address associated with each marker that appears on the list as well as a checkbox next to each address. At the bottom of this list would be a "refine" button which would return only the results which had their checkbox selected.
My question are:
How would I store the dynamically generated checkboxes and their respective address fields so that I could update and modify the selection with the refine button?
How would I (or should I) actually set each checkbox to run a function on onClick which would remove the marker from the map?
Create checkboxes on the fly inside a given div
var holder = document.getElementById('holdingDiv');
var newCheckbox = document.createElement('input');
newCheckbox.type = 'checkbox';
newCheckbox.id = 'holdingDiv_option' + someValueIdentifier;
holder.appendChild(newCheckbox);
To run through these checkboxes adding event handlers:
// modify this if not just a bunch of checkboxes in a div:
var checkboxes = holder.getElementsByTagName('input');
for(var i=0; i < checkboxes.length; ++i) {
var thisCheckBoxId = checkboxes[i].id;
// create a listener
var callback = function(event) {
myGeneralHandler(i, event);
}
if(checkboxes[i].addEventListener) {
checkboxes[i].addEventListener('click', callback, false);
} else { //IE
checkboxes[i].attachEvent('click', callback);
}
}
Then set up myGeneralHandler to handle clicks from any checkboxes.
I have a javascript function below- In fact i have a checkbox in a repeater and a gridview inside that which again has some set of checkboxes.
I want to enable disable the gridviewCheckboxes based on the repeater checkbox selection.
so i have registered a javacript on itemsRepeater_ItemDataBound. to capture the - Which checkbox of repeater -> (RepeaterCheckBoxId) and Which GridView(Grid) as below.
function EnableDisable(RepeaterCheckboxid, Grid)
{
var grid = document.getElementById(Grid);
if (grid == null)
return;
//variable to contain the cell of the grid
var cell;
if (grid.rows.length > 0) {
//loop starts from 1. rows[0] points to the header.
for (i = 1; i < grid.rows.length; i++) {
//get the reference of first column
cell = grid.rows[i].cells[1];
cell.childNodes[0].checked = document.getElementById(RepeaterCheckboxid).checked;//If repeater checkbox is Unchecked then gridview checkboxes should be unchecked.* This is not working.
cell.childNodes[0].disabled = !document.getElementById(RepeaterCheckboxid).checked; //If repeater checkbox is checked then gridViewCheckboxes are enabled and vice versa.This is working.
}
}
}
But i observed that enable disable is working fine but checked unchecked is not working.
How can i uncheck all the checkboxes in gridview if the repeater's checkbox is unchecked?
Please help me out if you guys have any idea.
Try using JQuery:
$.each($(grid).find("tr"),function(){
var chk = $(this).find("td:first").find(":checkbox");
chk.attr("checked",$("#"+RepeaterCheckboxid).attr("checked"));
chk.attr("disabled",!$("#"+RepeaterCheckboxid).attr("checked"));
});
Try like this :
cell = grid.rows[i].cells[1];
var checkedAttrib = document.createAttribute('checked');
checkedAttrib.value = document.getElementById(RepeaterCheckboxid).checked; // this will take the value from 'RepeaterCheckboxid'
cell.childNodes[0].setAttributeNode(checkedAttrib);
You may need to access gridview using its ClientID like:
$('#<%=GridView1.ClientID %>')
And to get all checkboxes in gridview you can use .find("input:checkbox") and the iterate through each checkbox :
<script type="text/javascript">
function CheckUnCheckAll(chk) {
$('#<%=GridView1.ClientID %>').find("input:checkbox").each(function () {
if (this != chk) {
this.checked = chk.checked;
}
});
}
</script>
Call CheckUnCheckAll(this) on header checkbox with its object.
Check example here: http://www.codegateway.com/2012/05/jquery-check-uncheck-all-checkboxes-in.html
I'm currently counting all the checked checkboxes in an asp.net gridview using:
$('#cphMain_gdvSalesOrder').delegate('input:checkbox', 'click', function() {
var count = $('#cphMain_gdvSalesOrder').find('input:checkbox:checked').length;
Whereas I need to count all the checkboxes that are checked apart from the one in the header.
Any ideas would be great, thanks
Korv
You can assign a "flag" CSS Class to the check-boxes in the grid which is not assigned to the check-box in the header. This way you can filter out the header check-box as part of your selector based on CSS Class.
:not(.headerCheckBox)
var count = 0;
var grid = document.getElementById("<%=grdProductImage.ClientID%>");
var chk = grid.getElementsByTagName("input");
for (var i = 0; i < chk.length; i++)
{
if (chk[i].checked && chk[i].id.indexOf("chkAll") == -1) {
count = count + 1;
}
}
We have checkboxes in two columns (they denote the same category, but different subscription)
We would like to limit the selection to 4. We have a jQuery code to disable the checkbox selection after the user selected 4.
But now we need to have the following logic:
Allow the user to choose both values from the same rows (aka: subscribe to both subscriptions from the same category) and do not count in the 4 limit we have if they have chosen more from the same row.
So if you look in the following screencast, we would like to be able to select the first checkbox (1st row).
The code we used was:
$("input:checkbox").click(function() {
var bol = $("input:checkbox:checked").length >= 4;
$("input:checkbox").not(":checked").attr("disabled",bol);
});
A jsFiddle has been created to reflect the current state of work:
http://jsfiddle.net/fFbLx/
Feel free to name the classes, inputs as you wish.
I think you would have to "categorise" them by the LI then. So count the LI's with an checked box - disable all others if more than 4 active.
See: http://jsfiddle.net/fFbLx/4/ (maybe give the UL's a class, so you can use the selector on that)
$("input:checkbox").click(function() {
var counter = 0;
$('li').each( function() {
if($(this).find("input:checkbox:checked").length)
{
$(this).addClass('active');
counter++;
} else {
$(this).removeClass('active');
}
});
var bol = counter >= 4;
$('li').not('.active').find("input:checkbox").not(":checked").attr("disabled",bol);
});
If you wrap your checkboxes in an element you can then use the jquery has selector filter to check how many have selected checkboxes:
$("input:checkbox").click(function() {
var bol = $(".myCheckboxWrapper:has(input:checkbox:checked)").length >= 4;
$("input:checkbox").not(":checked").attr("disabled",bol);
});
Try this http://jsfiddle.net/fFbLx/2/
$("input:checkbox").click(function() {
$(this).parent().find("input:checkbox:first").toggleClass("active");
var bol = $("input:checkbox:checked").length >= 4;
$("input:checkbox").not(":checked,.active").attr("disabled",bol);
});