I have a bootstrapTable that is utilizing the x-editable plugin for dropdowns.
There is a method per the documentation to prepend values to a dropdown with a value of '' and text of Not Defined. This works just fine, except when another option in my dropdown has a value of 0. If that is the case, that value shows as the prepended value of Not Defined, when it should show as False.
My Code:
var data = [{"Bool": 1},{"Bool": 0}];
$('#table').bootstrapTable({
columns: [
{
field: 'Bool',
title: 'Bool',
editable: {
type: 'select',
'prepend': 'Not defined',
'source': [{'value': 1,
'text': 'True'},
{'value': 0,
'text': 'False'}]
}
}
],
data: data
});
http://jsfiddle.net/t6pg9yg9/2/
Related
I have two comboboxes. The first one is for selecting a region, and the second one is for selecting a province. The values that should appear in the province combobox will be based on the value selected in the region combobox.
Region combobox code:
xtype: 'combobox',
label: 'Region ID',
margin: '10 20',
flex: 1,
valueField: 'regionid',
displayField: 'regionname',
store: 'RegionStore',
minLength: 1,
id: 'region_id',
reference: 'region_id',
name: 'region_id',
listeners: {
select: function(combo, value) {
var id = Ext.getCmp('province'),
store = id.getStore();
if (!value) {
store.getFilters().removeAll();
}
else {
store.filter('regionid', val)
}
}
}
Province combobox code:
label: 'Province',
margin: '10 20',
flex: 1,
queryMode: 'remote',
store: 'ProvinceStore',
valueField: 'provinceid',
displayField: 'provincename',
minLength: 1,
id: 'province',
name: 'province',
reference: 'province'
I'm not getting any errors but when I click the province combobox(assuming that I have already selected a value for the region combobox), the values displayed in the province combobox are not filtered, instead, all of the results are displayed. I have been on this for days. Is there someone who can help?
You are using queryMode: 'remote', so that your server returns the data.
The frontend has no control, what is returned.
Plus in your example val should be value.
I would go with a chained store, that has a filter based on the selection.
Here is a fiddle to show this:
Fiddle
This is duplicate to your other question
I'm using vuejs#2.3.3, selectize#0.12.4, vue2-selectize.
I have a pretty big form with a few select inputs.
All options are loaded by ajax into a one property, which is initialized with a demo data before being replaced by ajax data:
addTrackData : {
styles : [
{ id: 1, title: 'style 1' },
{ id: 2, title: 'style 3' },
{ id: 3, title: 'style 2' },
],
authors: [
{inn: '111', name: 'demo 1'},
{inn: '222', name: 'demo 2'},
{inn: '333', name: 'demo 3'}
]
....
},
And I've got 2 problems:
1) If I use settings in this way, options doesn't loads at all:
<selectize v-model="form.data.authors[i]['id']" :settings="selectize.authors"></selectize>
selectize: {
authors: {
valueField: 'inn',
labelField: 'name',
searchField: ['name', 'inn'],
options: this.addTrackData.authors // that doesn't works, but hard coded array works
}
}
Because of error Error in data(): "TypeError: Cannot read property 'authors' of undefined".
Both this.addTrackData.authors and addTrackData.authors makes this error.
But this way works:
<selectize v-model="form.data.authors[i]['id']"
:settings=" {
valueField: 'inn',
labelField: 'name',
searchField: ['name', 'inn'],
options: addTrackData.authors, // It works, but looks too ugly!
}" >
</selectize>
2) Options are not reactive - when ajax data comes, all selects elements still shows a demo data. And I have no idea how to update them all...
UPDATE
Second problem could be fixed with If Conditional and empty initial array:
<selectize v-if="addTrackData.authors.length" v-model="form.data.authors[i]['id']"
:settings=" {
valueField: 'inn',
labelField: 'name',
searchField: ['name', 'inn'],
options: addTrackData.authors, // It works, but looks too ugly!
}" >
</selectize>
addTrackData : {
styles : [],
authors: []
....
}
But the first problem still makes me cry
I just read the source code of vue2-selectize and noticed that it's watch code for options key is incorrect.
his code is this way:
watch: {
value() {
this.setValue()
},
options (value, old) {
if (this.$el.selectize && !equal(value, old)) {
this.$el.selectize.clearOptions()
this.$el.selectize.addOption(this.current)
this.$el.selectize.refreshOptions(false)
this.setValue()
}
}
},
while it should be this way to work:
watch: {
value() {
this.setValue()
},
options (value, old) {
if (this.$el.selectize && !equal(value, old)) {
this.$el.selectize.clear();
this.$el.selectize.clearOptions();
var vm = this;
this.$el.selectize.load(function(callback) {
callback(vm.current);
});
this.$el.selectize.refreshOptions(false);
this.setValue();
}
}
},
I just prepared a hacky way to make it working but I dont encourage you using it in production.
Here is the fiddle's link: https://jsfiddle.net/ahmadm/h8p97hm7/
I'll try to send a pull request to his creator as soon as possible but until that time, your solution is already the only possible solution.
I have one widget column header by which I am selecting the value and filtering the grid store. I want exact the same on grid header as well. There for I am giving one combo with same values.
Here is my code for column header
header: {
items: [{
xtype: 'combo',
displayField: "displayName",
fieldLabel: 'Some Label',
valueField: 'title',
displayField: 'title',
hidden : true,
queryMode: 'local',
value : 1,
autoSelect : true,
//dataindex:"MUTST",
store: {
fields: ["id", "displayName"],
data: [
{ "id": "1", "title": "Test1" },
{ "id": "2", "title": "Test2" },
{ "id": "3", "title": "Test3" }
]
},
listeners : {
select : function(combo , record , eOpts){
debugger;
var sg = this.up("MyGrid");
var col = sg.getColumns()[0]; // Getting Header column
var flit =sg.getColumns()[0].filter // Here I am getting object instead of constructor
//this.focus = sg.onComboFilterFocus(combo);
}
},
}]
},
I am creating widget type in column
MyColumn: function(headersXmlDoc) {
var me = this,
gridConfig = {};
gridConfig.columns = [];
Ext.each(headersXmlDoc.getElementsByTagName("HEADER"), function(header) {
var column = {
text: header.getAttribute("L"),
dataIndex: header.getAttribute("DATAINDEX"),
sortable: (header.getAttribute("ISSORTABLE").toLowerCase()=="true"),
widgetType: header.getAttribute("WIDGET"),
filterType: Ext.isEmpty(header.getAttribute("FILTER"))? undefined: header.getAttribute("FILTER"),
};
switch (header.getAttribute("WIDGET")) {
case 'textbox':
if(column.filterType){
if(column.filterType == 'TagData'){
column.filter = {
xtype: 'tagfield',
growMax : 10,
valueField: 'title',
displayField: 'title',
parentGrid : me,
dataIndex:header.getAttribute("DATAINDEX"),
queryMode: 'local',
multiSelect: true,
isFilterDataLoaded: false,
disabled: true,
listeners:{
focus: me.SomeMethod, //
}
};
}
}
break;
}
this.columns.push(column);
}, gridConfig);
return gridConfig.columns;
},
I want if I select in header combo, it will directly select in widget combo as well. Can anyone explain how to get this. Thanks in advance
So you basically need a combo box in your header, that changes record values - the fact that you have a widget column displaying a combo within the grid cells doesn't really matter here.
I think you were fairly close - but you were trying to define a "header" config and add the combo to its items - instead you just define items directly on the column:
columns: [{
text: 'Combo Test',
dataIndex: 'title',
items: [{
xtype: 'combobox',
width: '100%',
editable: false,
valueField: 'title',
displayField: 'title',
queryMode: 'local',
autoSelect: true,
store: {
data: [{
"id": "1",
"title": "Test1"
}, {
"id": "2",
"title": "Test2"
}, {
"id": "3",
"title": "Test3"
}]
},
listeners: {
select: function (combo, selectedRecord) {
//we could just get the value from the combo
var value = combo.getValue();
//or we could use the selectedRecord
//var value = selectedRecord.get('id');
//find the grid and get its store
var store = combo.up('grid').getStore();
//we are going to change many records, we dont want to fire off events for each one
store.beginUpdate();
store.each(function (rec) {
rec.set('title', value);
});
//finish "mass update" - this will now trigger any listeners for saving etc.
store.endUpdate();
//reset the combobox
combo.setValue('');
}
}
}],
},
The actual setting of values happens in the select listener as you were trying - the key is to loop through the records and call set on each one:
//find the grid and get its store
var store = combo.up('grid').getStore();
//we are going to change many records, we dont want to fire off events for each one
store.beginUpdate();
store.each(function (rec) {
rec.set('title', value);
});
//finish "mass update" - this will now trigger any listeners for saving etc.
store.endUpdate();
I have created a fiddle to show this working:
https://fiddle.sencha.com/#view/editor&fiddle/1r01
I am using Angular ui-grid and am pretty new at it. I receive an array of objects to render data for each row. Each object, hence each row , has a field change:false which marks whether any field on that row has been edited or not. I have kept this field visible : false on screen.
However, whenever any change is made to any column of any row, I want to set this field as change:true.
How can this be achieved on the change of a ui-dropdown field or any other field for that matter.
I have this as my changing column:
{ name: "carrier_influence_group", displayName: "Carrier influence group", enableCellEdit: true,
editableCellTemplate: 'ui-grid/dropdownEditor', type:'object', cellFilter: 'cigFilter', editDropdownValueLabel: 'name',
editDropownOptionsArray: [{ id: 10, name: 'Small' }, { id: 11, name: 'Medium' }, { id: 12, name: 'Large' }]
},
I tried looking for any options available. But couldn't find any way in official docs. Kindly suggest a way or some relevant links
You can use the afterCellEdit event for this.
$scope.gridOptions.onRegisterApi = function (gridApi) {
$scope.gridApi = gridApi;
gridApi.edit.on.afterCellEdit($scope, function (rowEntity, colDef, newValue, oldValue) {
if (newValue !== oldValue) {
rowEntity['change'] = true;
}
});
});
I have the following combobox element:
editType = new Ext.form.ComboBox({
fieldLabel: 'Type',
name: 'Type',
queryMode: 'local',
displayField: 'name',
valueField: 'id',
store: {
fields: ['id', 'name'],
data: [
{id: '1', name: 'View'},
{id: '2', name: 'Edit'},
{id: '3', name: 'Admin'}
]
}
})
when I try to submit my form I submit its value like this:
userType: editType.getValue()
The Problem is that if I don't choose anything from it, then it returns displayField value, i.e. View. If I choose something then it returns the valueField, i.e. 1, 2 or 3. If the user don't choose anything I want to return number value like I have set, not the label.
I have search about this but couldn't find where my problem is. I read the specification and it states that:
comboboxElement.getValue() returns valueField
comboboxElement.getRawValue() returns displayField
Update
I am loading combobox as a part of a panel form, i.e. when I click on a row form a grid I load that particular row in a form with method myForm.loadRecord(clickedRow)
Thanks in advance