I have a GridPanel with a CheckColumn. I need to disable the entire row if the checkbox is unchecked when data loads, preventing data modification entirely. I tried using the getRowClass method in the viewConfig as follows:
viewConfig: {
getRowClass: function (record, rowIndex, rowPrms, ds) {
//If the Sign-Off checkbox is unchecked, disable entire row.
if (record.get('signOff') == 0) return 'disabled-row';
}
}
This does not work. Any pointers?
To reflect your change. you need to include one config which is disableSelection : true in the grid.
I discovered that the checkColumn does not have a checkBox object in it. It only plays with various images of checkboxes checked/unchecked using css. I created my own disabled versions of checkbox images, added some custom css, and loaded them conditionally in the renderer of the checkColumn.Prototype. Problem solved!
Related
I am trying to style rows of an ExtJS grid with ExtJs v5.1.0 and I am wondering if it is possible to style a row and have that style remain bound to the <tr> element or the record even when I scroll away and scroll back to my row.
An easier way to say it: scrolling away from a styled row removes the custom styles of that row. is there anyway to prevent this? possibly a BufferedStore session? Thank you in advance.
Don't directly style your rows. Instead, configure your grid's view to have a custom getRowClass method.
Ext.create('grid', {
viewConfig: {
getRowClass: function(record, rowIndex, rowParams, store){
return record.get("valid") ? "row-valid" : "row-error";
}
}
})
You would have to keep book about the state of your columns somewhere. I already answered a similar question about checkbox column state with paging, you would have to do similarly for your row styles, and possibly also save/restore state in the beforeprefetch and prefetch events.
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 am using Kendo UI grid for AngularJS. The scenario is; I have expanded one master row which contains another grid in its detail template. When I insert new item in the detail template grid, the master row automatically collapsed. what I want is when I making changes to detail template grid than there must be no affect on master row(I mean should not be collapsed). any help will be appreciated.
I know the question is old but I have faced the same scenario and come up with this, when you rebind/refresh grid by any mean, the grid get re rendered and thus you got collapse your row. apparently this behavior is of kendo ui. the only thing you can do is take that expanded row id and then rebind grid, after rebind expand that row again
Try adding a dataBinding function to the grid to cancel the default action on the item Change event.
Example Below:
$("#grid").kendoGrid({
navigatable: true,
sortable: true,
dataBinding: function (e) {
if (e.action == "itemchange") {
e.preventDefault();
}
},
});
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;
}
}
Why does CheckboxModel deselect all selected rows on page change when using paging toolbar? How do I stop the deselection of rows on page change?
I see there is a pruneRemoved which can be used to prevent the pruning of nodes, I set it to false, but the deselect is still fired. Not sure what else to try.
I'm assuming checkboxmodel registers with the store or maybe pagingtoolbar to be notified when the store changes...then deselects everything? Why? I need to prevent that.
Edit:
The reason I don't want the deselectAll to be fired is; I attach a handler on select and deselect. Select adds rows to another grid, deselect removes them. So when the user checks a checkbox that row is added to another grid, when they uncheck it it is removed from that grid. By the grid firing a deselectAll, when the store changes, I lose all my saved rows in the other grid.
I'm not sure if this is the correct way to do this but it's working for me.
What I did was create my own Ext.grid.View. I extended ext.view.Table and over-road the onMaskBeforeShow method. This is the method that was calling deselect all on the grids selection model. As you can see I commented it out here
Ext.define('Ext.grid.SteveView', {
extend: 'Ext.view.Table',
alias: 'widget.stevegridview',
onMaskBeforeShow: function(){
var me = this,
loadingHeight = me.loadingHeight;
//me.getSelectionModel().deselectAll();
me.all.clear();
if (loadingHeight && loadingHeight > me.getHeight()) {
me.hasLoadingHeight = true;
me.oldMinHeight = me.minHeight;
me.minHeight = loadingHeight;
me.updateLayout();
}
}
});
Include the above script, then when you create a grid, change the viewType to stevegridview, or whatever you decide to name it
{
xtype: 'grid',
viewType:'stevegridview',
store:'some store'
...
}
The new view type will be used a the new onMaskBeforeShow() will be called.