Here is my static form group:
this.quoteForm = fb.group({
"senderAddress" : new FormControl(this.senderFormattedAddress, this.senderValiator ),
"receiverAddress": new FormControl("", Validators.required )
});
In future, I am trying to add some more form control by dynamic, but not works:
here is my code :
for (let label in this.mandate) {
this.quoteForm = this.fb.group({
this.mandate[label]: new FormControl()
})
this.mandate[label] = true; //*ngIf show the add field element
}
above not work by adding the new form control. but input field alone visible, how to add new FormControl?
Related
I want to make a field disabled from ts file.
it is working fine when I true/false statically. but I want to make it logically. when my form in edit mode I will make the fields editable. when the form in view mode will disable the fields.
It looks like you're using the disabled attribute with a reactive form
directive. If you set disabled to true
when you set up this control in your component class, the disabled attribute will actually be set in the DOM for
you. We recommend using this approach to avoid 'changed after checked' errors.
Example:
form = new FormGroup({
first: new FormControl({value: 'Nancy', disabled: true}, Validators.required),
last: new FormControl('Drew', Validators.required)
});
Logic when i change the mode
editProspectDetails() {
this.editProspectMode = !this.editProspectMode;
this.isProspectDisabled();
}
FormControl Name:
this.fb.group({
prospect_pref_name: new FormControl({value: '', disabled: this.isProspectDisabled()}),
})
isProspectDisabled(){
return true; // working
but i want to make it conditionally
console.log(this.editProspectMode); // it will return : true/ false
return this.editProspectMode;
}
You can simply use disable() to disable field
try this
this.fb.group({
prospect_pref_name: new FormControl(''),
}
and in your editProspectDetails()
editProspectDetails() {
this.editProspectMode = !this.editProspectMode;
this.your_form_name.controls.prospect_pref_name.disable();
}
I am working on dojo enhanced grid view. I am able to display the grid in UI. But AnyColumn option is added as new column.
Example:
Any help will be appreciated...
Here is the Code
var mygrid = new EnhancedGrid({
id: "grid",
store: gridStore, //Data store passed as input
structure: gridStructure, //Column structure passed as input
autoHeight: true,
autoWidth: true,
initialWidth: width,
canSort : true,
plugins: {
filter: {
//Filter operation
isServerSide: true,
disabledConditions : {"anycolumn" : ["equal","less","lessEqual","larger","largerEqual","contains","startsWith","endsWith","equalTo","notContains","notEqualTo","notStartsWith","notEndsWith"]},
setupFilterQuery: function(commands, request){
if(commands.filter && commands.enable){
//filter operation
}
}
}
}, dojo.byId("mydatagrid"));
mygrid.startup();
Thanks,
Lishanth
First, do not use EnhancedGrid, instead use either dgrid or gridx.
I think by default anycolumn is added to the dropdown. If you want to remove then, I would suggest to
Register for click event on the filter definition
Iterate through the drop-down and remove the first entry which is anyColumn
or you can also try something like
dojo.forEach(this.yourgrid.pluginMgr.getPlugin('filter').filterDefDialog._cboxes, function(dropdownbox) {
dropdownbox._colSelect.removeOption(dropdownbox.options[0]);
});
Updated answer is. I know this is not the elegant way of doing it but it works.
//reason why I'm showing the dialog is that _cboxes of the filter are empty initially.
dijit.byId('grid').plugin('filter').filterDefDialog.showDialog();
dojo.forEach(dijit.byId('grid').pluginMgr.getPlugin('filter').filterDefDialog._cboxes, function(dropdownbox) {
var theSelect = dropdownbox._colSelect;
theSelect.removeOption(theSelect.options[0]);
});
//Closing the dialog after removing Any Column
dijit.byId('grid').plugin('filter').filterDefDialog.closeDialog();
i'm new to Dojo.
I have a "FullEditable" grid, with many columns, and one of them is a widget, it's a ToggleButton. This grid is used to show details of a purchase, so every line represents a product sold. When i click a button inside one of the columns it launches the product (dialog) browser and then the data of that product is passed to the grid. After some work i managed to display the button and being able to set it's label accordingly to the row.data.FIELD value received from that dialog.
But now i am editing that purchase and i need to be able to do the same, to be able to load the data from the preloaded array with data ("detalle") (as it's label) into the togglebutton, but nothing seems to work, not even the direct assignment of the widget or the row data or anything.
Here's a fragment of my code:
var grid = this;
var selectedRow = grid.row(i);
var cell = grid.cell(selectedRow, 'Moneda');
selectedRow.Moneda = detalle.MonedaItem; //didn't work
if(cell.row !== null && cell.row !== undefined && cell.row.data !== null && cell.row.data !== undefined)
cell.row.data.Moneda = detalle.MonedaItem; //didn't work
if(cell.element !== null && cell.element !== undefined){
cell.element.innerText = detalle.MonedaItem; //didn't work
cell.element.textContent = detalle.MonedaItem; //didn't work
if(detalle.MonedaItem === 'UF')
cell.element.widget.set('checked', true);
if(detalle.MonedaItem === 'CLP')
cell.element.widget.set('checked', false);
cell.element.widget.set('label', detalle.MonedaItem); //didn't work
cell.element.widget.set('value', detalle.MonedaItem); //didn't work
}
}
Whenever i set the value through the change event with "cell.element.widget.set('checked', boolean);" i get an error message from the editor, when it tries to get a cell but the variable is null, so it crashes.
The values of "label" and "value" of the widget, row.data en cell are perfectly set, BUT the grid DISPLAYS the "emptyValue" value of the widget and not the one that is actually set.
AFAIK, best way to change the grid data is to update the store/ collection that is associated with the grid and just invoke grid.refresh(). The new data will be loaded automatically.
The statement cell.row.data.Moneda = detalle.MonedaItem is actually changing the data in your store. Just refresh the grid after this and you are done!
Never try to set something in grid DOM element directly. Always work with store, renderCell and renderColumn. This will ensure consistency in store and grid attributes that reference the store.
I finally managed to get what i need through renderCell like this:
,{
id: 'Moneda',
field: 'Moneda',
label: "Moneda",
renderCell: function (object, value, node, options) {
try {
var button = new ToggleButton({
node: node,
isWidgetInGrid: true,
parameterName: 'codigoMoneda',
label: object.Moneda,
showLabel: true,
onChange: function(newValue){
var grid = this.getParent();
var row = grid.row(this.node);
var data = row.data;
if(this.get('label') === 'CLP')
{
data.Moneda = 'UF';
this.set('label','UF');
this.set('value', 'UF');
}
else
{
data.Moneda = 'CLP';
this.set('label','CLP');
this.set('value', 'CLP');
}
grid.getParent().getParent()._calcularTotales();
}
});
node.appendChild(button.domNode);
}
catch (ex) {
Debug.log(this.declaredClass, arguments, ex);
}
},
emptyValue: 'CLP',
autoSave: true
}
I'm using mvc approach and extending the pandora example.
I would like to add a new record to a form. I need to pre-assign some properties. I have the following handler. Which fills out the form. However when i try and sync it does not post the new info. ie using fire bug i see that it post the records that were previously there. At what stage should i add it to the store.
onNewPartSelect: function (selModel, selection) {
var form = Ext.getCmp('partForm');
form.getForm().reset();
var part = new Pandora.model.Part({
Name: 'my new record'
});
form.loadRecord(part);
},
For loading a new record into the form:
var iUserForm = this.getUserDetailsForm(),
iRecord = Ext.create('BS.model.User');
iUserForm.loadRecord( iRecord );
And upon submit:
var iUserForm = this.getUserDetailsForm();
if (iUserForm.getForm().isValid())
{
var iRecord = iUserForm.getForm().getRecord(),
iValues = iUserForm.getForm().getValues(),
iRecord.set( iValues );
this.getUsersStore().insert(0, iRecord);
}
I am using extjs4 to create a gird which can be editable by the "Ext.grid.plugin.CellEditing" plugin.
When the user click the "Add" button. It will add a new row to the store for user input. But after the insertion, first row of the grid will be selected automatically. So the cell editor lose the focus everytime.
Related code below:
var cellEditing = Ext.create('Ext.grid.plugin.CellEditing');
// part options for grid
selType: 'cellmodel',
selModel: Ext.create('Ext.selection.CheckboxModel', { checkOnly: true }),
plugins: [cellEditing],
// Add new record
var r = Ext.ModelManager.create({
id: '',
name: '',
label: '',
description: ''
}, 'Privilege');
pstore.insert(0, r);
cellEditing.startEditByPosition({
row: 0,
column: 1
});
i try, won't lose focus of input text.
but my code is
var r = Ext.create('PlcModel', {
//eqNo:Ext.create('Ext.grid.RowNumberer'),
slavePos:'aa:bb:cc:dd:ee:ff',
eqdesc: 'Mostly Shady',
eqmanu: 'TL-PA201',
onlineSt: false,signal:0,
bandwidLimit:512,
hardwareversion:'V.93.344.0',
enabled:false,vlanid:105
});
var curStore=Ext.data.StoreManager.lookup('PLCTeams');
var len= curStore.count();
curStore.insert(len+1, r);
cellEditing.startEditByPosition({row: len, column: 1});
CheckboxModel choose but focus input also exist, you can input
pls not email me, since my login info input wrong for secret
my extjs4 version is 4.0.7