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
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();
}
}
Team,
I am having one problem where I donot want to expand combo box on certain flag and want to display the alert message.
there is no event like onClick in EXTJS so I tried with focus event but still combo box is expanding.
code
focus:function() {
if(this.store.baseParams.donotExpandFlag) {
alert("I should not expand this combo");
// What to do here and out side of IF block so that there is conditional expansion
}
}
You need to specifiy your ExtJS version and please format your code.
Here is what you can do for ExtJS4.x
Manually set/unset the isExpanded property. That should work (untested)
for ExtJS3.x you will have to override the the isExpanded() method and in additon apply a custom flag which indicates blocked/auto and get checked before the default code gets executed.
You may try this (untested)
_isExpanded: true, // true means block, false auto
isExpanded: function(){
return this._isExpanded || (this.list && this.list.isVisible());
},
No, this works. See the JSFiddle for ExtJS3.4
Second JSFiddle for ExtJS3.4 with a form
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.
my grid allowing to select multiple row selection that is once i click on cell and press shift+arrow down button it allows me to select next set of records i wanted to disable this functionality how it can be done,on grid level how to catch keypress events and return false once shift+arrow down button is pressed
For ExtJS 3.x add this to the grid properties:
selModel: new Ext.grid.rowSelectionModel({singleSelect:true})
Grids behave as you want by default. Make sure you have NOT set multiSelect or simpleSelect to true.
Firstly, it's hard to understand your question without any punctuation. Secondly, without any code example, it's even harder to understand a question without any punctuations.
Here's my guess answer of your question:
editorgridpanel.on('keypress', function (e) {
if (e.shiftKey === true && e.getKey() === e.DOWN) {
e.stopEvent(); //this will stop the shift+down keypress event from proceeding.
}
});
The accepted answer seems to be a bit out of date. For version ExtJS4.x use this solution :
selModel: new Ext.selection.Model({mode: 'SINGLE'})
Or just use this :
selModel: {mode: 'SINGLE'}