Datatables: how to checkbox checked status change? - javascript

My table powered by datatable is 100% working now.
I am now trying to improved look&feel using a custom render function to use more beautiful checkbox.
Actually when I click on a row's checkbox, the row is selected, the counter of selected rows is updated and so on.
But I must 'react' to status change to update the visual side of my custom checkbox.
I tried to add a console.log() to render function and I discovered that it's executed only when doing the first draw with data returned from server, because I'm using ajax.
Is there a function, similar to render, called instead when checkbox value changes?
More precise indications:
Commonly, we have a TD with a INPUT[type=checkbox] as direct child
Now I have TD > DIV > INPUT[type=checkbox]
Commonly, when user check a checbox, the input receive the checked attribute, and browser draw it in the appropriate way based on checked or not status
Now I have no 'checked' attribute automatically set.
So I need to 'intercept' when datatable select the row and apply/remove the 'checked' attribute.
How can I achieve this?

assign function to checkbox when onchange the save the values
$("#table").on('draw.dt', function() {
// call the function of your saved values do the code
}

Related

React Table - useRowSelect change select all default behavior

I am using the selection hook in my react table and I can't find a way to override the select all checkbox behavior.
When the select all checkbox is checked if you uncheck a specific row in the table it turns the isAllRowsSelected to false.
I want it to change only if the header checkbox is clicked, because I want to be able to have a state that says "all results, except the unmarked ones".
I am using server side pagination so I can't rely only on the selectedRowIds array.
This is the implementation of useRowSelect I used : here
You can add this line, it trigers on component mount.
React.useEffect(()=> {toggleAllRowsSelected()},[])
All code like this: codesandbox

AG-GRID-ANGULAR - How to check/uncheck checkbox in header component if all checkboxes in the cell renderers are checked/unchecked?

I am using ag-grid. I have a checkbox in the header using headerComponentFramework for a column (here, isBooked) and checkboxes in corresponding cells of the same column using cellRendererFramework.
My requirement is to check/uncheck the header checkbox when all the cell checkboxes are checked/unchecked. And, all this activity keeps the state of data associated with the grid updated.
This is how the grid looks - https://angular-fcgbt9.stackblitz.io/
The situation is replicated at this stackblitz link.
https://stackblitz.com/edit/angular-fcgbt9?embed=1&file=src/app/grid-header-checkbox/grid-header-checkbox.component.ts
Approaches that I tried are -
Using a Subject to emit value change. But, it looks the Subject is not getting subscribed to inside the agInit hook inside the header component.
Using gridApi.refreshHeader(). It looks like the Angular version of the header component interface (IHeaderAngularComp) does not have a refresh hook.
I am not able to update the value of the header checkbox when I run a logic for checking if all the cell checkboxes are checked/unchecked and try to update the value of the checkbox inside the header component.
You can use headerCheckboxSelection event along with onRowSelected event(this will update your data).
Here is a working code

How do you access the 'Select All' checkbox?

I've got it set up on my grid so that each individual checkbox selects the object present in that row, and that is working. However, when you click the 'Select All' checkbox that Kendo UI automatically provides when you add a columns.Select() to your grid, it only grabs the object present in the first row.
My initial thought was I could set up an event binding that tied back to the ID of that specific checkbox, but when I tried this, I realized the ID for that checkbox was being randomly generated every time, so this strategy wasn't going to work.
I can't use this.selectedKeyNames() as this doesn't refer to the right object in the current context.
Basically, I'm wondering if there's a better way of accessing that 'Select All' checkbox so I can throw some extra code in to grab every single object I have present in my grid.
You always have the possibility to select an element by it's tag and DOM tree, e.g.:
$('.k-grid input[type="checkbox"]').first()

Value is not binded to the drop down provider unless next row is clicked on the grid

I need to update a cell in a infragistics web data grid which has a drop down provider as soon as exiting that cell.
The problem is the value is not getting binded to the drop down provider unless the user clicks on the next row.
I've tried the Exiting edit mode event for this,but it's of no use.
Can anyone help me on this please?
The main point of having drop down editor provider is to bind it to cell key value and based on the key value to show a corresponding text value. If on cell exit you set a value (e.g. "Some custom value text") which is not present in the listed drop down item values, then 0 (zero) will be shown and nothing is going to be set.
You can handle CellEditing ExitedEditMode event, and from there to change the cell text or value with the helper methods (set_text and set_value).
<script type="text/javascript" id="igClientScript1">
function exitingEditMode(sender, e) {
e.getCell().set_text("My Value");
}
</script>
It is important to remember that the cell value should be related to the dropdown's list of values in order to display the correct text representation of the item, unless you are using UnboundDataField, then there wont be any problems to set cell value/text on ExitEditMode client event.

Asp.net Grid View Check boxes to Text box

I got a minor problem. I am displaying data from a database table in a .aspx page in the form of a grid view.
The first column is check boxes for each individual row and a header check box to implement the check all and uncheck all functionality which I already did using javascriptC. The purpose is general purpose...i.e. each check box represents the row which it is present in.
The problem is as I check the check boxes- either some or all or none....the sum of the values in the selected rows should be displayed dynamically in a text box in the same page below.
Please tell me how to implement this functionality. Just a basic hint or syntax is sufficient. I will do the details myself.
Please tell me the functionality for a simple grid view with two columns- one check box and the other being some values. so I want to display the sum of selected values into a text box in the same page below. This is the problem in simple words.
Thanks in advance for the help.
Concept
Calculate method
create first a method that will iterate over all the items in the grid view, and it will verify if the column is checked, if the column is checked then you add the value to the result variable. At the end of the iteration you update the value of the textbox/label or whatever will display the calculated value
Event
then you will have to use the onCheckChange of the checkboxes or on click to call the "calculate method"
Code
to loop in the grid: Looping through GridView rows and Checking Checkbox Control

Categories

Resources