We Keep Coding

How to insert kendo drop down list into kendo grid, but with a different data source?

I've created a kendo grid, and need to insert kendo drop down into one of the columns. I need to get the data for the drop down from another data source. It kind of works, however, the problem is when I have chosen a value from the drop down and the drop down closes, instead of displaying that value it goes into editable mode. Only when I click outside of the dropdown, it displays the correct value. Here is a gif of the issue:
https://media2.giphy.com/media/KyMGB7FmFQMVTChFA7/giphy.gif
How could this issue be solved?
I have successfully created a kendo grid with a drop down list already. The only difference seems to be that there only one data source is used, but here two are used. Here is some of the code for the drop down:
title: "Type",
field: "productType.name", //this property is from the data source used for grid
template: "<kendo-drop-down-list k-value=\"dataItem.productType.id\"
k-options=\"productTypeOptions\" ng-change=\"productTypeChanged(dataItem, 'productType')\"
ng-model=\"dataItem.productType.id\"></kendo-drop-down-list>"
}...];
$scope.productTypes = {
data: [{ name: "Value 1", id: "1" }, { name: "Value 2", id: "2" }]
}
$scope.productTypeDataSource = new kendo.data.DataSource({
schema: {
data: "data",
model: {
fields: {
id: { type: "number" },
name: { type: "string" }
}
}
},
data: $scope.productTypes,
serverPaging: true,
serverSorting: true,
serverFiltering: true
});
$scope.productTypeOptions = {
dataSource: $scope.productTypeDataSource,
dataTextField: "name",
dataValueField: "id"
};
$scope.productTChanged = function (dataItem, field, productArray, dataSource) {
var index = dataSource.indexOf(dataItem);
var c = productArray.data[index];
if (c == null) return;
c[field] = dataItem[field];
return c;
};
$scope.productTypeChanged = function (dataItem, field) {
$scope.productTChanged(dataItem, field, $scope.products, $scope.productDataSource);
};```

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);

How to select an element in Webix richselect area?

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

get selected id of kendo drop down value

how to get id of selected name from dropdown.
whene select Apples then got id 1and select Oranges then 2.
this is simple kendo dropdown example.
<body>
<input id="dropdownlist" />
<script>
$("#dropdownlist").kendoDropDownList({
dataSource: [
{ id: 1, name: "Apples" },
{ id: 2, name: "Oranges" }
],
dataTextField: "name",
dataValueField: "id",
index: 1,
select: onSelect
});
function onSelect(e) {
console.log(e);
};
</script>
</body>
thanks.

In order to retrieve the selected Id you can use the dataItem object and access the id within it with change event:
var dataItem = e.sender.dataItem();
$('#id').text(dataItem.id);
This will get you access to any data within the object too:
$('#name').text(dataItem.name);
Working example
http://jsfiddle.net/ygBq8/1/
Html
<input id="dropdownlist" /><br/>
<span id="id" >Id</span><br/>
<span id="name" >Name</span><br/>
JavaScript
$("#dropdownlist").kendoDropDownList({
dataSource: [
{ id: 1, name: "Apples" },
{ id: 2, name: "Oranges" }
],
dataTextField: "name",
dataValueField: "id",
index: 1,
change: onChange
});
function onChange(e) {
var dataItem = e.sender.dataItem();
$('#id').text(dataItem.id);
$('#name').text(dataItem.name);
};

The Select event is a bit more difficult one to use, as that event fires before the item is selected.
If you use the Change event, you should be able to get the dataItem with
this.dataSource.get(this.value())
See sample http://jsbin.com/OcOzIxI/2/edit

Please use this.dataItem()
function onSelect(e) {
alert(this.dataItem().id);
alert(this.dataItem().Name);
};

To select ID of the selected item use:
$("#dropdownlist").val()
And to select TEXT of the selected item use:
$("#dropdownlist").data("kendoDropDownList").text()