I have a requirement that, once i fetch data and bind it to UI grid, based on the cell data, i should enable/ disable cell selection. For cell navigation?
I am already set the cellNav option to my UI grid.
When i check the options, i see the below reference:
//Enables cell selection.
enableCellSelection: false, // no more in v3.0.+
but it is saying no more for v3.0+, but as of now, i am using 3.0+ version only.
I am looking for a code reference with a function instead of "false" option, and my function will check the cell data and put the option..?? any references?
I think you are looking for allowCellFocus:
{
name: 'FieldName',
allowCellFocus: false
}
I am not sure what you mean by based on the cell data. If you want to enable/disable only some cells in a given column, it would have to be something that is super custom, and would probably land in the realm of very hacky.
Related
I need to reset state of grid to the initial state. Some columns are set hidden/visible initially like that:
hidden: true / hidden: false
but i have also columns that are hidden via binding
bind: {
hidden: '{editMode.active}'
}
or completely without hidden property.
it's possible for user to show hidden columns via column picker. So it's pretty easy to reset first type of columns to previous state, as I can copy initial config and set hidden to initial state. But I can't do this with binding or columns without hidden property. I've tried with viewModel.notify() to make it to calculate once more, but It doesn't work. I've tried also grid.reconfigure() but as I have some custom columns, I'm getting exceptions when ext tries to reset grid. Is there a way to make ext to calculate this binding once more and override current state of column?
In case the columns hide/show state is stores in the data of ViewModel, the following code may be useful:
var grid = this.up('grid'),
viewModel = grid.getViewModel(),
newViewModel = Ext.create(Ext.getClassName(viewModel));
viewModel.setData(newViewModel.getData());
Fiddle: https://fiddle.sencha.com/#view/editor&fiddle/36tk
How do I get the grid cell value into modal by clicking on a cell inside Angular ui-grid?
I am using the UI-Grid plugin.
yes thanks for your response #Meir, i can't provide code because getting data into grid from back end without back end data we can't test , but finally got the solution using row.entity.columnvalue[coming from backend), by doing this i am getting value into template
$scope.gridOptions = {
columnDefs: [
{ name: 'username', cellTemplate: '<div class="ui-grid-cell-contents" ng-model="row.entity.username" ng-click="grid.appScope.showMe(row.entity.username)">{{row.entity.username}}</div>'}]
};
It depends if the cell is editable or not. If it is, listen to a beginCellEdit event, you should get the row and column in the event and you can get the actual value and open your modal.
If you prefer not to use and editable grid, use a cellTemplate with ng-click="..." that passes as a parameter the column name. Note that you might need to use appScope in your ng-click code.
If you put a more specific example, I might be able to narrow down the answer.
I have multiselect component in our application, we have 2 different views of the same form.
View 1 - All the components would be editable and selectable
View 2 - Whereas in this view, user can only see the selection that he made in View1(disable all the form components). Using the below code i disabled all the form components. But the problem here with the multiselect component, even though i disabled the editing capability from the user, still i want to allow them for scrolling through the list.
this.getView().query('form displayfield,textfield,radiogroup,multiselect').forEach(function(item) {
item.setDisabled(true);
});
I tried to the disable the Selection using the listConfig property, this works. But dynamically i couldn't able to apply this property.
{
xtype:'multiselect',
fieldLabel: 'Employee Names',
valueField: 'enameCode',
displayField: 'enameValue',
listConfig : {
disableSelection: true
}
}
How can i achieve this? Please provide your valuable inputs, thanks in advance.
Thanks!
Given that disableSelection: true works for you, you should be able to achieve the same effect dynamically by calling:
YourMultiselectComponent.boundList.getSelectionModel().setLocked(true)
You should be able to call the functions disable and enable on the BoundList associated with the multiselect to achieve this dynamically.
Like follows...
Ext.ComponentQuery.query('boundlist').forEach(function(item) {
item.disable();
});
EDIT:
So I just realised that this doesn't entirely solve your problem as scrolling will still be disabled after calling the disable function. This is because ExtJS applies a mask to the entire element (including the scrollbar) that is disabled to prevent user interaction.
One thing you could do is to modify the style (width in this case) of the mask DOM element. It may not be the most elegant solution but it would fix your problem.
Ext.ComponentQuery.query('boundlist').forEach(function(boundlist) {
boundlist.disable();
var boundlistDOM = boundlist.el.dom;
var maskDOM = boundlistDOM.getElementsByClassName('x-mask')[0];
mask.style.width = "94%"; // or value so that the mask does not cover scrollbar
});
I want to use the angularjs ui-grid and have one condition: It has to be possible to style a column filter menu.
In the documentation it is only explained how to add new items to a column menu but not how to change the design or add other controls. If we look at the example it should be possible for instance to open a column menu that can display two custom styled radio buttons (male, female) with two buttons two accept or decline the changes. If the changes are accepted, the filter should be applied.
Is it somehow possible to use templates for the column menu as it is possible for the columns header? How to create a custom column menu?
Thank you.
See plunker for solution.
Within your columnDefs you just need to add menuItems. I had trouble understanding from your question what exactly you wanted these additional dropdown options to do so I've modeled the general format for you in a very simple example where the first custom option does nothing but display in your menu and the second activates an alert containing the column name. Please let me know if this is (not) sufficient.
For a full list of supported attributes for menuItems see this tutorial.
columnDefs: [
{
field: 'name',
menuItems: [{
title: 'Custom Nothing'
}, {
title: 'Column Name',
action: function() {
alert(this.context.col.displayName);
}
}]
}
]
Came across what I think OP was looking for, definitely what I was looking for, via http://ui-grid.info/docs/#/api/ui.grid.class:GridOptions.columnDef#properties_headercellfilter
It's annoying you don't seem to be able to modify only the dropdown template, you have to override the entire header cell template, but at least you can do that on a per-col basis.
I have a grid of data in ExtJS 4 which contains a checkbox column. I need to disable the checkbox programmatically after the grid has loaded, following an external AJAX call. (Basically, after making the AJAX call, I need to stop users from changing the checkbox. This is not a store update). I do have a reference to the row itself.
I have seen several similar questions, but they all seem to deal with disabling a row or cell edit when the data is initially loaded.
If I understand you correctly you wan't to stop users editing your grid inline. In order to do this use the processEvent function on your grid and return false so any edit they try to make is immediately returned.
{
xtype: 'checkcolumn',
dataIndex: 'someModelReference',
// Prevents toggling the checkbox inline
processEvent: function() {
return false;
}
}