I have a following grid defined in my View
<div class="gridStyle hide" ng-grid="resultsOptions" id="resultsGrid"></div>
And I want to allow multiSelect only if a ctrl key is pressed. So I define multiSelect attribute as false in the Controller.
$scope.resultsOptions = {
data: 'searchData',
selectedItems: $scope.mySelections,
multiSelect: false,
enableHighlighting: true,
enableRowSelection: true
};
In the same controller I have the following code that sets multiSelect to true.
$("#resultsGrid").keydown(function (e) {
if (e.ctrlKey) {
$scope.resultsOptions.multiSelect = true;
$scope.$apply();
}
});
When I launch the application multiSelect value changes after pressing ctrl. But I am still can not make a multiple selection.
I tried to use variable for multiSelect, but it doe not change a thing.
The following example also does not change multiSelect attribute. But it changes the grid header.
http://plnkr.co/edit/RwYSG4?p=preview
Is there any simple solution? Or what do I miss in my code?
The approved "hacky" answer wasn't clean enough for us so we built a slightly more robust version relying on the event parameter on beforeSelectionChange instead of doing nasty key bindings.
This also works for any grid you add this event callback to as it does not need to reference any specific custom CSS classes or IDs, but just uses reliable ng-grid classes.
beforeSelectionChange: function(rowItem, event){
if(!event.ctrlKey && !event.shiftKey && $scope.multiSelect &&
!$(event.srcElement).is(".ngSelectionCheckbox"))
{
angular.forEach($scope.myData, function(data, index){
$scope.gridOptions.selectRow(index, false);
});
}
return true;
}
What this does is simply checking if we are doing a multiselect operation (holding ctrl key, shift key or using the multiselect checkbox), if yes, let multiselect happen.
If the user is just clicking anywhere else on a row, and multiselect is active we remove any current selection so just the one target row will be selected afterwards.
Since it is impossible to change some grid options on the fly
(https://github.com/angular-ui/ng-grid/issues/386). I decided to manually deselect every element if ctrl is not pressed in beforeSelectionChange attribute of the grid.
The solution is durty, but it works.
Based of mabi's comment...
Without support for Shift key
With support for Shift key
Related
A checkbox in ExtJs Form Panel is not binding properly , i.e when the value is changed from checked(value is 1) to unchecked (value is 0) the value in model for the respective field is still checked(1). This issue occurs in version 6.2.0.981, but the issue is not reproducible in latest version 6.2.1.167. Here is the fiddle for the same, toggle between the versions and check the issue. please let us know if there are any workaround for this issue in 6.2.0.981 version. Also in release notes of 6.2.1.167 its told that "EXTJS-21886 - Checkboxes don't return the correct value" is fixed, but how to have this fix in previous versions?
CheckBox Bind issue Fiddle
You can fix this by adding
uncheckedValue: 0
to your checkbox config. Excerpt from the docs:
By default this is undefined, which results in nothing being submitted for the checkbox field when the form is submitted
The bug was that nothing was submitted during model update as well, and since nothing was provided, the value of the model was not updated.
In ExtJS 6.6 I was still trying to figure this out and it wasn't as straight forward as I'd hoped (Having the checkbox bind to the model and pass 1 for true and 0 for false to the binding). I wanted to avoid having a formula with a middle man binding in the model because I'd have to have a formula for every checkbox and that seemed silly.. Extending the combo box class and overriding getValue method like below. The accepted answer worked ok for unchecked but I was still getting true on checked.
Ext.define('Components.BinaryCheckBox', {
extend: 'Ext.form.field.Checkbox',
xtype: 'binary-checkbox',
getValue: function () {
if (this.value) {
return 1;
} else {
return 0;
}
},
});
I'm using the Ext.form.field.Tag component. I have configured
createNewOnEnter:true,
createNewOnBlur:true,
forceSelection:true
but if I type in a value that's not the in the dropdown list/store records and tab-out or click enter the value gets selected. I want the value to be selected on enter/blur ONLY if it exists in the dropdown. But when createNewOnEnter and createNewOnBlur are set to true, forceSelection becomes false. I verified this by setting a debugger in the "change" event handler.
I dont have a fiddle but you can copy paste the above config into the live editor in the API Docs here
thanks
There are some configurations that are incompatible with each other, and ExtJS does not provide for all thinkable configurations of components (although they try, but then, Tagfield is quite new). This is the relevant part of the form/field/Tag.js file that explains your experience:
if (me.createNewOnEnter || me.createNewOnBlur) {
me.forceSelection = false;
}
To get what you want, you would have to override some parts of the tag field definition to suit your needs. You should look into overriding the assertValue and the onKeyUp functions.
I am using angular ui.grid my problem is when I using like below click the row its selected
enableRowSelection: true,
enableRowHeaderSelection: false,
multiSelect: false
after i changed to
enableRowSelection: true,
enableRowHeaderSelection: true,
multiSelect: false
now only select checkbox working but did not work click row please help...
this issue has supposedly long been fixed (https://github.com/angular-ui/ui-grid/commit/679b615bd19ff71ff1e835d7f6066e7a919f279a), but it still persisted for me in angular-ui-grid version 3.1.1
There's a fresh issue about it (https://github.com/angular-ui/ui-grid/issues/5474) with a workaround to override a css rule with this one:
.ui-grid-cell.ui-grid-disable-selection.ui-grid-row-header-cell {
pointer-events: auto;
}
See this issue: https://github.com/angular-ui/ng-grid/issues/2254
Currently both row header selection and row selection do not work in concert. I believe the former was intended as a work-around having row selection when cell navigation was being used.
The change is listed as an enhancement so it's on the roadmap, just not slated for the 3.0 release.
Update:
OK, here's how you can do it (though relying on an unreleased beta module for something that's "urgent" is not a great idea, IMO).
Take the code from the selection feature's uiGridCell directive, rip it out, and put it into your own module. Specifically this code here: https://github.com/angular-ui/ng-grid/blob/v3.0.0-rc.20/src/features/selection/js/selection.js#L757
Here's some unfinied example code. You'll want to make sure that you don't bind on row header cells or the checkbox selection won't work.
angular.module('ui.grid.custom.rowSelection', ['ui.grid'])
.directive('uiGridCell', function ($timeout, uiGridSelectionService) {
if ($scope.col.isRowHeader) {
return;
}
registerRowSelectionEvents();
function selectCells(evt) { ... }
function touchStart(evt) { ... }
function touchEnd(evt) { ... }
function registerRowSelectionEvents() { ... }
});
And lastly here's a plunker that demonstrates the whole thing. You can just copy this code and tweak it as you like: http://plnkr.co/edit/44SYdj19pDDaJWiSaPBt?p=preview
I have an extjs combobox used for auto-complete having following configuration:
xtype:'combo',
displayField: 'name',
valueField:'id',
store: storeVar,
queryMode: 'remote',
minChars:2,
hideTrigger:true,
forceSelection:true,
typeAhead:true
There are two issues being faced by me:
a. If a user chooses a value from the list returned from server, but later wants to remove that value and keep combo-box empty, then also the old values re-appears on blur, not allowing combo-box to remain empty. How can I allow empty value in this combo-box in such a case? I understand it could be due to forceSelection:true, but then I need to keep it true as otherwise user can type any random value.
b. When the server returns an empty list, I want to display a message - No Values Found. I tried doing this, by putting this value in the displayField entity, i.e., {id:'', name:'No Value Found'}. But then in this case, the user is able to choose this value and send it to server which is not what is expected. Thus, how can I display the message for empty list?
Could someone please throw light on this?
For the issue related to forceSelection in the question above, following is the hack created which can serve the expected purpose:
Ext.override(Ext.form.field.ComboBox,{
assertValue: function() {
var me = this,
value = me.getRawValue(),
rec;
if (me.multiSelect) {
// For multiselect, check that the current displayed value matches the current
// selection, if it does not then revert to the most recent selection.
if (value !== me.getDisplayValue()) {
me.setValue(me.lastSelection);
}
} else {
// For single-select, match the displayed value to a record and select it,
// if it does not match a record then revert to the most recent selection.
rec = me.findRecordByDisplay(value);
if (rec) {
me.select(rec);
} else {
if(!value){
me.setValue('');
}else{
me.setValue(me.lastSelection);
}
}
}
me.collapse();
}
});
This needs to be included after library files of extjs have been included.
For the other issue of message to be shown at No Values Found - emptyText - works fine as suggested by Varun.
Hope this helps somone looking for something similar.
I've done this for Ext JS 3.3.1. I don't know if they apply to Ext JS 4, though I guess they should.
For the first problem, set autoSelect : false. autoSelect is by default set to true. This will work only if allowBlank : true is set. From the docs
true to select the first result gathered by the data store (defaults
to true). A false value would require a manual selection from the
dropdown list to set the components value unless the value of
(typeAheadDelay) were true.
For the second problem, use listEmptyText. From the docs
The empty text to display in the data view if no items are found.
(defaults to '')
Cheers.
Suppose I know which row index to target (with this.rowToBeDeleted having a value of 2, say), how can I hide this row only from the grid but not the store (I have a flag in the store, which signifies what rows should be deleted from the db later in my PHP webservice code).
You can either use one of the store.filter() methods or you can hide the row element.
grid.getView().getRow(rowIndex).style.display = 'none';
I think it's much better though to just remove the record from the store and let the store update the view since you are deleting the record and not just hiding it. With the store in batch mode (the default: batch: true, restful: false), it will remember which rows you've removed and won't fire a request to the server until you call store.save().
I suggest using store.FilterBy() and pass a function to test the value of the value in rowToBedeleted:
store.filterBy(function(record) {
return record.get("rowToBeDeleted") != 2;
});
I wrote a basic blogpost about gridfiltering a while ago, you can read it here: http://aboutfrontend.com/extjs/extjs-grid-filter/
In ExtJS 4.1, there is no view.getRow(..). Instead you can use:
this.view.addRowCls(index, 'hidden');
to hide the row at the specified index, and
this.view.removeRowCls(index, 'hidden');
to show it (where 'this' is the grid).
CSS class hidden is defined as
.hidden,
{
display: none;
}
This is useful for peculiar scenarious where store.filterBy() is not appropriate.
In the grid js file write following code to apply a CSS to those rows which you want to hide.
<pre><code>
Ext.define('MyGrid',{
extend : 'Ext.grid.Panel',
xtype : ''mygrid',
viewConfig : {
getRowClass : function(record,id){
if(record.get('rowToBeDeleted') == 2){
return 'hide-row';
}
}
},
.................
.................
});
</code></pre>
Now define a custom CSS in custom.css file:
.hide-row{display:none}
This will hide rows in grid without removing or filtering from store.
You can use the store.filter() or store.filterBy() methods for that.
Set a "hidden" property on your records and the filter all records that have hidden set to true for example. This way they'll still be present in the store but not visible in the grid.