Order Form Grid Template


    name: "ordergrid",
    title: "Order Grid",
    questionJSON: {
        type: "matrixdynamic",
        defaultRowValue: { qty: 1 },
        rowCount: 1,
        addRowText: "Add Item",
        columns: [
            name: "id",
            title: "Id",
            cellType: "expression",
            expression: "{rowIndex}",
            name: "item",
            title: "Item Name",
            cellType: "dropdown",
            isRequired: true,
            totalType: "count",
            totalFormat: "Items count: {0}",
            name: "price",
            title: "Price",
            cellType: "expression",
            displayStyle: "currency",
            name: "qty",
            title: "Qty",
            cellType: "text",
            inputType: "number",
            name: "total",
            title: "Total",
            cellType: "expression",
            displayStyle: "currency",
            expression: "{row.qty} * {row.price}",
            totalType: "sum",
            totalDisplayStyle: "currency",
    onInit() {
        //Add "price" property to base "itemvalue" class
        //It will allow us to set our order items into dropdown choices
        //without loosing the price property value
        Survey.Serializer.addProperty("itemvalue", {
          name: "price:number",
          visible: false
        //Create a new class derived from Survey.ItemValue
        //It hides text, visibleIf and enableIf properties
        //and makes price property visible for "ordergriditem" class only.
              name: "price:number",
              default: 0,
              visible: true,
              isSerializable: true,
              { 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 "ordergriditem"
          //SurveyJS will use properties definition from "ordergriditem" class
          //and it will define "price" property for every new instance
          function () {
              return new Survey.ItemValue(null, null, "ordergriditem");
        //Add orderItems properties. It is an array of ordergriditem elements
        Survey.Serializer.addProperty("ordergrid", {
          name: "orderItems:ordergriditem[]",
          category: "general",
          visibleIndex: 3
    onCreated(question) {
        //The options parameter of this callback function is same as options property survey.onMatrixCellValueChanged event
        //We need to set price on changing the item
        question.contentQuestion.onCellValueChangedCallback = function (options) {
          //If cell in column 'item' is changed
          if (options.columnName == "item") {
              //get price question in this row
              var priceQuestion = options.row.getQuestionByColumnName("price");
              //get item question in this row
              var itemQuestion = options.row.getQuestionByColumnName("item");
              if (!!priceQuestion && !!itemQuestion) {
                //Set price to the price question value
                priceQuestion.value =
                    itemQuestion.selectedItem != null
                    ? itemQuestion.selectedItem.price
                    : 0;
      //The options parameter of this callback function is same as options property survey.onMatrixCellCreated event
      //We need to set min/max properties for qty number question
      question.contentQuestion.onCellCreatedCallback = function (options) {
        if (options.columnName == "qty") {
            options.cellQuestion.min = 1;
            options.cellQuestion.max = 20;
    onLoaded(question) {
        //Set choices to the 'item' column on first loading
    //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
    //Calls when a property of ItemValue element is changed.
    onItemValuePropertyChanged(question, options) {
        //If the propertyName of the array is "orderItems"
        if (options.propertyName == "orderItems") {
    //Set choices to the 'item' column
    updateItemsColumn(question) {
        question.contentQuestion.getColumnByName("item").choices =

const options = { questionTypes : ["text", "checkbox", "radiogroup", "dropdown"] };            
                var creator = new SurveyCreator.SurveyCreator(options);
                        <SurveyCreator.SurveyCreatorComponent creator={creator} />
creator.JSON = {
    elements: [
            type: "ordergrid",
            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
<!DOCTYPE html>
<html lang="en">
    <title>Order Form Grid Template | Reactjs 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>
        <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>
            :root {
                --tab-min-height: 600px;
    <link rel="stylesheet" href="./index.css">

<body style="margin: 0">
<div id="surveyContainer">
            <div id="creatorElement" style="height: 100vh;"></div>

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

Sorry, we can't retrieve the data from server. Please comeback later.

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.