When I select the first selectbox, the other selectbox should also show its subcategories, but I couldn't do that. It says it's done with onValueChanged but I can't do it. I'm not very good at javascript how can I do this? When I did it with the normal html select option, I did it with the value value, but I can't do it with dx-select
<div class="Marka">
<div class="dx-field">
<h3>Marka</h3>
<div class="dx-field-value">
<div id="searchBox"></div>
</div>
</div>
$(() => {
const searchBox = $('#searchBox').dxSelectBox({
dataSource: products,
displayExpr: 'Name',
valueExpr: 'ID',
searchEnabled: true,
}).dxSelectBox('instance');
const productsDataSource = new DevExpress.data.DataSource({
store: {
data: simpleProducts,
type: 'array',
key: 'ID',
},
});
$('#editBox').dxSelectBox({
dataSource: productsDataSource,
displayExpr: 'Name',
valueExpr: 'ID',
value: simpleProducts[0].ID,
acceptCustomValue: true,
onValueChanged(data) {
const $result = $('.current-value');
if (data.value !== null) {
const selectedItem = data.component.option('selectedItem');
$result.text(`${selectedItem.Name} (ID: ${selectedItem.ID})`);
} else {
$result.text('Not selected');
}
},
onCustomItemCreating(data) {
if (!data.text) {
data.customItem = null;
return;
}
const productIds = simpleProducts.map((item) => item.ID);
const incrementedId = Math.max.apply(null, productIds) + 1;
const newItem = {
Name: data.text,
ID: incrementedId,
};
data.customItem = productsDataSource.store().insert(newItem)
.then(() => productsDataSource.load())
.then(() => newItem)
.catch((error) => {
throw error;
});
},
});
$('#searchModeOption').dxSelectBox({
items: ['contains', 'startswith'],
value: 'contains',
onValueChanged(e) {
searchBox.option('searchMode', e.value);
},
});
$('#searchExprOption').dxSelectBox({
items: [{
name: "'Name'",
value: 'Name',
}, {
name: "['Name', 'Category']",
value: ['Name', 'Category'],
}],
displayExpr: 'name',
valueExpr: 'value',
value: 'Name',
onValueChanged(e) {
searchBox.option('searchExpr', e.value);
},
});
$('#searchTimeoutOption').dxNumberBox({
min: 0,
max: 5000,
value: 200,
showSpinButtons: true,
step: 100,
onValueChanged(e) {
searchBox.option('searchTimeout', e.value);
},
});
$('#minSearchLengthOption').dxNumberBox({
min: 0,
max: 5,
value: 0,
showSpinButtons: true,
onValueChanged(e) {
searchBox.option('minSearchLength', e.value);
},
});
$('#showDataBeforeSearchOption').dxCheckBox({
value: false,
text: 'Show Data Before Search',
onValueChanged(e) {
searchBox.option('showDataBeforeSearch', e.value);
},
});
});
const simpleProducts = [
{ Name: 'Markalar', ID: 0 },
{ Name: 'Alfa Romeo', ID: 1 },
{ Name: 'Aston Martin', ID: 2 },
{ Name: 'Audi', ID: 3 },
{ Name: 'Bentley', ID: 4 },
{ Name: 'BMW', ID: 5 },
{ Name: 'Cadillac', ID: 6 },
{ Name: 'Chevrolet', ID: 7 },
{ Name: 'Chrysler', ID: 8 },
{ Name: 'Citroen', ID: 9 },
];
const products = [{
ID: 1,
Name: 'Alfa Romeo',
Price: 330,
Current_Inventory: 225,
Backorder: 0,
Manufacturing: 10,
Category: 'Marka',
ImageSrc: 'images/products/1.png'
}, {
ID: 2,
Name: 'Aston Martin',
Price: 400,
Current_Inventory: 150,
Backorder: 0,
Manufacturing: 25,
Category: 'Marka',
ImageSrc: 'images/products/2.png',
}, {
ID: 3,
Name: 'Audi',
Price: 2400,
Current_Inventory: 0,
Backorder: 0,
Manufacturing: 0,
Category: 'Marka',
ImageSrc: 'images/products/3.png',
}, {
ID: 4,
Name: 'Bentley',
Price: 1600,
Current_Inventory: 77,
Backorder: 0,
Manufacturing: 55,
Category: 'Televisions',
ImageSrc: 'images/products/4.png',
}, {
ID: 5,
Name: 'BMW',
Price: 1450,
Current_Inventory: 445,
Backorder: 0,
Manufacturing: 0,
Category: 'Televisions',
ImageSrc: 'images/products/5.png',
}, {
ID: 6,
Name: 'Cadillac',
Price: 1350,
Current_Inventory: 345,
Backorder: 0,
Manufacturing: 5,
Category: 'Televisions',
ImageSrc: 'images/products/6.png',
}
];
> type here
I solved the problem this site was very helpful 👇🏻 https://supportcenter.devexpress.com/ticket/details/e5000/selectboxes-for-devextreme-how-to-implement-standalone-and-in-form-cascading-selectboxes
enter<div class="arac dx-fieldset">
<div class="Marka">
<div class="dx-fieldset-header"></div>
<div class="dx-field">
<h3>Marka</h3>
<div class="dx-field-value">
<div id="markaSelectBox"></div>
</div>
</div>
</div>
<div class="Model">
<div class="dx-fieldset-header"></div>
<div class="dx-field">
<h3>Model</h3>
<div class="dx-field-value">
<div id="modelSelectBox"></div>
</div>
</div>
</div>
<div class="Parca">
<div class="dx-fieldset-header"></div>
<div class="dx-field">
<h3>Parça</h3>
<div class="dx-field-value">
<div id="parcaSelectBox"></div>
</div>
</div>
</div>
</div>
<script>
$(function(){
$("#markaSelectBox").dxSelectBox({
dataSource: markalar,
valueExpr: "ID",
displayExpr: "Name",
showClearButton: true,
searchEnabled: true,
onValueChanged: function(e) {
let dataSource = modelSelectBox.getDataSource();
dataSource.filter("MarkaID", "=", e.value);
dataSource.load();
modelSelectBox.option("value", null);
}
});
let modelSelectBox = $("#modelSelectBox").dxSelectBox({
dataSource: modeller,
valueExpr: "ID",
displayExpr: "Name",
searchEnabled: true,
}).dxSelectBox("instance");
$("#markaModelForm").dxForm({
FormData: toplam,
onFieldDataChanged: function(e){
if(e.dataField === "MarkaID"){
let modelEditor = e.component.getEditor("ModelID");
modelEditor.getDataSource().filter(['MarkaID', '=', e.value]);
modelEditor.getDataSource().load();
e.component.updateData("ModelID", null);
}
},
items:[
//marka itemi
{
label: {text: "Marka"},
dataField: "MarkaID",
editorType: "dxSelectBox",
editorOptions: {
dataSource: markalar,
valueExpr: "ID",
displayExpr: "Name",
showClearButton: true,
}
},
//model itemi
{
label: {text: "Model"},
dataField: "ModelID",
editorType: "dxSelectBox",
editorOptions: {
dataSource: modeller,
valueExpr: "ID",
displayExpr: "Name"
}
},
//model itemi
{
label: {text: "Parca"},
dataField: "ParcaID",
editorType: "dxSelectBox",
editorOptions: {
dataSource: parcalar,
valueExpr: "ID",
displayExpr: "Name"
}
}, //model itemi
{
label: {text: "Parca"},
dataField: "ParcaID",
editorType: "dxSelectBox",
editorOptions: {
dataSource: parcalar,
valueExpr: "ID",
displayExpr: "Name"
}
}
]
});
});
$(function(){
$("#modelSelectBox").dxSelectBox({
dataSource: modeller,
valueExpr: "ID",
displayExpr: "Name",
showClearButton: true,
searchEnabled: true,
onValueChanged: function(e) {
let dataSource = parcaSelectBox.getDataSource();
dataSource.filter("ModelID", "=", e.value);
dataSource.load();
parcaSelectBox.option("value", null);
}
});
let parcaSelectBox = $("#parcaSelectBox").dxSelectBox({
dataSource: parcalar,
valueExpr: "ID",
displayExpr: "Name",
searchEnabled: true,
}).dxSelectBox("instance");
$("#markaModelForm").dxForm({
FormData: toplam,
onFieldDataChanged: function(e){
if(e.dataField === "ModelID"){
let parcaEditor = e.component.getEditor("ParcaID");
parcaEditor.getDataSource().filter(['ModelID', '=', e.value]);
parcaEditor.getDataSource().load();
e.component.updateData("ParcaID", null);
}
},
});
});
var toplam = { MarkaID: null, ModelID: null, ParcaID: null }
var markalar = [
{ Name: 'Markalar', ID: 0 },
{ Name: 'Alfa Romeo', ID: 1 },
{ Name: 'Aston Martin', ID: 2 },
{ Name: 'Audi', ID: 3 },
{ Name: 'Bentley', ID: 4 },
{ Name: 'BMW', ID: 5 },
{ Name: 'Cadillac', ID: 6 },];
var modeller = [{
"ID":1,
"Name": "6",
"MarkaID": 1
},{
"ID":2,
"Name": "33",
"MarkaID": 1
},{
"ID":3,
"Name": "75",
"MarkaID": 1
},{
"ID":4,
"Name": "90",
"MarkaID": 1
}];
var parcalar = [{
"ID":1,
"Name": "Abs ve fren sensörleri",
"ModelID": 1
},{
"ID":2,
"Name": "El fren teli",
"ModelID": 1
},{
"ID":3,
"Name": "Fren aksesuar seti",
"ModelID": 1
},
{
"ID":4,
"Name": "Fren Balatası",
"ModelID": 1
},
]
</script>