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.
Related
What I have is I have an item selector with available users and assigned users as two different columns. On clicking any user in the available users and clicking a different menu option, the selected user from the available users columns is still displayed. How do I clear the selection upon clicking a different menu ?
Here's how the screen looks with the selection under a particular menu :
And here's the selection again after opting a different menu :
I tried, accessing the store and clearValue() and setValue('') which is not right solution and I was not able to access the selecitonModel to perform clearSelections() here.
How do I clear the selections upon clicking menu?
Would greatly appreciate your help, thanks a lot.
You can use the getSelectionModel().deselectAll() method of the "Users View" (that you want to clear the selection) within the listener select from the "Roles View". This will cause all user record selections to be removed when selecting a different menu. See docs: getSelectionModel, deselectAll.
Example:
{
xtype: 'dataview',
.
.
.
listeners: {
select: function(dataview, record, index, eOpts){
dataview.view.up('viewport').down('#usersView').getSelectionModel().deselectAll();
}
}
}
Within the listener, it performs the method to deselect all records from the target view.
These methods are commonly found in components that have the selection behavior, such as the grid.
See this fiddle: Deselect DataView Items.
store.removeAll();
is this what you are looking for
I have a grid with a checkbox selection model and tall cells due to custom html renderers. The problem is when any cell is clicked the grid jerks because the selected cell is scrolled into the focus.
Here is a fiddle with the problem, try scrolling the table manually halfway first and then clicking on the cells to see the grid jumping (it's not consistent, might need to try a few times): https://fiddle.sencha.com/#view/editor&fiddle/1vma
Is there a way to disable row focusing on click, or disable row selection on click if thats the root cause (so you would have to use checkboxes to select rows).
If your grid row contains text that needs to be editable/selectable you can use:
viewConfig: {
navigationModel: {}
}
I have found that returning false from the "beforecellmousedown" event listener function prevents the behavior you are trying to avoid.
listeners: {
beforecellmousedown: function () {
return false;
}
}
Here is the fiddle: https://fiddle.sencha.com/#view/editor&fiddle/1vq3
Suggested earlier answers work for Modern Toolkit only.
For Classic this code helps:
listeners: {
cellclick: function () {
this.blur();
}
}
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;
}
}
I am having a issues with a checkbox column in a grid.
I have a grid with multiple checkbox columns. When I check the box, the dirty tick is not there, however when I click on the cell that contains the checkbox, but not the check box and then click the checkbox, I get the dirty tick mark.
Has anyone see this before? I would like it to be a bit more consistent because after a few clicks the dirty marks for some rows disappear.
This just seems odd.
Thanks!
Indeed first you need to click on the cell to enter 'edit' mode and then you can check/unched the actual checkbox. For better user experience you can implement your checkboxes just the same way they are implemented in this code library article. (If you are not using ASP.NET MVC wrappers - no worries just open the project go under Views/Home/Index.cshtml and you can copy/paste the code - it is all JavaScript.
The code library also includes how to create checkboxe 'Select all' in the column header.
The way I solved it was to make the fields in the model to be non-editable, so it forces the click event to fire and then I just update the values and set the dirty property. The thing was if you clicked the cell, the edit event was fired vs the click and vice versa, so instead of having two things fire, I just disabled one. Some would call it a hack, but I can't see how else to prevent both events from firing.
Please try this one:
//Cell click Checkbox select
$('#grd' + gridName).on("click", "td", function (e) {
var selectedTd = $(e.target).closest("td");
var grdChkBox = selectedTd.parents('tr').find("td:first").find('input:checkbox');
grdChkBox.prop('checked', !grdChkBox.prop('checked'));
});
Yes, I see this quite often: depends on how you implemented the checkboxes. If you tick directly a checkbox you modify the input but not the model. If you tick the cell and then the checkbox then Kendo UI toggle to edit mode and (in background) it replaces the checkbox with an editable version of the checkbox that is managed (event handler) by Kendo UI that allows to modify the model.
EDIT: If you want your checkbox always clickable then you might do:
var grid = $("#stocks_tbl").kendoGrid({
dataSource: new kendo.data.DataSource({
...
schema: {
model: {
id : "id",
fields: {
active: { type: "boolean" }
}
}
}
}),
editable : "incell",
columns : [
{
field : "active",
title : "Active",
template: '<input type="checkbox" data-bind="source: active" #= active ? checked="checked" : ""# />'
},
...
]
}).data("kendoGrid");
Here, you define an input that is always clickable.
$(document).on("change", "[type='checkbox']", function(ev) {
var item = grid.dataItem($(this).closest("tr"));
item.set("active", ev.srcElement.checked);
});
with this, we define a handler for intercepting changes on the input and reflect them in the model.
This saves you having to play with editable
All I want to do is capture an event every time an item in a Grid using CheckBoxSelectionModel is either checked or unchecked. The checked/selected part is easy using the SelectionHandler. I'm not seeing anything that fires a deselection event in a multi-select mode though. I have a grid with 1000 items or so, and I let users multi-select items to track on a map. It's not giong to perform well to scan the entire model whenever a selection changes so I'm wondering how to handle this.
You are correct. SelectionHandler will only provide checked/selected status. I had a similar requirement and I solved it by overriding the onSelectChange() method of CheckBoxSelectionModel.
Here is the sample code for your reference.
IdentityValueProvider<VO> identity = new IdentityValueProvider<VO>();
CheckBoxSelectionModel<VO> sm = new CheckBoxSelectionModel<VO>(identity) {
protected void onSelectChange(VO model, boolean select) {
super.onSelectChange(model, select);
if (select) {
// Do something on select ...
} else {
// Do something on deselect ...
}
};
};
Hope this helps.