Cart Licenses Contact Support Online Creator Login/Register
Try
Free
v 1.9.38

Matrixdynamic (totals)


                        
        
            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);
            });
        
        
            ReactDOM.render(
            <SurveyReact.Survey model={survey}  />, document.getElementById("surveyElement"));
        

                    
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Matrixdynamic (totals), Reactjs Survey Library Example</title>
    
<meta name="viewport" content="width=device-width" />
    <script src="https://unpkg.com/react@17.0.1/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@17.0.1/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone@7.2.5/babel.min.js"></script>
    <script src="/DevBuilds/survey-core/survey.core.min.js"></script>
    <script src="/DevBuilds/survey-core/survey.i18n.min.js"></script>
    <script src="/DevBuilds/survey-react-ui/survey-react-ui.min.js"></script>
    <link href="/DevBuilds/survey-core/modern.min.css" type="text/css" rel="stylesheet" />
    <link rel="stylesheet" href="./index.css">

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

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

</body>
</html>

Tell Us What You Think

Help us serve you better by taking this brief survey.
We are interested to learn more about your
experience of using our libraries.

We'd really appreciate your feedback.

Start the Survey

Approximate time to complete: 2 min.