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;
}
}
Related
I have a grid with windegColumns. And it all works right.
But if you manually hide the Num column, the tagfild widget does not work correctly. New values are not set, old values are not deleted. Unsaved values are reset.
In my application, I need to dynamically hide or show the column containing the widget at the click of a button. But when I do this, my Tagfield breaks
My fiddle: https://fiddle.sencha.com/#view/editor&fiddle/3db6
Just hide the Num column in the table and try to change the Tegfield value and you will see
Any idea why this is happening and how to fix it?
It looks like there might be a bug with using the dataIndex instead of bind. Per the docs, you get a record property for each row for free, and if it doesn't work, you may have to explicitly set a rowViewModel. I would recommend using binding here regardless:
xtype: 'widgetcolumn',
cellWrap: true,
text: 'Phone',
// Notice I took out the dataIndex here
flex: 1,
widget: {
xtype: 'tagfield',
// Added bind
bind: {
value: '{record.phone}'
},
// rest of code
After removing the dataIndex from your tagfield column, the selecting of new values or removing or retaining after hiding the column works properly. A similar fiddle was available where the dataIndex was not provided. Still, not sure why it behaves like this. It probably does not store the selected values anywhere and reloads the widget store. Tried the same with combobox but it just resets the fields and still allows selecting of values after we hide the column.
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 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!
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.