Buy Licenses Contact Support Login/Register
v 1.7.19
v 1.7.19
Overview Survey Creator Examples Docs Source Download

Order grid component

Order grid component using matrix dynamic


    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,
          isSerializable: 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 =
            var creatorOptions = { };
            var creator = new SurveyCreator.SurveyCreator("creatorElement", creatorOptions);
            creator.showToolbox = "right";
            creator.showPropertyGrid = "right";
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 grid component using matrix dynamic, Survey Creator Example</title>

<meta name="viewport" content="width=device-width" />
    <script src=""></script>
<script src="/DevBuilds/packages/survey-knockout/survey.ko.js"></script>
    <script src="" type="text/javascript" charset="utf-8"></script>
    <script src="" type="text/javascript" charset="utf-8"></script>
    <!-- Uncomment to enable Select2
    <script src=""></script>
    <link href="" rel="stylesheet" />
    <script src=""></script>
    <link href="/DevBuilds/build/survey-creator.css" type="text/css" rel="stylesheet" />
    <script src="/DevBuilds/build/survey-creator.js"></script>
    <link rel="stylesheet" href="">
    <link rel="stylesheet" href="./index.css">

    To learn more about "ordergrid" component please read <a href="/Documentation/Survey-Creator?id=Build-Component-Questions#order-grid-example"  target="_blank">our documentation</a>
</div>    <div id="surveyContainer">
        <div id="creatorElement"></div>

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