Update dxTextboxes based on dxSelectBox selection - Devextreme

Question

I have searched but cannot seem to find a decent way that applies to my situation.

I have a dxSelectBox in my Devextreme app. The data inside this dxSelectBox comes from a custom data source. I then have several dxTextBoxes on my page. Based on th eselection of the dxSelectBox, I would like to populate the dxTextBoxes with data that only applies to the selected item.

This is my design code for the dxSelectBox

                <div class="dx-field">
                <div class="dx-field-label">Site: </div>
                <div class="dx-field-value" id="cboSite" data-bind="dxSelectBox: { dataSource: siteStore, displayExpr: 'SiteName',value:'SiteID', onItemClick: GetBoxValue}"></div>
            </div>

Then, I load the data in my JS file like this:

         var url = 'URL/GetSites';

     //   CustomerSite = $("#mySelectBoxID").dxSelectBox('instance').option('value');

     var siteStore = new DevExpress.data.CustomStore({
         load: function (loadOptions) {

             return $.ajax({
                 type: 'GET',
                 url: url,
                 data: {},
                 cache: true,
                 dataType: "jsonp",
                 success: function (result) {
                     console.log(JSON.stringify(result));

                 },
                 error: function (xhr, status, error) {
                     console.log(JSON.stringify(xhr));
                     console.log(JSON.stringify(status));
                     console.log(JSON.stringify(error));
                 }

             });

         },
         totalCount: function (loadOptions) {
             return 0;
         }
     });

      function GetBoxValue() {

         alert($("#cboSites").dxSelectBox('instance').option('value')),  

     };

What gets sent from my service is Name, Code, ID, SiteID, SiteName.

I would like to choose the site name inside the cboSites drop down, then the app must populate the fields with the Name, Code and ID values.

Can anyone please guide me?

Answer 1

In your case you can use the Knockout Computed Observables to check when the selectbox selected item is changed. So, the code can be like below:

var selectedItem = ko.observable(null),
    name = ko.observable(""),
    id = ko.observable(""),
    code = ko.observable("");

ko.computed(function(){
    var value = selectedItem();
    if(value) {
      name(value.name);
      id(value.id);
      code(value.code);
    }
});

Here there is the selectedItem value that contains currently selected selectbox value. Also, there are the name, id and code values that contain particular field of the selected item.

When the selectedItem is changed the ko.computed function fires and updates the related values.

I've created a small sample here - http://jsfiddle.net/e6wra6p8/

You can find more information about the selectedItem option of the dxSelectBox widget in documentation, as well.