How to select an element in Webix richselect area? - javascript

I use Webix 2.5.14. There was a problem with a component Richselect.
In this form there is a richselect with options.
webix.ui({
view: "form",
id:"addAccessForm",
borderless: true,
elements: [
{
view: "richselect",
id:"rule",
label: 'Rule',
value:1,
options:[
{id:1,value:"R"},
{id:2,value:"W"},
{id:3,value:"RW"},
{id:4,value:"RW+"}
]
},
....
]
});
I click on the button and opens a form for editing, and I need to select an element in the richselect area, for example with id = 3.
How to do it? setValue () adds a new one (element), but doesn't select what i need.

You need to use
$$("rule").setValue(3); // 3 - id of record
It is a bit counterintuitive, but you need to use the "id" of record in the setValue command, not the value.

See my example:
webix.ui({
view: "form",
id:"addAccessForm",
borderless: true,
elements: [
{
view: "richselect",
id:"rule",
label: 'Rule',
value:1,
options:[
{id:1,value:"R"},
{id:2,value:"W"},
{id:3,value:"RW"},
{id:4,value:"RW+"}
]
},
{ view:"button", value: "Select Value", click:function(){
$$("rule").setValue(2);
}}
]
});
or if you prefer http://webix.com/snippet/5df7e1b1

Related

Why Apply Button does not Work in Ag-grid Filter (agSetColumnFilter)?

I am trying to use Apply and Reset button with agSetColumnFilter in my application but it does not work as expected.
Scenario: When we try to add some text in the search box and click on Apply it does not filter. I have added a link feel free to modify.
{ field: 'country', filter: 'agSetColumnFilter',
filterParams: {
buttons: ['reset', 'apply']
}
}
According to AgGrid documentation, If you want the same behavior then you have to add 'excelMode': 'windows' in the filterParams.
columnDefs: [
// set filters
{
field: 'athlete',
filter: true,
filterParams: {
buttons: ['reset', 'apply'],
excelMode: 'windows',
},
},
]
Below links are given for your reference.
https://www.ag-grid.com/javascript-data-grid/filter-set-excel-mode/#example-excel-mode
Working code as expected:
https://plnkr.co/edit/iZQa3eeJu807zlj3?preview

Populate BootstrapTable x-editable select box based on another column

I have a BootstrapTable select box. I know you can use a function to populate the values in the select box. I'd like that function to change which array it provides based on the value of a second column (called Text_example).
So in my example, if Text_example for that row is 1, the select box should have the following data: [{1:1}]. if Text_example for that row is 2, the select box should have the following data: [{2:2}]
I think my problem is that I don't know how to pass just the row's data to the function get_values as my method seems not to be working.
Full Fiddle: http://jsfiddle.net/goxe6ehg/
var data = [{"Text_example": 1},{"Text_example": 2}];
function get_values(data) {
if (data['Text_Example'] === 1) {
return [{1:1}];
}
else {
return [{2: 2}]
}
}
$('#table').bootstrapTable({
columns: [
{
field: 'Select_example',
title: 'Select_example',
editable: {
type: 'select',
source: get_values($('#table').bootstrapTable('getData'))
}
},
{
field: 'Text_example',
title: 'Text_example'
}
],
data: data
});
EDIT: I over-simplified my example. Rather than having a static field for text_example I need it to be a select box, where the value for select_example changes based on what the user has selected in text_example.
Updated JSFiddle: http://jsfiddle.net/4wwv18Lq/4/
You can use the oninit handler on the bootstraptable library.And add the editables by iterating through the data object.
var data = [{"Text_example": 1},{"Text_example": 2}];
$('#table').on('editable-init.bs.table', function(e){
var $els = $('#table').find('.editable');
$els.each(function(index,value){
$(this).editable('option', 'source', data[index])
});
});
$('#table').bootstrapTable({
columns: [
{
field: 'Select_example',
title: 'Select_example',
editable: {
type: 'select'
}
},
{
field: 'Text_example',
title: 'Text_example'
}
],
data: data
});
JSfiddle link
http://jsfiddle.net/km10z2xe/

select2 is not updated after disable of selected option

I'm trying to disable the selected option in select2 but it seems like the select2 is not refreshing.
My purpose is to disable each item in the select2 list after selecting it. I see the HTML that the option got the disabled attribute but the option is still enabled in the select2 element.
$("#select-filter").select2({
placeholder: "Select a category",
data:[{
id: "",
text: ""
},{
id: "project",
text: "project"
},{
id: "date",
text: "date"
},{
id: "user",
text: "user"
}]
}).on("change", function(e) {
$("#select-filter :selected").attr("disabled", "true");
});
See example : https://jsfiddle.net/bkqeqbay/1/
You can use the select event and the data like so:
...}).on("select2:select", function(e) {
console.dir(e.params.data);
e.params.data.disabled = true;
});
Updated fiddle: https://jsfiddle.net/bkqeqbay/4/
Note that if you must also disable the underlying select element option you can do:
var index = $(e.params.data.element).index();
$("#select-filter").find('option').eq(index).prop('disabled',true);

Kendo UI Grid: if I make changes and save them, I can still cancel them afterwards. How to lock them in?

I have a Kendo UI Grid bound to a local data source. If I make some changes and click on "Save changes", and then I click on "Cancel changes", the changes are rolled back. I expected them to be "locked in" because I saved them.
Furthermore, if I make a change, save it, make another change, save again and finally cancel, both changes are rolled back.
See UPDATED fiddle, with problem and solution:
http://jsfiddle.net/q24ennne/7/
My HTML:
<div id="grid"></div>
My JavaScript:
window.gridData = [
{ id: 1, text: "Uno" },
{ id: 2, text: "Dos" },
{ id: 3, text: "Tres" },
{ id: 14, text: "Catorce" },
];
(function() {
$('#grid').kendoGrid({
toolbar: ["save", "cancel"],
editable: true,
saveChanges: function(e) {
gridData = $('#grid').getKendoGrid().dataSource.data();
$('#grid').getKendoGrid().refresh();
console.log("gridData:");
console.log(gridData);
},
columns: [{
field: "text",
title: "No."
}],
dataSource: {
data: gridData,
}
});
})();
Thanks!
You need to include a schema for your datasource that specifies which property is the id of each item. In your case this happens to also be called "id" so add this:
dataSource: {
data: gridData,
schema: {
model: { id: "id" }
}
}
The grid will then correctly track and keep your saved changes.

Sencha Touch forms not usable when created with Ext.create

I have this:
my.Settings = {
id: 'settings',
xtype: 'panel',
title: 'Settings',
iconCls: 'settings',
layout: 'card',
items:[
my.form1,
my.form2
]
};
When my.form1 is a config object, the form is visible and clickable (inputs allow entry, selects bring up dropdown options, etc.).
However, when I try to use Ext.define and Ext.create, the form appears visually, but nothing is selectable. If I use a tabpanel, the tabs aren't clickable, and on forms inputs won't focus or bring up the keyboard, and don't seem to respond to input at all.
Here's how I tried it:
Ext.define('my.form1', {
extend: 'Ext.form.Panel'
config:{...}
}
...
items: [
Ext.create('my.form1',{id: 'myForm1'})
]
What about the second method causes the form to break? I'm trying to move toward using require and Ext.create for dynamic loading, but I can't do this if I can't get the simplest case working.
did you set the current active item? Because you use the card layout:
var panel = Ext.create('Ext.Panel', {
layout: 'card',
items: [
{
html: "First Item"
},
{
html: "Second Item"
},
{
html: "Third Item"
},
{
html: "Fourth Item"
}
]
});
// here we set the active item to show on the screen
panel.getLayout().setActiveItem(1);
See http://docs.sencha.com/touch/2-0/#!/api/Ext.layout.Card for more information.

Categories