How to add checkboxes with possibility to choose all in datatable jQuery - javascript

I work wit library datatables, and i want to add in table row check box for some actions, i add checkboxes to the table,and one check box in table header for choose all boxes.
Script:
$('#checkAll').click(function () {
$(':checkbox.checkbox-mark').prop('checked', this.checked);
});
In jsfiddle you can see more.
But problem is, i have pages, and in case if i tap on header checkbox, it's choose only all boxes in curent page, but i want in the all pages, how i can solve this?

like you discussed already you can use service/api to set selectAll values but if you want to it using front end then you can use DataTable().cells().nodes(); to get all the nodes and iterate through them and set the checkbox value to each node.
// update your checkAll logic like this
$('#checkAll').click(function() {
var allPagesData = $("#test1").DataTable().cells().nodes(); // this will give you all data in datatable.
$(allPagesData).find('input[type="checkbox"]').prop('checked', this.checked);
});
check out this fiddle

Related

Hide or Collapse a single specific row in ag-grid using Javascript

After a lot of search in SO without any particular solution, I am compelled to ask this question.
In Simple words - I want to collapse or hide a specific row using Javascript in ag-grid. I have tried several methods explained in ag-grid documentation and also in SO, but none has worked till now.
All the following methods have been tried and none of the codes worked.
Let rowNode = gridOptions.api.getRowNode(params.value);
Method #1. params.api.getDisplayedRowAtIndex(2).setExpanded(false);
Method #2. params.api.getRowNode(params.value).setExpanded(false);
Method #3. gridOptions.api.setRowNodeExpanded(rowNode,false);
Method #4. gridOptions.api.getRowNode(rowId).style.visibility = "collapse";
I have also tried using plain CSS, like this - Data has disappeared but the white blank row is visible
rowNode.setDataValue('class', 'hidden'); //Where “class” is a field
const gridOptions = {
//Other grid options...
getRowClass: params => {
if (params.data.class === "hidden") {
return 'hidden';
}
},
https://stackblitz.com/edit/js-nvtqhz?file=infoCellRenderer.js
setExpand / setRowNode Expanded only works on collapsible rows, i.e it will collapse an expanded row. it will not hide it.
I edited your stackblitz,
I made a couple of changes to make it work.
Selectable Rows
So, when you click a row, I'm marking it as selected. There is a property on ag-grid rowSelection: 'single' | 'multiple. If you want to hide only one row at a time, use 'single' if you can hide multiple rows use 'multiple'
External filtering
So, ag grid can filters rows if we provide a criteria.It can be a check on any of data property as well. For your problem, I have added a filter that says if any row is selected, remove it from the grid.
Following are the changes
/// method called on clicking the button
function hideRow(params) {
let rowNode = gridOptions.api.getRowNode(params.value); // get the clicked row
rowNode.setSelected(true); //mark as selected
gridOptions.api.onFilterChanged(); // trigger filter change
}
Triggering the filter change will call this method for each row
function doesExternalFilterPass(node) {
return !node.selected; // if row node is selected dont show it on grid.
}
You can access the rows hidden any time using
gridOptions.api.getSelectedRows() //Returns an array of data from the selected rows. OR
gridOptions.api.getSelectedNodes() //Returns an array of the selected nodes.
And, if you want to show a row again, just filter from this above mentioned method and do these steps
rowNode.setSelected(false); //mark as unselected
gridOptions.api.onFilterChanged(); // trigger filter change
This will automatically show the row on grid.
Hope this helps! :)

jQuery DataTables: check all checkboxes on page load

I have a grid which is based on jQuery DataTables Checkboxes. It pretty much looks like the basic example that gyrocode have on their webpage
Does anyone know if I can have all checkboxes checked when the table first loads please (including the master checkbox, the one at the top that checks/unchecks all with a single click)
I tried $("input.dt-checkboxes").prop("checked", true); but that checks only the entries that are currently shown on the datatable's page
you can use cells.checkboxes.select(), filter the cells but, but we actually return true for all rows here, a working fiddle:
...
'initComplete': function(settings){
var api = this.api();
api.cells(
api.rows(function(idx, data, node){
return true;
}).indexes(),
0
).checkboxes.select();
},
...

How do I hide all the checkboxes in jQgrid?

I need to hide all the checkboxes on a jQgrid and after read this two posts:
Remove the heading checkbox from jqgrid
jqGrid multiselect "check all" in header: how to hide it?
This is what I did:
// this only hides the first checkbox on the header
$('#gbox_grid_notification_queue').find('input[type="checkbox"]').hide();
// this does not hide anything at all
$('#gbox_grid_notification_queue').find('td input[type="checkbox"]').hide();
// this does not hide anything, same as previous one
var grid_notification_queue = $("#grid_notification_queue");
$("#cb_" + grid_notification_queue.id).hide();
What I am missing here?
If you use free jqGrid fork, then the solution would be very easy. You need just add
multiselectPosition: "none"
option to prevent creating checkboxs. It improves additionally the performance of multi-selection. I remind that here you can find different options of free jqGrid, which has relation with selection. The value of multiselectPosition could be "left", "right" or "none".
You can use this code
$("input[type=checkbox]").each(function() {
$(this).hide();
});
Try this:
$('#gbox_grid_notification_queue').find('input[type="checkbox"]').each(function(){
$(this).hide();
});

Sencha ExtJS 4.2: how can I synchronize two combo editors in a grid?

I need to edit two columns of my grid using combos as editors, and I need the values shown in the second to be filtered accordingly to the value selected in the first one.
There is also the problem that I need to show the "bound" value (i.e. "description") instead of the Id, in the grid cell.
I prepared a (very simplified) fiddle to show the problem here
Click here for the fiddle
Looking at the fiddle, I'd need to select the brand in the first combo and then a model in the second, but I should obviously find only the models from the selected brand in there.
How can I show the descriptive text in the cell?
How can I filter the second combo?
Thanks
The editing plugin has an beforeedit event you can use, for example:
listeners: {
beforeedit: function(editor, context) {
var record = context.record;
if (context.field !== 'modelId') {
return;
}
models.clearFilter(true);
models.filter({
property: 'brandId',
value: record.getId()
});
}
}
Working example: https://fiddle.sencha.com/#fiddle/12hn

function with radiobuttons groups

Welcome
I have a problem. I'm trying to build a javascript function that will retrieve me from the selected radiobutton value to div dynamically, after page loads. On the side I have several groups radiobutton. The function is to check which radiobutton is selected, regardless of which group it is and return the value to a div. Additionally, I would like that everyone is not selected range value has been added to the same div.
function returnRadio(){
return $('div :radio:checked'); // you can use class or id to your div
}
returnRadio();
To assign the first selected radiobutton to a div, you coud do this:
$("#your_div").text( $(":radio:checked:first").val() );
As you have many radio button groups, you could have many selected radios at a time. To retrieve them all, you can do this:
$(":radio:checked").each(function(){
alert($(this).val());
});
Hope this helps. Cheers

Categories