I am trying to use Ui-grid from this link
http://ui-grid.info/docs/#/tutorial/101_intro.
I make a simple example of ui-grid in plunker..I need to add select box on "Gender" as filter .If I select "male" it show only data who is "m or If I select "female" it show filter data only "f" value here is my code
Plunker https://plnkr.co/edit/DqBgHFnwLpYM5pvg0f56?p=preview
I try like that but not work
type: uiGridConstants.filter.SELECT,
selectOptions: [
{ value: 'm', label: 'male' },
{ value: 'F', label: 'female' }
];
I don't need input field on gender .I need select box or dropdown on gender column
First you need to add uiGridConstants as parameter in your controller declaration, so you can use it. Then, you will be able to do what you want.
angular.module('app',['ngTouch', 'ui.grid'])
.controller('MainCtrl',function( $scope, uiGridConstants ){
// ...
$scope.gridOptions = {
enableFiltering: true,
columnDefs: [
{
field: 'gender',
displayName:'Gender',
filter: {
type: uiGridConstants.filter.SELECT,
selectOptions: [
{ value: 'm', label: 'male' },
{ value: 'F', label: 'female' }
];
}
},
{field: 'name', displayName:'First'},
{field: 'lastname', displayName:'Second',enableSorting: false}
]
};
// ...
}
I'll give you an advice : to debug angular code, or any javascript code, use a tool like Firebug (for Mozilla Firefox). It will show you the javascript errors encountered when you change your code and plunker try to apply it. In this case, you would have seen this :
Error: uiGridConstants is not defined
#https://run.plnkr.co/8CvvTtAR4QY8O2Ln/app.js:30:11
Related
I'm sorry to have posted this in here since I tried to go here: help.angular-formly.com but there was no content there or removed.
I have a hide expression as so:
{
key: "rotation_speed",
type: "select",
noFormControl: true,
templateOptions: {
label: 'Animation Speed',
required: true,
placeholder: 'Animation Speed',
valueProp: "value",
labelProp: "name",
options: [
{
'name' : 'Fast Clockwise',
'value' : '-10'
},
{
'name' : 'Medium Clockwise',
'value' : '-5'
}
]
},
hideExpression: 'model.img_type === "regular"',
}
and the formly fields in frontend as this:
<formly-form model="panoFactory.presentation.scenes[$index]" fields="scene_fields"></formly-form>
I verified that the model changes in the frontend but the hideExpression isn't getting updated probably due to some scoping issues. Any help on this would be much appreciated. Thanks!
I have (a seemingly common) problem with empty option values an angular model viewed using a select using ng-options.
$scope.groupTypeOptions = [
{ group: 'g1', name: '---', value: null },
{ group: 'g2', name: 'Feature', value: 'feature' },
{ group: 'g2', name: 'Bug', value: 'bug' },
{ group: 'g2', name: 'Enhancement', value: 'enhancement' }
];
<select ng-model='form.groupType' required ng-options='option.value as option.name group by option.group for option in groupTypeOptions'></select>
A fiddle can be seen here:
http://jsfiddle.net/v6z3zh49/
My goal is to, from a predefined model, show a grouped select with the selected item representing null (or empty string). However, when selecting a value and I always end up with an extra, empty, option element being added. See fiddle above.
I have looked at similar questions, for example here and here, but cannot find a solution.
Any tips?
Try:
$scope.groupTypeOptions = [
{ group: 'g1', name: '---', value: undefined },
{ group: 'g2', name: 'Feature', value: 'feature' },
{ group: 'g2', name: 'Bug', value: 'bug' },
{ group: 'g2', name: 'Enhancement', value: 'enhancement' }
];
It happens because in javascript null !== undefined.
Hope, it will help.
Demo: http://jsfiddle.net/ababashka/skk4uj1y/
I have 2 grids showing the same data with 2 different sorts:
$scope.aGridOptions = {
data: 'aData',
columnDefs: [
{ displayName: 'Column 1', field: 'col1',},
{ displayName: 'Column2', field: 'col2',}],
sortInfo: {
fields: ['col1'], directions: ['asc']
},
};
$scope.bGridOptions = {
data: 'aData',
columnDefs: [
{ displayName: 'Column 1', field: 'col1',},
{ displayName: 'Column2', field: 'col2',}],
sortInfo: {
fields: ['col1', 'col2'],
directions: ['asc', 'asc']
},
};
As the plunker shows, both sort the same way, only by column 1. Not only that, but ng-grid 2.0.7, trashes by sortInfo object on bGridOptions to shorten the sort to only one column.
http://plnkr.co/edit/riDzDcS3YSJrQrULwL2j?p=preview
I can't seem to find where it is destroying my sort options. How do I get it to sort by 2 columns and not have it trash my sortInfo?
Below is the initial answer I typed, which seemed to work as I played around in your Plunk; however, when I went to make a clean copy of the Plunk it stopped working. It sounds like this issue may be resolved in 2.0.8 though, see Issue #748 and Issue #732.
My initial response, but not working for me now...
Try changing the sortInfo for each grid to look like this:
$scope.aGridOptions.sortInfo = {
fields: ['col1'],
directions: ['asc'],
columns: [0]
};
$scope.bGridOptions.sortInfo = {
fields: ['col1', 'col2'],
directions: ['asc', 'asc'],
columns: [0, 1]
};
I am trying to filter a store based on a set of mapped Ext.util.Filters. For example:
comboBox.store.filter(_.map(this.displayFields, function (displayField) {
return {
property: displayField.name,
value: queryString,
anyMatch: true
};
}));
this.displayFields is a list of display fields in my combobox template. In my combobox template I have something like:
'{codeValue} {displayValue} {descriptionValue}'
displayValue is the displayField property on my combobox. When I search for 'co' in my combobox, all displayFields must have 'co' in the value when I apply the filters to the store. My filters look like this:
[
{property: 'codeValue', value: 'co'},
{property: 'displayValue', value: 'co'},
{property: 'desciptionValue', value: 'co'}
]
I would like a set of records that have the value 'co' in any of the displayFields' property.
Each filter is applied after the previous one, resulting in a logical "and". You've probably got that, or you wouldn't be asking. So, how do you get an "or" with Ext? If that were an "or" on values, you could use a regex for value, but you want it on property. As far as I know there isn't a built-in config option for that, but you can do anything you want in filterFn.
Here's, for example, a combo that displays all records with an 'a', either in their code or name, and only them:
Ext.widget('combo', {
renderTo: Ext.getBody()
,store: {
fields: ['id', 'code', 'name']
,data: [
{id: 1, code: 'a', name: 'Foo'}
,{id: 2, code: 'b', name: 'Bar'}
,{id: 3, code: 'ba', name: 'Baz'}
,{id: 4, code: 'z', name: 'Zoo'}
]
,filters: [{
filterFn: function(record) {
var match = false;
Ext.each(fields, function(field) {
if (re.test(record.get(field))) {
match = true;
return false; // break the loop
}
});
return match;
}
}]
}
,displayField: 'name'
,valueField: 'id'
});
Here is my select field. We can see that the options are SI,American and Imperial
{
xtype: 'selectfield',
flex: 1,
itemId: 'units_Selector',
maxHeight: 50,
label: 'Units',
options: [
{
text: 'SI',
value: 'SI'
},
{
text: 'American',
value: 'American'
},
{
text: 'Imperial',
value: 'Imperial'
}
],
usePicker: false,
listeners: [
{
fn: function(element, eOpts) {
var unit = Ext.getStore('configstore').last().get('Units');
this.suspendEvents();
this.setValue(unit);
this.resumeEvents();
},
event: 'painted'
}
]
},
Here what I see when using my app...
OUPS seems like SI is displayed has International?
FYI - International was the option's name I gave this option at first. I decide to change it but my app seems to disagree with me on this one ....
Here is a console.log() of my selectfield's options
And here is the funniest part, my code.js file to see that it does save to it correctly from sencha architect
Would anyone know how to repair that problem...?
Answer is dumb...
Seriously, if you have multilanguage app... double check you aint modifing the value field -_-< when updating the language (text field).
found the problem by changing the itemId to something else to see who what changing the value of this select field. (Automaticly created an error and gave me a code line to find it)