javascripthtmldevexpressdx

I have 3 dx-selects they need to be related to each other


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

Solution

  • 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>