Default, attributes 'value' is key for binding value. And if i want to changes data bindings from 'value' to 'name', it not worked!
[Example](https://jsfiddle.net/vu_1995/qkf549vL/3/)
You can change the key that el-autocomplete uses by specifying the attribute value-key="name"
Also, in your fiddle, you also have to make sure you're using name instead of value in the filter function:
createFilter(queryString) {
return (link) => {
return (link.name.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
};
},
Here's an updated fiddle: https://jsfiddle.net/jmbldwn/tLyc7hxg/1/
Related
For my project i use User Plugin and Translate Plugin.
I've added custom new fields to the user and now I want to translate them.
I think I know why it does not work. But find no solution.
Somebody to have idea?
if i add to $model->translatable default fields like 'email', works fine.
i added boot function to my custom plugin with this code
\RainLab\User\Models\User::extend(function ($model) {
$model->implement[] = 'RainLab.Translate.Behaviors.TranslatableModel';
$model->translatable = ['about', 'preview_text'];
});
Hmm,
There is one problem. when you try to add it directly $model->translatable, It seems its treating it like attribute of model.
Try this $model->addDynamicProperty(variable_name, value);
\RainLab\User\Models\User::extend(function ($model) {
$model->implement[] = 'RainLab.Translate.Behaviors.TranslatableModel';
$model->addDynamicProperty('translatable', ['about', 'preview_text']);
// like this ^
});
It should treat it as local variable and it should work.
If any doubts please comment.
Revision [ Final solution ] - solution for : it works for existing fields when we are adding new fields this is not working.
Problem: With translation mechanism is that it listens the backend.form.extendFieldsBefore event for form and then register fields for translation. When we try to register new fields in form using extendFormFields extension, It happens afterward so new added fields are not visible to translation listener. so they are kind of skipped as translation field registration process already been done.
Solution: So for solution we can just add our field before translation registartion happens. luckily translate plugin has lowest -1 priority for listening this event backend.form.extendFieldsBefore so we can register our fields before It so we are good now and our fields can be added before it can process fields for translation.
Code
\Event::listen('backend.form.extendFieldsBefore', function($widget) {
// You should always check to see if you're extending correct model
if (!$widget->model instanceof \RainLab\User\Models\User) {
return;
}
// we will merge current fields with fields we want to add
// we used shorthand + plus operator for this
$widget->tabs['fields'] = $widget->tabs['fields'] + Config::get('rms.secis::user_fields');
// here Config::get('rms.secis::user_fields') is just returning field array
// Fo ref. Ex:
// return [
// 'gender' => [
// 'label' => 'Gender',
// 'tab' => 'Security Island',
// 'type' => 'radio',
// 'options' => [
// 'male' => 'Male',
// 'female' => 'Female'
// ],
// 'span' => 'auto'
// ],
// ];
});
Note: we are adding fields to tab so we are using $widget->tabs['fields'] to add fields to the tabs. If you want to add normal fields or secondary tab fields you can use $widget->fields and $widget->secondaryTabs['fields] respectively.
Yes now translator can see our fields and its processed, It should able to show translation UI in frontend-ui as well.
if any doubts please comment.
#hardik-satasiya
yes, no more errors on frontend, but new problem is, that no translate functions on fields.
Maybe to add jQuery Script to Controller?
Integration without JQuery and October Framework files:
https://octobercms.com/plugin/rainlab-translate
end of documentation
I have an issue related to the existing question
Cannot disable matInput element with this
Suggested answer works just fine:
ngOnInit() {
this.form = this.fb.group({
name: new FormControl({ value: '', disabled: this.disabled })
});
But when I change this.disabled value to true - disabled attribute isn't changed. Is there a way to change the disabled attribute for matInput?
You can't use that form, because when you create a FormControl you are passing that value, in your case the value of this.disabled. You are not binding properties, you are only passing a value to make some checks, this value is not reflecting input properties' changes.
You can't achieve your goal by this way, you need to enable and disable your input manually, like this:
let control = this.form.get('name')
control.disabled ? control.enable() : control.disable();
Obviously you can put it into a click event directly into your template, something like this:
<button (click)="this.form.get('name').enable()">Enable</button>
In UI5, is it possible to bind a single attribute of a single entity to a control property if your model is an OData? Binding works ok if you bind an aggregation to an entity set but does not seem to work with properties to entities. Say I have an entity set called TestSet. Each "Test" has attribute Key and Name. I'd like to bind the title of a table to the Name of one of the entities on that set.
What's wrong with the following code?
createContent: function(oController) {
jQuery.sap.require("sap.ui.table.Table");
var oTable = new sap.ui.table.Table({title: "{/TestSet('01')/Name}"});
oTable.setModel(new sap.ui.model.odata.ODataModel("/path/to/root/of/odata/"));
oTable.bindProperty("title", "/TestSet('01')/Name");
return oTable;
},
OData works ok when tested in isolation. /TestSet returns set of Test entities and /TestSet('01') returns one of those entities.
I've tested binding to /Name, /TestSet('01')/Name, etc. Nothing seems to work.
You can effect a property binding like this by binding the control to the specific element (hierarchy, as it were, is aggregation->element->property). So taking your example, you could do this:
var oTable = new sap.ui.table.Table({
title : "{Name}"
});
and then when you do this:
oTable.bindElement("/Products(0)");
the HTTP call is made by the OData model mechanism and the value appears in the table's title property.
Here's a running example, using Northwind.
According to the developer guide ...
Requests to the back end are triggered by list bindings, element bindings, and CRUD functions provided by the ODataModel. Property bindings do not trigger requests.
Thus, instead of trying to bind data directly on the properties of the target control with an absolute path, leverage ContextBinding (aka. "Element Binding") on the parent control or on the target control itself, and then bind the data on the properties of the target control or even further on child controls with a relative path (> instead of >/ in the path).
We can bind a single entity either in JS (e.g. if entity keys are required) or in XML views.
In JS
Instead of hardcoding the key predicate of the entity type, make sure to create the binding path together with key(s) via v2.ODataModel.createKey() dynamically after $metadata is loaded.
const oTable = new Table({ // Required from "sap/ui/table/Table"
title: "{Name}", // No absolute but relative binding path (no '/')
});
const myODataModel = /*...*/;
await myODataModel.metadataLoaded();
const bindingPath = myODataModel.createKey("/TestSet", { // See stackoverflow/a/47016070
key1: "...",
key2: 1234,
}); // Returns e.g. "/TestSet(key1='test1',key2='1234l')"
oTable.bindElement({ // Triggers a request and resolves the relative {Name} property.
path: bindingPath,
parameters: {
expand: "...",
select: "...",
// ... for more options see sap/ui/model/odata/v2/ODataContextBinding
},
events: { // Event handlers can be also assigned
dataRequested: e => { /*...*/ },
dataReceived: e => { /*...*/ },
change: e => { /*...*/ },
},
});
Note: bindElement and bindObject are same APIs just with different names. See also GitHub issue#3000.
In XML views
In XML views, single object / entity can be bound via binding in any controls. But creating keys dynamically (with createKey as shown above) is not possible. Hence, use binding only in combination with a <NavigationProperty> name, where keys are not required to be defined.
<table:Table xmlns:table="sap.ui.table"
binding="{
path: 'ToThatSingleEntity',
parameters: {
expand: '...',
select: '...'
},
events: {
dataRequested: '.onDataRequested',
dataReceived: '.onDataReceived',
change: '.onDataFromModelChanged'
}
}"
title="{FromThatSingleEntity}">
binding="{/TestSet(<keys>)}" is also possible but, again, the keys need to be then hardcoded.
I'm able to get this working except for two things that I just can't figure out:
Problem 1: I need to get both of the following but right now can only achieve one OR the other:
Select options need to have value and text
The selectedOption captured in the model needs to return the object of the selected option and not just the value of the option
I can affect which one of these works by including or excluding the following from my select markup:
...data-bind="optionsValue = 'Id'"...
How can I achieve both?
Problem 2: I need to set the selected option in the dropdown to an object I retrieve from a cookie containing the user's preferred value. My below implementation does not succeed in setting the selected value at all. What am I missing?
$(document).ready(function(){
var userOption = $.cookie("userPref") == null ? undefined : JSON.parse($.cookie("userPref"));
var model = function(){
this.options = ko.observableArray();
this.childOptions = ko.observableArray();
this.selectedOption = ko.observable(userOption); //this does nothing to set the value
this.selectedOption(userOption); //this also does nothing
this.options.subscribe(function(){
//this.selectedOption() returns an object if optionsValue is excluded from select databinding and returns option value if included
$.cookie("userPref", JSON.stringify(this.selectedOption());
this.childOptions(undefined);
this.childOptions(this.selectedOption() ? this.selectedOption().children : []);
}.bind(this));
};
var viewModel = new model();
ko.applyBindings(viewModel);
$.ajax({
type: "GET",
url: "myurl",
success: function(data){
viewModel.options(data);
}
});
});
<select data-bind="options: options, optionsText: 'text', optionsValue: 'Id', value: selectedOption, optionsCaption: 'Select Option'"></select>
You can't use the entire object as the value because an option value must be a simple type: string, int, etc. I suppose you could JSON encode the object (so it's a string) and set the value to that, but then you'd have to reciprocate on the backend and decode the posted string value back into an object and somehow work with that. However, said object would be disconnected from EF, so you'd have to fetch the object new from the database anyways in order to do anything meaningful with it. And, your second problem is the same as your first, you can't use a full object.
The way this is usually done is with ids. You make the option value the object's id. Then, you can set the selected option based on the object's id from the cookie. When you get to the backend, if you need to work with the object, you fetch it by the posted id. Anything else is not really a tenable situation.
I'm trying connect slickgrid and breeze.js, but I got a problem.
breeze generates the js model for you, and the object properties has get and set methods like:
var p1 = myobj.property1();
var p2 = myobj.property2();
myobj.property1("Test");
But in the slickgrid columns model, how do I bind the column with the property?
columns : [
{
id: "id",
name: "ID",
field: "property1" //this way I only see for every row on the page the text "function..."
},
{
id: "prop2", name: "prop2", field: "property2"
}
]
Try using the breeze "backingStore" adapter instead of the default "ko" (knockout) adapter.
This requires just a single line of Breeze configuration near the top of the file
breeze.config.initializeAdapterInstance("modelLibrary", "backingStore", true);
The backingStore adapter creates ES5 props for your model instead of "knockout" properties. I guessing that these will be easier for slickgrid to bind to.