Here is the scenario:
1. Select all rows by checking the header row checkbox.
2. Unselect one row.
3. The header row checkbox is still checked which is invalid because not all rows are selected.
How can I unselect the hedaer row checkbox?
Thanks
You can use resetSelection method. Look at the example prepared for this and this question. The button "Clear Selection" use resetSelection method.
You can do the following:
var grid = $("#ID_OF_YOUR_GRID");
grid.jqGrid({
//other options
multiselect: true,
onSelectRow: function (rowid, status) {
var chkSelectAll = $("#ID_OF_THE_HEADER_CHECKBOX_USUALLY_CB_DATA");
if (chkSelectAll.length && chkSelectAll.is(':checked') && !status) {
chkSelectAll.removeAttr('checked');
}
}
});
BTW. You only need this on the older versions of JQGrid. I've checked in version 4.3.1 this works out of the box.
Related
I work with ag-grid and i found how to make a column disabled in the doc (https://www.ag-grid.com/documentation-main/documentation.php)
but after reading doc i never find how can i make juste one row disabled.
i have already try editable: params => params.data.active === true.
Maybe i didn't read right or that doesn't exist. Is someone here with some soluce track ?
TL;DR
There is no option in the library to make a single row disabled(both visually and keyboard event based), the only way we could make a single row disabled is by using a customCellRenderer for both header and subsequent cell checkboxes, this allows full control over the checkbox.
Besides this, there are three other ways where you can disable ag-grid checkbox based on value,
1)This is using checkBoxSelection param, it would empty the cell based on the condition.
checkboxSelection = function(params) {
if (params.data.yourProperty) {
return true;
}
return false;
}
This would only disabled click events and style it accordingly,
cellStyle: params => return params.data.status? {'pointer-events': 'none', opacity: '0.4' } : '';
3)This would disable it completely, as you have control over the input, but you may have to use string literals,
cellRenderer: (params) => {
if (params.value) {
return `<input type="checkbox" checked/>`;
}
else {
return `<input type="checkbox" />`;
}
}
You could use customCellRenderer(customCellRendererParams for props), headerCellRenderer(headerCellRendererParams for props) which accepts a complete JSX component.
I think this would be the most helpful, it allows you to choose the cellRenderer component based on the row value for that column. Its very well described in the ag-grid documentation.
I think ag-grid has single row checkbox disablement available natively: https://www.ag-grid.com/angular-data-grid/row-selection/#example-forcing-checkboxes-as-selected
I have a "select" column and I want to have the total of the current selected rows in the header name.
I am using headerValueGetter but the value is not refreshed when a new row is selected.
// in my colDef
headerValueGetter: params => `(${this.totalSelected})`
// methods
onSelectionChanged(event) {
this.totalSelected = event.api.getSelectedNodes().length
},
totalSelected is a property of my Vue component and its value is updated when a new row is selected.
Any ideas how to accomplish this ?
Try refreshing the header manually in your selectionChanged-event:
onSelectionChanged(event) {
this.totalSelected = event.api.getSelectedNodes().length;
gridOption.api.refreshHeader();
},
I am new to the jQuery dataTables plugin found on https://datatables.net/
I am trying to implement a custom filter for the table:
Basically, when I click a button, a custom filtering function will test the value of column #1 (numeric value) for all rows, and if the value in the column < 50 for a row, the row stays, otherwise the row is hidden.
The concept should be very simple, but I can't seem to find the right way to use the API:
column.filter() returns an array of column value
column.search() can only accept text data (not function)
What's the API that can achieve the effect?
Is there anything like the following?
var api = $('#table').DataTable();
api.column(1).data().somefilterfunction(function (val, ind) {
return parseFloat(val) < 50;
}).draw();
Have you seen this article in the documentation -> https://datatables.net/examples/plug-ins/range_filtering.html ??
You can create a custom filtering function on-the-fly, triggered by a button :
<button id="filter">filter < 50</button>
script :
$("#filter").click(function() {
$.fn.dataTable.ext.search.push(
function( settings, data, dataIndex ) {
return parseFloat(data[0])<50
? true
: false
}
);
table.draw();
$.fn.dataTable.ext.search.pop();
});
demo -> http://jsfiddle.net/dpwgqs2o/
Notice that the filter is created inside the click handler itself, and removed again as soon the table is drawn. This makes the filter temporary, i.e when the user click on a column header, the filter is cleared. If you want a permanent filter, make the filter global and do not remove it.
I am using slick grid to show JSON data.
On external button click i want highlight specific row based on column values.
Such as highlight row which have cost=75 and venue_id =87 and Impression=268
Got solution :
dataView.getItemMetadata = function (row) {
var item = dataView.getItem(row);
if (item["" + columnName+ ""] == colValue)
{
return { cssClasses: 'highlight' };
}
return null;
}
grid = new Slick.Grid("#myGrid", dataView, myColList, options);
The other suggested option seems to be have heavy load on my system, as my system have thousand of records and a particular row have to highlighted and suggested solution kind of refreshes the whole table. For some reasons it is not working for me.
I got around this by using Slickgrid's flashCell. Even no need of getItemMetadata()
var rowId=dataView.getRowById(idvalue);//id of the row to be highlighted, as slickgrid enforced an id field
grid.scrollRowToTop(rowId);//makes the row visible
grid.getColumns().forEach(function(col){//get all the columns
grid.flashCell(rowId, grid.getColumnIndex(col.id));//flash it
})
Hope this helps to coming to this page for the answer.
I have a store bound to a FilteringSelect component which fetches and populates the filteringselect successfully.
Later I delete some of the options dynamically from the underlying store by using deleteItem method as shown below:
scheduleTypeStore.fetch({query:{id: '*'}, onComplete: function (items) {
for(i = 0; i < items.length; i++){
var item = items[i];
scheduleTypeStore.deleteItem(item);
}
}});
scheduleTypeStore.save();
The drop down options are updated but the last selected option still stays even though it has been deleted. After delete operation, if user selected some another option then he is unable to see this earlier selected option.
Do I need to invoke some method on the FilteringSelect to show the placeholder text when the selected option has been deleted dynamically.
Ok I solved it using dijit.byId('myid').reset();