I created a ComboBox using dojo like below. How to set the max. number of characters allowed in the ComboBox so when max. reached user can't type any more?
var comboBox = new ComboBox({
id: "Person",
name: "Person",
store: personStore,
constraints: { maxlength: 40 },
searchAttr: "name"
});
You just have to add the constraint on root.
var comboBox1 = new ComboBox({
store: restStore,
searchAttr: "Name",
autocomplete: true,
placeholder: "Select your favorite song.",
maxlength:'5'
}, "comboBox1Placeholder");
Related
I have a grid that is filled with data from the server when the controller is being initialized and the grid allow batch editing and i have a custom delete command that will mark the dataItem as MarkedAsDeleted. My requirements is:-
If i update any row in the grid, the corresponding item in the angular dataSource didn't get updated. How to do this??
If the user click the custom delete command , i want to mark the item to be MarkAsDeleted but i want that item to be hidden from the grid but still exists in the data source.
I want to handle changes in the grid, so i can mark the corresponding item to be updated for example.
This is my code:-
var dataSource = new kendo.data.DataSource({
data: this.jobCategory.minorCategories,
batch: true,
schema: {
model: {
id: "id",
fields: {
id: { editable: false, nullable: true },
name: { type: "string", validation: { required: true, pattern: '.{3,200}' } },
notes: { type: "string" }
}
}
}
});
this.gridOptions = {
toolbar: [{ name: "create", text: "Add a new minor category" }],
dataSource: dataSource,
autoBind: true,
height: 300,
editable: true,
sortable: true,
columns: [
{
field: "name",
title: "Name"
}, {
field: "notes",
title: "Notes"
},
{
command: [
{
text: "",
template: '<span class="k-button-icontext" ng-click="vm.test(dataItem)">Delete</span>'
}
]
}
]
};
test(dataItem): void {
dataItem.markAsDeleted = true;
}
and this is my html
<div kendo-grid="minorCategoriesGrid" k-options="vm.gridOptions">
</div>
Bulk edit is currently not available for Kendo UI grid (Angular 2). I'm hoping that it will be available with the major release that has been announce for January 18th.
I have a form that has a field that gets populated by my store:
Ext.define('EcommBackoffice.store.TransactionProviderStatus', {
extend: 'Ext.data.Store',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'resources/data/providerstatus.json',
reader: {
type: 'json',
root: 'providerstatus'
}
},
fields: ['id', 'name']
});
My store contains a simple list of items:
{
providerstatus: [{
id: "EXPIRED",
name: "EXPIRED"
}, {
id: "ERROR",
name: "ERROR"
}, {
id: "FRAUD",
name: "FRAUD"
}, {
id: "PAID",
name: "PAID"
}, {
id: "UNCONFIRMED",
name: "UNCONFIRMED"
}]
}
Inside my form, the above store is then populated by a BoxSelect:
{
xtype: 'boxselect',
name: 'providerstatus',
fieldLabel: oMe.providerstatusField,
width: 468,
store: 'TransactionProviderStatus',
displayField: 'name',
valueField: 'id',
minChars: 2,
typeAhead: true
}
While this perfectly works, I also intend to add more items while the user types new values in it. Note that this BoxSelect is a multi-selection. Currently, when I type in random values on it, it simply clears it out.
How do I set up this particular field in such a way that I will be able to add more items, and include it as part of the data that will be passed on submit?
Did you try forceSelection:false for this boxselect.
When forceSelection is false, new records can be created by the user as they are typed. These records are not added to the combo's store. Multiple new values may be added by separating them with the delimiter, and can be further configured using the createNewOnEnter and createNewOnBlur configuration options.
Also check createNewOnEnter and createNewOnBlur
Create new on Enter for Box Select
I am trying to auto select radio button and combo box values of a form using JSON data. But, everything else (text boxes/ check boxes / data fields) is getting populated. I had no success auto selecting a value of the radio group or the combo box.
As suggested by Satya, here is the link to the jsfiddle. Clicking a row on the "movie database" populates the data in the "movie information form".
http://jsfiddle.net/9PVCN/5/
Thanks a lot in advance for help.
Here is the part of my form -
{
xtype:'radiogroup',
columns:1,
fieldLabel:'Filmed In',
name: 'filmed_in',
items:[{
name:'filmed_in',
boxLabel: 'Color',
inputValue: 'color'
},{
name:'filmed_in',
boxLabel: 'B&W',
inputValue: 'B&W'
}
]
},{
xtype: 'checkbox',
fieldLabel: 'Bad Movie',
name: 'bad_movie',
checked: true
},{
xtype: 'combo',
hiddenName: 'genre',
fieldLabel: 'Genre',
mode: 'local',
store: genres,
displayField:'url',
valueField:'name',
width: 250,
editable: false,
listeners: {select: comboSelect}
},
This is how the genres store is coded -
var genres = new Ext.data.JsonStore({
// store configs
storeId: 'genres',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'genres.data',
reader: {
type: 'json',
idProperty: 'name'
}
},
fields: ['name', 'url']
});
The url genres.data returns this -
[{"name":"1","url":"Comedy"},{"name":"2","url":"Drama"},{"name":"3","url":"Action"}]
This is the data I am trying to load into the form -
{
"id":"1",
"title":"Office Space",
"director":"Mike Judge",
"released":"02/27/1999",
"genre":"1",
"bad_movie": "1",
"filmed_in": "color",
"description": "Loved watching this ....."
}
For the radio button the expected value is different then your passing.
Instead of filmed_in: 'color' you'll need to pass filmed_in: { filmed_in: 'color' }.
You can override the setValue as sra mentioned so it will work with filmed_in: 'color':
setValue: function (value) {
if (!Ext.isObject(value)) {
var obj = new Object();
obj[this.name] = value;
value = obj;
}
Ext.form.RadioGroup.prototype.setValue.call(this, value);
}
For the combobox, just add name: 'genre'.
http://jsfiddle.net/9PVCN/9/
I am having trouble filtering an array store.
Situation
I have 2 comboboxes with an array store. combobox 1 and combobox 2, both are in mode 'local' and have a predefined array store. when i click and select a row in the first combobox, I apply a filter on the second combobox (which was not yet cliked upon). The thing is that the second combobox did not render it's data (or html) yet so the filter wasn't applied.
when i click on the second combobox, and then clicking on the first, the filter is applied and working.
my question is, how to pre-render an array_store/combobox?
I did try to expand the combobox first, but also didn't work for me. (see commented code)
var store1 = new Ext.data.ArrayStore({
fields: ['id','name'],
data:somedata //array of some data
});
var store2 = new Ext.data.ArrayStore({
fields: ['id','name'],
data:somedata //array of some data
});
var combobox1 = {
name: 'combobox_1',
xtype: 'combo',
hiddenName: 'combobox_1',
store: store1,
displayField:'name',
valueField:'id',
mode:'local',
triggerAction: 'all',
allowBlank:true,
emptyText:'Select...',
listeners:{
select: function(st, r){
var selected = r.get('name');
var combobox2 = Ext.getCmp('combobox2');
//combobox2.expand();
combobox2.store.filter([
{
property : 'name',
value : selected,
anyMatch : true,
caseSensitive: false
}
]);
},
scope:this
}
}
var combobox2 = {
name: 'combobox_2',
xtype: 'combo',
hiddenName: 'combobox_2',
store: store2,
id: 'combobox2'
displayField:'name',
valueField:'id',
mode:'local',
triggerAction: 'all',
allowBlank:true,
emptyText:'Select...',
}
Let me preface this by saying that I've been working with ExtJS for all of a week and half, so please pardon the noobishness.
I'm building a form inside of a tab panel, and I was testing different ways to lay out two comboboxes side by side instead of stacked on top of each other. My first attempt was with a fieldset, but I abandoned that for a container with a column layout.
Which led me to the following code:
Ext.onReady( function() {
var tabs = new Ext.TabPanel({
renderTo: 'myForm',
activeTab: 0,
autoHeight: true,
header: true,
title: "Test Title",
border: false,
defaults: {
height: 256,
tabCls: 'order-tab'
},
items: [
{
title: 'Tab 1',
contentEl: 'tab1',
}
]
});
// Account Dropdown
var accountField = new Ext.form.ComboBox({
fieldLabel: 'Account',
store: new Ext.data.ArrayStore({
id: 0,
fields: [
'accountId',
'displayText'
],
data: [[1, 'Account 1'], [2, 'Account 2']]
}),
displayField: 'displayText',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'Select an account',
selectOnFocus:true,
boxMaxWidth: 170
});
//Type dropdown
var accountTypeField = new Ext.form.ComboBox({
fieldLabel: 'Type',
store: new Ext.data.ArrayStore({
id: 1,
fields: [
'accountTypeId',
'displayText'
],
data: [[0, 'Type1'], [1, 'Type2']]
}),
displayField: 'displayText',
typeAhead: false,
editable: false,
mode: 'local',
triggerAction: 'all',
value: 'Type1',
selectOnFocus:true,
boxMaxWidth: 109
});
//Account info fieldset (account dropdown + type dropdown)
var accountInfo = new Ext.form.FieldSet({
defaults: {
anchor: '-20'
},
items :[
accountTypeField
]
});
//Account info (account dropdown + type dropdown)
var accountInfoGroup = new Ext.Container({
autoEl: 'div',
layout: 'column',
cls: 'account-info',
defaults: {
xtype: 'container',
autoEl: 'div',
columnWidth: 1,
anchor: '-20',
},
"items":[
{
"layout":"column",
"items":[
{
"columnWidth":0.6,
"layout":"form",
"labelWidth": 50,
"items":[
accountField
]
},
{
"columnWidth":0.4,
"layout":"form",
"labelWidth": 30,
"anchor":-20,
"items":[
accountTypeField
]
}
]
}
]
});
this.form= new Ext.FormPanel({
applyTo: 'tab1',
border:false,
defaults:{xtype:'textfield'},
items:[
accountInfoGroup,
]
});
});
This looked the way I wanted it to, so I started going back to clean up the unused fieldset code.
Which brings me to the goofy part. When I strip out this section:
//Account info fieldset (account dropdown + type dropdown)
var accountInfo = new Ext.form.FieldSet({
defaults: {
anchor: '-20'
},
items :[
accountTypeField
]
});
...the maxBoxWidth declaration on accountTypeField suddenly gets ignored and the layout goes all wonky. Just to be clear, there was more code in the fieldset snippet originally, but I could take all of it out and have the maxBoxWidth work fine UNTIL I tried to take out those two remaining pieces (defaults > anchor and items > accountTypeField).
So my question is, what is going on? Why does removing that fieldset affect the width of the combobox when it's not even being used? Is it a config issue?
I'm stumped and frustrated and looking for any help!
You are mixing properties for objects that you're not using... Try removing all the anchor properties. These only apply when you're using an anchor layout as your container. I would remove any absolute height and widths that you're setting for widgets and layouts. You can't mix columnWidth and width for instance when you're using a column layout. It's best to stay as consistent as possible with how you're handling widths for column and table layouts...
also: Use Ext.Panel instead of Container
//Account info (account dropdown + type dropdown)
var accountInfoGroup = new Ext.Panel({
autoEl: 'div',