Survey.StylesManager.applyTheme("modern");
        

//Add the price property into choices
Survey.Serializer.addProperty("itemvalue", "price:number");

var getItemPrice = function(params) {
//this.row property available in cells of dropdown and dynamic matrices questions
var question = !!this.row
    ? this.row.getQuestionByColumnName(params[0])
    : null;
//if we can't find a question inside the cell (by row and column name) then return
if (!question) return 0;
//get the selected item/choice
var selItem = question.selectedItem;
//return 0 if a user did not select the item yet.
return !!selItem ? selItem.price : 0;
};
//Register the custom function
Survey.FunctionFactory.Instance.register("getItemPrice", getItemPrice);

            
                var json = {
  showQuestionNumbers: "off",
  elements: [
    {
      type: "matrixdynamic",
      name: "orderList",
      rowCount: 1,
      minRowCount: 1,
      titleLocation: "none",
      addRowText: "Add new item",
      columns: [
        {
          name: "id",
          title: "Id",
          cellType: "expression",
          expression: "{rowIndex}"
        },
        {
          name: "phone_model",
          title: "Phone model",
          isRequired: true,
          totalType: "count",
          totalFormat: "Items count: {0}",
          choices: [
            { value: "iPhone7-32", text: "iPhone 7, 32GB", price: 449 },
            { value: "iPhone7-128", text: "iPhone 7, 128GB", price: 549 },
            {
              value: "iPhone7Plus-32",
              text: "iPhone 7 Plus, 32GB",
              price: 569
            },
            {
              value: "iPhone7Plus-128",
              text: "iPhone 7 Plus, 128GB",
              price: 669
            },
            { value: "iPhone8-64", text: "iPhone 8, 64GB", price: 599 },
            { value: "iPhone8-256", text: "iPhone 8, 256GB", price: 749 },
            {
              value: "iPhone8Plus-64",
              text: "iPhone 8 Plus, 64GB",
              price: 699
            },
            {
              value: "iPhone8Plus-256",
              text: "iPhone 8 Plus, 256GB",
              price: 849
            },
            { value: "iPhoneXR-64", text: "iPhone XR, 64GB", price: 749 },
            {
              value: "iPhoneXR-128",
              text: "iPhone XR, 128GB",
              price: 799
            },
            {
              value: "iPhoneXR-256",
              text: "iPhone XR, 256GB",
              price: 899
            },
            { value: "iPhoneXS-64", text: "iPhone XS, 64GB", price: 999 },
            {
              value: "iPhoneXS-256",
              text: "iPhone XS, 256GB",
              price: 1149
            },
            {
              value: "iPhoneXS-512",
              text: "iPhone XS, 512GB",
              price: 1349
            },
            {
              value: "iPhoneXSMAX-64",
              text: "iPhone XS Max, 64GB",
              price: 1099
            },
            {
              value: "iPhoneXSMAX-256",
              text: "iPhone XS Max, 256GB",
              price: 1249
            },
            {
              value: "iPhoneXSMAX-512",
              text: "iPhone XS, 512GB",
              price: 1449
            }
          ]
        },
        {
          name: "price",
          title: "Price",
          cellType: "expression",
          expression: "getItemPrice('phone_model')",
          displayStyle: "currency"
        },
        {
          name: "quantity",
          title: "Quantity",
          isRequired: true,
          cellType: "text",
          inputType: "number",
          totalType: "sum",
          totalFormat: "Total phones: {0}",
          validators: [
            {
              type: "numeric",
              minValue: 1,
              maxValue: 100
            }
          ]
        },
        {
          name: "total",
          title: "Total",
          cellType: "expression",
          expression: "{row.quantity} * {row.price}",
          displayStyle: "currency",
          totalType: "sum",
          totalDisplayStyle: "currency",
          totalFormat: "Total: {0}"
        }
      ]
    },
    {
      name: "vatProcents",
      type: "text",
      title: "VAT (in %)",
      defaultValue: 20,
      inputType: "number",
      validators: [
        {
          type: "numeric",
          minValue: 0,
          maxValue: 40
        }
      ]
    },
    {
      name: "vatTotal",
      type: "expression",
      title: "VAT",
      expression: "{orderList-total.total} * {vatProcents} / 100",
      displayStyle: "currency",
      startWithNewLine: false
    },
    {
      name: "total",
      type: "expression",
      title: "Total",
      expression: "{orderList-total.total} + {vatTotal}",
      displayStyle: "currency",
      startWithNewLine: false
    }
  ]
};

                window.survey = new Survey.Model(json);
            
        
            survey.onComplete.add(function(sender) {
            document.querySelector('#surveyResult').textContent =
            "Result JSON:\n" + JSON.stringify(sender.data, null, 3);
            });
        
            
                survey.render("surveyElement");
            

                    

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Matrix dynamic totals / order list, Knockoutjs Survey Library Example</title>

<meta name="viewport" content="width=device-width" />
    <script src="https://unpkg.com/knockout@3.5.1/build/output/knockout-latest.js"></script>
    <script src="/DevBuilds/survey-knockout/survey.ko.min.js"></script>
    <link href="/DevBuilds/survey-core/modern.min.css" type="text/css" rel="stylesheet" />
    <link rel="stylesheet" href="./index.css">

</head>
<body>
    
            <div id="surveyElement" style="display:inline-block;width:100%;">
            </div>
    <div id="surveyResult"></div>

<script type="text/javascript" src="./index.js"></script>

</body>
</html>