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

Order Table component


                        

Survey.ComponentCollection.Instance.add({
  name: "ordertable",
  title: "Order Table",
  questionJSON: {
    type: "matrixdropdown",
    columns: [
      {
        name: "price",
        title: "Price",
        cellType: "expression",
        displayStyle: "currency",
      },
      {
        name: "qty",
        title: "Qty",
        cellType: "dropdown",
        optionsCaption: "0",
        choices: [1, 2, 3, 4, 5],
      },
      {
        name: "total",
        title: "Total",
        cellType: "expression",
        displayStyle: "currency",
        expression: "{row.qty} * {row.price}",
        totalType: "sum",
        totalDisplayStyle: "currency",
      },
    ],
  },
  onInit() {
    //Create a new class derived from Survey.ItemValue
    //It hides text, visibleIf and enableIf properties
    //and it adds a new price number property.
    Survey.Serializer.addClass(
      "ordertableitem",
      [
        { name: "price:number", default: 0 },
        { name: "text", visible: false },
        { name: "visibleIf", visible: false },
        { name: "enableIf", visible: false },
      ],
      //We create a standard Survey.ItemValue instance.
      //The third parameter said that the actual type is "ordertableitem"
      //SurveyJS will use properties definition from "ordertableitem" class
      //and it will define "price" property for every new instance
      function () {
        return new Survey.ItemValue(null, null, "ordertableitem");
      },
      "itemvalue"
    );
    //Add orderItems properties. It is an array of ordertableitem elements
    Survey.Serializer.addProperty("ordertable", {
      name: "orderItems:ordertableitem[]",
      category: "general",
      visibleIndex: 3
    });
  },
  onLoaded(question) {
    //Create rows and default values on first loading
    this.updateRowsAndValues(question);
  },
  //Calls on property changed in component/root question
  onPropertyChanged(question, propertyName, newValue) {
    if (propertyName == "orderItems") {
      //Calls when orderItems array is changed:
      //new item is added or existing removed or elements order changed
      //We need to rebuild rows and defaultValues
      this.updateRowsAndValues(question);
    }
  },
  //Calls when a property of ItemValue element is changed.
  onItemValuePropertyChanged(question, options) {
    //If the propertyName of the array is "orderItems"
    if (options.propertyName == "orderItems") {
      //If property name of ItemValue element is "value" then rebuild rows and defaultValues
      if (options.name == "value") {
        this.updateRowsAndValues(question);
      }
      //If property name of ItemValue element is "price" then rebuild defaultValues
      if (options.name == "price") {
        this.setDefaultValues(question);
      }
    }
  },
  //Internal functions: buildRows, setDefaultValues and updateRowsAndValues
  //Create matrix rows using orderItems property
  buildRows(question) {
    var rows = [];
    for (var i = 0; i < question.orderItems.length; i++) {
      var item = question.orderItems[i];
      if (!!item.value) {
        rows.push(item.value);
      }
    }
    question.contentQuestion.rows = rows;
  },
  //Build matrix default value using orderItems property
  setDefaultValues(question) {
    var defaultValue = {};
    for (var i = 0; i < question.orderItems.length; i++) {
      var item = question.orderItems[i];
      if (!!item.value && !!item.price) {
        defaultValue[item.value] = { price: item.price };
      }
    }
    question.contentQuestion.defaultValue = defaultValue;
  },
  updateRowsAndValues(question) {
    this.buildRows(question);
    this.setDefaultValues(question);
  },
});

const options = { questionTypes : ["text", "checkbox", "radiogroup", "dropdown"] };            
                var creator = new SurveyCreator.SurveyCreator(options);
            
                
                    ReactDOM.render(
                    <React.StrictMode>
                        <SurveyCreator.SurveyCreatorComponent creator={creator} />
                    </React.StrictMode>,
                    document.getElementById("creatorElement")
                    );
                
creator.JSON = {
    elements: [
        {
            type: "ordertable",
            name: "question1",
            orderItems: [
                {
                    value: "Steak",
                    price: 27,
                },
                {
                    value: "Salmon",
                    price: 22,
                },
                {
                    value: "Beer",
                    price: 5,
                }
            ]
        }
    ]
};
//Select the order table component
creator.selectedElement = creator.survey.getAllQuestions()[0];
//Show property grid
creator.rightContainerActiveItem("property-grid");
                    
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Order Table component, Survey Creator 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/defaultV2.min.css" type="text/css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.10/ace.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.10/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>
    <!-- Uncomment to enable Select2
    <script src="https://unpkg.com/jquery"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
    -->
        <script src="/DevBuilds/survey-creator-core/survey-creator-core.min.js"></script>
        <link href="/DevBuilds/survey-creator-core/survey-creator-core.min.css" type="text/css" rel="stylesheet" />
        <script src="/DevBuilds/survey-creator-core/survey-creator-core.i18n.min.js"></script>
        <script src="/DevBuilds/survey-creator-react/survey-creator-react.min.js"></script>
        <style>
            :root {
                --tab-min-height: 600px;
            }
        </style>
    <link rel="stylesheet" href="./index.css">

</head>
<body style="margin: 0">
    
<div id="surveyContainer">
            <div id="creatorElement" style="height: 100vh;"></div>
</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.