I would like to check all of the checkbox made by Ext.grid.CheckColumn in a gridpanel,
may I know if there is any easy way to do this?
I have try to add class to the checkbox(Ext.grid.CheckColumn) but it seem not work.
Thanks very much!
If you're rendering a store field as a checbox column, you have to set that field to true for all the records in the store.
store.each(function(rec){ rec.set('field', true) })
Never try to change a grid cell's value directly, always change it via the store's corresponding record.
Update: if you have many records, use something like this:
store.suspendEvents(); // avoid view update after each row
store.each(function(rec){ rec.set('field', true) })
store.resumeEvents();
grid.getView().refresh();
Ext.grid.CheckboxSelectionModel provides a selectAll() method, if this is what you're looking for.
http://dev.sencha.com/deploy/dev/docs/?class=Ext.grid.CheckboxSelectionModel
Can you show us some codes? I presume CheckColumn is something that you created?
<script language="javascript" type="text/javascript">
var SelectAll = function (value) {
Store1.data.each(function (record) {
record.set('IsSelected', value);
});
};
</script>
<ext:Button ID="btnSelectAll" runat="server" Text="Select All" >
<Listeners>
<Click Handler="SelectAll(true);" />
</Listeners>
</ext:Button>
NB: Store1 is the name of the store and IsSelected is the field name as specified in the JsonReader reader
Related
i try to get the the value of number row selected, and print it in HTML using Angularjs, but no issue,
i have the count only when i clic in the grid column header.
The value of " selectedRowsCounter " is 0 in html, when i dosn't clic in the grid header
my code is like
var activeButtons = function() {
var countRowsSelected = $scope.gridOptions.api.getSelectedRows().length;
$scope.selectedRowsCounter = countRowsSelected;
console.log($scope.selectedRowsCounter);
$rootScope.count.selectedRows = countRowsSelected;
};
$scope.gridOptions = {
rowData: null,
angularCompileRows: true,
onSelectionChanged: activeButtons,
}
there is a screenshot
i have open the same subject here
https://github.com/ceolter/ag-grid/issues/1023
i have added this line to activeButtons function and it work fine
$scope.gridOptions.api.refreshView();
i dont knew if there is a good solution, but that work for now
The problem seems to be with Angular being unaware of the $scope property change because ag-grid does not tell Angular that it has modified something in the $scope. Although it is difficult to tell if you don't show your view.
You can use onSelectionChanged the way you are using it to know how many rows have been selected, but you need to tell Angular that something has changed in its $scope by applying it.
Something like this:
var activeButtons = function() {
var countRowsSelected = $scope.gridOptions.api.getSelectedRows().length;
$scope.selectedRowsCounter = countRowsSelected;
console.log($scope.selectedRowsCounter);
$rootScope.count.selectedRows = countRowsSelected;
window.setTimeout(function() {
this.$scope.$apply();
});
};
That way you can apply the $scope and the html view will reflect the changes.
I have a list of items coming in from an API and they won't always be the same, so the number of items in the array is always changing. I'm creating a checkbox for each item.
The user has the ability to check/uncheck each item. Here's what I want to do:
When an item is checked, it will push the ID of that item into an array
When an item is unchecked, it will remove the ID of that item from the array
I just need to know how I call something based on whether it was checked or unchecked. I've tried a "checked.delegate" and a "checked.trigger" and I can't seem to get that to work.
Just a regular click.delegate won't work because I can't keep state on whether it's true or false and I can't set variables for all of them because I don't always know which items are going to be coming in from the API. Any suggestions?
Try change.delegate or change.trigger like this:
VM method:
logchange(value) {
console.log(value);
}
View:
<input type="checkbox" change.delegate="logchange($event.target.checked)" />
There is (since when?) official documentation of how to solve exactly this specific problem cleanly: https://aurelia.io/docs/binding/checkboxes#array-of-numbers
No need to handle events!
Aurelia can bind directly to your array and handle everything for you - all you need to do is tell Aurelia what property of the elements you are repeating over to store in the array (the id).
The gist of it:
app.js
export class App {
products = [
{ id: 0, name: 'Motherboard' },
{ id: 1, name: 'CPU' },
{ id: 2, name: 'Memory' },
];
selectedProductIds = [];
}
app.html
<template>
<form>
<h4>Products</h4>
<label repeat.for="product of products">
<input type="checkbox" model.bind="product.id" checked.bind="selectedProductIds">
${product.id} - ${product.name}
</label>
<br>
Selected product IDs: ${selectedProductIds}
</form>
</template>
No other code is needed.
One way you can do this is with the help of a setter. Let's say you have a checkbox like this:
<input type="checkbox">
Create a private field in your View Model and then wrap it with a getter and a setter:
get isChecked(){
return this._isChecked;
}
set isChecked(value){
this._isChecked = value;
//enter your extra logic here, no need for an event handler
}
private _isChecked: boolean;
Then bind isChecked to the view:
<input type="checkbox" checked.bind="isChecked">
Every time the checkbox is checked or unchecked the setter will be called and you can call any method you want from within the setter.
Another more unconventional way to achieve this is by using the #bindable decorator like this:
#bindable isChecked: boolean;
It's unconventional because you probably don't want isChecked to be bindable but the decorator gives you access to the isCheckedChanged method:
isCheckedChanged(newValue, oldValue){
//Logic here
}
And of course there is the change event which you can catch with change.trigger and change.delegate but that has already been mentioned in another answer
I work with extjs 3.4
I have a problem when I try to assign defaut value in combobox
this is my code :
<form:combobox property="from_tr"
displayField="fullname" valueField="id"
allowBlank="true" editable="true" forceSelection="true"
pageSize="10" hideTrigger="true" width="400"
fields="address" lang="<%=lang%>"
tpl='<tpl for="."><div class="x-combo-list-item"><b>{fullname}</b><br>{address}</div></tpl>'
dataStore="com.testStore" autoLoad="false" />
in onready function I make this code :
Ext.onReady(function() {
Ext.QuickTips.init();
var idAdr='AB-20';
var store = from_tr_myPage.getStore();
store.load({
callback: function() {
from_tr_myPage.setValue(idAdr);
}
});
});
but after test I have this value AB-20 in combobox
in the combobox I want to show the fullname
I try without success to render and reload the combobox
First of all, if you try to html with extjs component, it will unnecessary
complex. Why don't you use the combobox component which sencha is providing.
I suggest to use inbuilt component as much as possible.
Try something like that:
var index = store.find("id", idAdr);
var recordSelected = store.getAt(index);
from_tr_myPage.setValue(recordSelected.get('fullname'));
Hope this helps.
I'm using a kendo grid and have a checkbox column with the following template:
"<input class='gridCheckbox' id='gridCheckbox_#=name#' name='Selected' type='checkbox' ng-model='dataItem.checked'/>"
In addition I'm also using an observableArray as the grid's dataSource.
When clicking the chekcbox the data in the observableArray is changed as expected but no "change" event is triggered.
Here is how I define the observableArray:
var obsArray = new kendo.data.ObservableArray(scope.gridData);
this.gridDataSource = new kendo.data.DataSource({
data: obsArray
});
obsArray.bind("change", function (e) {
console.log(e.action, e.field);
});
"scope.gridData" is the original dataModel. When I click the checkbox the observableArray is changed but not the "scope.gridData". In order to change the "scope.gridData" I want to listen to the "change" event and change the "scope.gridData" manually but as I said the "change" event is not triggered.
Any suggestions to what am I doing wrong and maybe there is a better solution.
Read This
your issue is that kendo uses a copy of your scope object
I manually added an event to my input checkbox (in our class we're using Angular so it was on ng-click="doSomething()" but maybe yours is just click="doSomething" and recorded handling the boolean change manually.
We have the Kendo Observables, too - but I got **lucky because we're also using the Breeze JS stuff where we can do data detection and refresh the grid once the data propagates backwards to the right place to be set to dirty. ( grid.dataSource.read(); )
If you want the full row value, make the click="doSomething(this)" and then capture it as the Sender. Just debug in and you should the dataItem attached to the Sender.
This might help you & this is not the correct figure but i did one example like this similar to your problem
var contentData = [
{ organization: 'Nihilent', os: 'Window' }
];
var nihl = contentData[0];
var viewModel = kendo.observable({
gridSource: new kendo.contentData.DataSource({
contentData: contentData
})
});
kendo.bind($(document.body), viewModel);
contentData.push({ organization: 'Dhuaan', os: 'Android' });
nihl.set('os', 'iOS');
I am binding ExtJs Gridpanel from database and add "Delete" button below my gridpanel. By using the delete button handler, I have deleted selected record on gridpanel. But, after deleting, the grid does not refresh (it is deleted from database but shows on grid because of no refresh).
How can I refresh grid after delete handler ?
Try refreshing the view:
Ext.getCmp('yourGridId').getView().refresh();
reload the ds to refresh grid.
ds.reload();
grid.store = store;
store.load({ params: { start: 0, limit: 20} });
grid.getView().refresh();
I had a similiar problem. All I needed to do was type store.load(); in the delete handler. There was no need to subsequently type grid.getView().refresh();.
Instead of all this you can also type store.remove(record) in the delete handler; - this ensures that the deleted record no longer shows on the grid.
try this grid.getView().refresh();
It's better to use store.remove than model.destroy.
Click handler for that button may looks like this:
destroy: function(button) {
var grid = button.up('grid');
var store = grid.getStore();
var selected = grid.getSelectionModel().getSelection();
if (selected && selected.length==1) {
store.remove(selected);
}
}
grid.getStore().reload({
callback: function(){
grid.getView().refresh();
}
});
Combination of Dasha's and MMT solutions:
Ext.getCmp('yourGridId').getView().ds.reload();
Another approach in 3.4 (don't know if this is proper Ext): You can have a delete handler like this, assuming every row has a 'delete' button.
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
var id = rec.get('id');
// some DELETE/GET ajax callback here...
// pass in 'id' var or some key
// inside success
grid.getStore().removeAt(rowIndex);
}
Refresh Grid Store
Ext.getCmp('GridId').getStore().reload();
This will reload the grid store and get new data.