I'm trying to add to my grid the RowExpander plugin.
Seems everything was going great with just one row, but when adding a second row the following rows are indented.
I have created a Sencha Fiddle: https://fiddle.sencha.com/#fiddle/87d
I'm doing it exactly as Sencha Examples, maybe because I have a datetime column first I get that issue.
Any help is welcome.
You can't specify your component widget.dailytimesummary and then only add a plugin to it when you instantiate it or it won't get initialized as desired.
Instead, your plugin should be a part of the initial definition of your widget:
See your corrected jsfiddle here: https://fiddle.sencha.com/#fiddle/87m
...
enableColumnHide: false,
enableColumnMove: false,
// this needs to be configured with the initial component
plugins: [{
ptype: 'rowexpander',
rowBodyTpl: ['{Date}']
}],
selModel: {
enableKeyNav: false
},
...
Related
Just as the title says, is there any way to change the text (or languaje) of the update and cancel buttons while editing a grid?
Thanks,
Edit:
I already changed the text inside RowEditor.js
saveBtnText: 'Update',
to
saveBtnText: 'Example',
but doesn't work
You can override the Ext.grid.RowEditor class like so:
Ext.define(null, {
override: 'Ext.grid.RowEditor',
saveBtnText: 'Salveaza',
cancelBtnText: 'Anuleaza'
});
Here is the working fiddle: https://fiddle.sencha.com/#view/editor&fiddle/27uj.
Assuming that you want to localize your entire application, you should take a looke at this guide from sencha. Basically, you just require the ext-locale package in your app.json
"requires": [
"ext-locale"
]
After this, you should set the locale param (also in app.json) to the desired language:
"locale": "es"
Doing this, you will get all ExtJS components localized.
I want to add additional column to grid dynamically on table instantiation.
So, I've added process function to gridPanel with following section
var clmn = {
xtype: 'checkcolumn',
dataIndex: 'test,
editor: {
xtype: 'checkboxfield'
}
};
config.columns.push(clmn);
As you can see, rowediting plugin is used here too.
Actually column is added and displayed on screen. But it is not hold correct data that has been loaded, only defaultValue from model.
On row modification (when rowediting plugin is started) real data is displayed.
What is the issue here? May be there is some refresh method that should be used to refresh metadata or sth like this..
Please, take into consideration that i am working via Sencha Architect
columns.push() is not proper way to do this. So you should use reconfigure method which is mentioned here. If your store is already have fields for new columns you don't have to pass it again. Just get your current columns and add your new columns and reconfigure the grid.
edit for answer : Your problem easer than before. you can just pass your columns to it like below;
var yourGenericColumns = [
{text: 'First Name', dataIndex:'firstname'},
{text: 'Last Name', dataIndex:'lastname'}];
yourGenericColumns.push({text : 'Age', dataIndex: 'age'});
Ext.create('YourApp.YourCustomGrid',{
columns : yourGenericColumns
});
I am using angular ui.grid my problem is when I using like below click the row its selected
enableRowSelection: true,
enableRowHeaderSelection: false,
multiSelect: false
after i changed to
enableRowSelection: true,
enableRowHeaderSelection: true,
multiSelect: false
now only select checkbox working but did not work click row please help...
this issue has supposedly long been fixed (https://github.com/angular-ui/ui-grid/commit/679b615bd19ff71ff1e835d7f6066e7a919f279a), but it still persisted for me in angular-ui-grid version 3.1.1
There's a fresh issue about it (https://github.com/angular-ui/ui-grid/issues/5474) with a workaround to override a css rule with this one:
.ui-grid-cell.ui-grid-disable-selection.ui-grid-row-header-cell {
pointer-events: auto;
}
See this issue: https://github.com/angular-ui/ng-grid/issues/2254
Currently both row header selection and row selection do not work in concert. I believe the former was intended as a work-around having row selection when cell navigation was being used.
The change is listed as an enhancement so it's on the roadmap, just not slated for the 3.0 release.
Update:
OK, here's how you can do it (though relying on an unreleased beta module for something that's "urgent" is not a great idea, IMO).
Take the code from the selection feature's uiGridCell directive, rip it out, and put it into your own module. Specifically this code here: https://github.com/angular-ui/ng-grid/blob/v3.0.0-rc.20/src/features/selection/js/selection.js#L757
Here's some unfinied example code. You'll want to make sure that you don't bind on row header cells or the checkbox selection won't work.
angular.module('ui.grid.custom.rowSelection', ['ui.grid'])
.directive('uiGridCell', function ($timeout, uiGridSelectionService) {
if ($scope.col.isRowHeader) {
return;
}
registerRowSelectionEvents();
function selectCells(evt) { ... }
function touchStart(evt) { ... }
function touchEnd(evt) { ... }
function registerRowSelectionEvents() { ... }
});
And lastly here's a plunker that demonstrates the whole thing. You can just copy this code and tweak it as you like: http://plnkr.co/edit/44SYdj19pDDaJWiSaPBt?p=preview
I am trying to create an editable Grid in which there is a dateField which is editable. The cell will be shown as editable only if Cell is focussed
$scope.gridOptions = {
data: 'result',
enableCellSelection: true,
enableRowSelection: false,
enableCellEditOnFocus: true,
multiSelect: false,
columnDefs: [
{ field: 'name', displayName: 'Name', enableCellEdit: false, width: 60 },
{ field: 'age', displayName: 'Age', enableCellEdit: false, width: 60 },
{ field: 'sex', displayName: 'Sex', enableCellEdit: false, width: 90 },
{ field: 'dob', displayName: 'DOB', width: 150,
editableCellTemplate: '<input type="text" datepicker-popup="dd/MM/yyyy" is-open="true" ng-input="COL_FIELD" ng-model="COL_FIELD" datepicker-append-to-body=true />',
}
]
};
In the editableCellTemplate, if i am not using is-open="true", then pop up is not coming. If i am not using ng-input="COL_FIELD", focus is not getting removed from any cell. So, datepicker is not getting hidden .But if i am using both then, value is not getting selected. In the console the error says Expression 'true' used with directive 'datepickerPopup' is non-assignable!
There are a lot of questions on stackoverflow for this. I tried almost all, but no sucess.
What can be done? How can i remove the error? Please provide me with a working plunker. I am not able to create this issue with the plunker.
Edit
I think, i could not remove the error. The error is still the same
Expression 'true' used with directive 'datepickerPopup' is non-assignable!
How can i remove it? After removing it, i am sure it will work. I tried taking it as a scope variable, and referencing it, but value is not getting replaces as true in when i am checking it using Inspect element. If i am using it as a variable and concatenating the value in template like 'is-open="' + $scope.dateFormat.opened + '"' , still the same error is there.
Edit 2
What is this is-open used for? Somewhere i see its value equlas to true, somewhere just opened. In one of the example over here in Stackoverflow its just opened1 and opened2. What is this? And how to use this?
I have removed the error using bcombs technique
Edit 3
After further debugging, i found that, datePicker is getting opened (if i am using the method mentioned by bcombs)but, it is getting closed as soon as it is opening.
$scope.$on('ngGridEventStartCellEdit', function () {
debugger;
});
Edit 4
From more manipulation what i concluded is
If ng-input is used, then it breaks the 2 way binding. i.e If u change the date value textfield, then in the datePicker it will be reflected, but if you will try to change the value using datePicker, it will not be reflected in textField.
If you remove ng-input, this 2 way binding, remain correct, so it works, but this causes ngGridEventEndCellEdit event NOT fired. so, the focus is not getting lost. Value is getting selected, datePicker is getting closed (if instead enableCellEditOnFocus:true, i use enableCellEdit:true), but focus remains on the textField..
Need help. Hope the update helps in solving the issue
I'm no expert on bootstrap directives or their angular implementations... But to directly answer the question of how to remove the bug:
I'm fairly certain that the is-open attribute cannot be a primitive value. It needs to be a variable that will hold the (boolean) state of whether this particular widget is open. In my code, I use a single object to hold these flags for all my datepickers, such as:
openDatePickers: {}
Then, in the cellTemplate string, I give it a unique id such as:
' is-open="openDatePickers[\'dob_{{row.entity.name}}\']" '
(note that I'm using the "name" property to match your example, but a unique ID is preferred).
Edit in response to comment:
The celltemplate has access to its controller scope, so the simplest approach is to simply declare:
$scope.openDatePickers={};
As for how this works, it depends a little on which codebase you are using.
I'm using angular-ui, and in ui-bootstrap-tpls-0.8.0.js at line 1140 you can see where the directive manages the "is-open" attribute.
If the attribute is not supplied, the directive manages this flag internally with a closure, but behavior is different When the attribute IS supplied. The way the assignment works is straightforward in both cases: the variable (whether the internal closure, or the one you supplied in the attribute) is simply toggled between states.
Edit in response to your debugging
As far as the focus thing: I don't use ng-input or enableCellEditOnFocus. I do use:
enableCellSelection: true
...and our client didn't want manual edits of the field to be allowed, so my input element has:
ng-readonly="true"
This should be a functional workaround for your issue as long as your use case doesn't require that you allow manual edits to the input field.
https://fiddle.sencha.com/#fiddle/5do
items:[{
xtype:'timefield',
id:'time',
hideMode:'visibility'
},{
xtype:'checkbox',
labelText:'hide',
listeners:{
change:function(cmp,nv) {
console.log('Checkchange');
if(nv) Ext.getCmp("time").hide();
else Ext.getCmp("time").show();
}
}
}]
I'm using hideMode:'visibility' but TimeField does display:hidden.
Did I do error in code, or is this bug in ExtJS?
This is ExtJS.
The "hidden component is considered hidden so it won't participate in a layout, regardless of the hideMode".
This has been reported as a bug at least twice that I could find, but apparently the developers decided this is what they intended.
See this bug report for the details: hideMode: "visibility" not working for toolbar items?
See this also: BUG: hideMode=visibility does not work for hbox
If you still want to do it though, here is the workaround proposed in the first thread:
component.el.setStyle('visibility', 'hidden');