Matrixdynamic (totals)


                        
        
            Survey.StylesManager.applyTheme("defaultV2");
        

//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,
          cellType:  "dropdown",
          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}",
          min: 1,
          max:  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);
            });
        
        
            $("#surveyElement").Survey({
            model: survey 
            });
        

                    
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Matrixdynamic (totals), jQuery Survey Library Example</title>
    
<meta name="viewport" content="width=device-width" />
    <script src="https://unpkg.com/jquery"></script>
    <script src="/DevBuilds/survey-jquery/survey.jquery.min.js"></script>
    <link href="/DevBuilds/survey-core/defaultV2.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/javascript" src="./index.js"></script>

</body>
</html>

Why we use cookies.

This site uses cookies to make your browsing experience more convenient and personal. Cookies store useful information on your computer to help us improve the efficiency and relevance of our site for you. In some cases, they are essential to making the site work properly. By accessing this site, you consent to the use of cookies.

For more information, refer to DevSoft Baltic’ privacy policy and cookie policy.