I am trying to make a one-lined "Mobile number" form with country code dropdown attached on the left part of it, like shown on the image ->:
image link
Sorry if this is another redundant question, I really couldn't find any answer for it. Will appreciate any reply, big thanks in advance and have a good day.
use the prefix property inside the TextField decoration:
TextField(
decoration: InputDecoration(
prefix: // put you widget here
),
),
Related
Is there a way to define a custom header template for a dynamic dialog?
For the normal dialog you have the possibility to define the p-header tag, with your custom html code.
But I don't find any way to do this for a dynamic dialog.
There is no official way mentioned in PrimeNG documents to add custom template to DynamicDialog header. When we open a DynamicDialog, we only attach a body of Dialogbox and not header/footer.
You can add dynamic title to DynamicDialog while opening it. Hope this will help.
const ref = this.dialogService.open(DialogComponent, {
data: this.data,
header: this.title,
width: '60%'
});
You can modify css of DynamicDialog header like:
::ng-deep .p-dialog .p-dialog-header {
border-bottom: 1px solid #000;
}
Important Note:
You can use simple Dialog in PrimeNG where you can create custom headers,body & Footers. It will work same like DynamicDialog. Do mention modal=true like below:
<p-dialog [(visible)]="display" [modal]="true">
<p-header>
Header content here
</p-header>
Content
<p-footer>
//buttons
</p-footer>
The answer is a little bit late. But maybe someone else is also searching for a workaround. Afaik it is still not possible since this issue on GitHub is still open.
However in documentation to DynamicDialog there is mentioned, that you can not show the header with the parameter showHeader. This means you could easily just hide the default header and in the component for your dialog design your own header.
I need to add a custom error message to cell when it is in editable mode, basically i just need to add message to the editable html template as follow
<a href=\'#\' data-toggle=\'tooltip\' data-placement=\'top\' title=\'error!\' ng-show=\'!inputForm.$valid\'>errMsg - {{customMsg}}</a>
i have just bind the customMsg to the global scope just for testing purposes , but still it doesnt seems to be appearing. sample plunker added here, it would be a great help if you can tell me what i am doing wrong here
Thanks
You might want to take a look at this answer
https://stackoverflow.com/a/28127498/1585304
When you are working with the ui-grid, you are actually working in an isolated scope.
This means that you cannot access to the parent scope simply by type the name of the var into your html.
In order to access to your customMsg variable, you need to refer to the parent scope using grid.appScope.
Your column definition should look more like this.
{
field: 'company',
displayName: 'Company',
enableColumnMenu: false,
editableCellTemplate: "<div><form name=\"inputForm\">
<input type=\"INPUT_TYPE\" ng-class=\"'colt' + col.uid\"
ui-grid-editor ng-model=\"MODEL_COL_FIELD\" minlength=3
maxlength=10 required><a href=\'#\' data-toggle=\'tooltip\'
data-placement=\'top\' title=\'error!\'
ng-show=\'!inputForm.$valid\'>errMsg - {{grid.appScope.customMsg}}
</a></form></div>"
}
The only problem is that is really hard to see the message since the form is almost completely hidden by the row.
Hope this helps.
I won't show treegrid icon each node.
I tried using:
1. "iconCls" config, with 'void' value.
2. Using a 'wrong' value.
Finally, I have the same that I expected, 'defaults icons' for all rows.
Someone know any form to delete these icons ?
thanks for all.
Just make sure you give an iconCls of, say treenode-no-icon. I do so in my model:
{name: 'iconCls', type: 'string', defaultValue: 'treenode-no-icon'},
Then in your css include:
.treenode-no-icon
{
display : none !important;
}
This was a few years ago, but here is a solution using ExtJS 6 that I discovered.
Using a custom theme, in the theme file associated with Ext.tree.View, I added the line:
$tree-icon-width : 0px;
My treepanel data now displays without any visible icons.
Which have the means to derive a description of the field (such as text, combobox) of the table in front of the text input field?
Appearance that was:
ie a question mark next to the field - it points to a question mark - shows information on the field. When the mouse is a query to the database from there from a particular table to get a description of the field.
How best to implement it?
http://jsfiddle.net/akat/UgLN4/
(You will have to use an appropriate image and probably style it so that it looks 'better')
A pretty ugly but easy way to do this is just to include the HTML for the icon in the description.
new Ext.FormPanel({
height: 100,
renderTo: Ext.getBody(),
items: [{
xtype: 'textfield',
fieldLabel: 'Status <img src="./questionmark.png" title="User status" />'
}]
})
It might be more elegant to look at writing a plugin for Ext.form.Field .
I am using extjs textfield in one of the grids in a webpage. This is how i have created the textfield
{
xtype: 'textfield',
id: 'logicrelation',
allowBlank: true
}
I want to clear this textfield in one of the handlers. I tried clearing it like this, Ext.get('logicrelation').setValue(""); but I get a message in the console that the setValue function is not available. I tried reset function also and that did not help either. Appreciate your help
Thanks,
Sandeep
Ext.get returns Ext.Elements.
You are looking for Ext.getCmp.