New to Kendo UI for jQuery? Download free 30-day trial

Implement Cascading Cell Editors in the Spreadsheet

Environment

Product Progress Kendo UI for jQuery Spreadsheet

Description

How can I implement cascading cell editors in the Kendo UI for jQuery Spreadsheet?

Solution

To achieve the desired scenario, refer to the following implementation:

    <div id="example">
      <div id="spreadsheet" style="width: 100%;"></div>
      <script>
        $(function() {
          var listOptions = {
            Entree: ['Pizza', 'Calzone'],
            Side: ['Salad', 'Breadsticks'],
          };

          $("#spreadsheet").kendoSpreadsheet({
            change:function(e){

              var sheet = e.sender.activeSheet();
              var rangeValue = e.range.value();
              if(rangeValue === "Side "){
                var rangeToChange = sheet.range("B2");
                rangeToChange.validation({
                  dataType: "list",
                  showButton: true,
                  comparerType: "list",
                  from: JSON.stringify(listOptions.Side).replace('[', '{').replace(']', '}'),
                  allowNulls: true,
                  type: "reject"
                })
                rangeToChange.value(listOptions.Side[0]);
              } else if(rangeValue === " Entree"){
                var rangeToChange = sheet.range("B2");
                rangeToChange.validation({
                  dataType: "list",
                  showButton: true,
                  comparerType: "list",
                  from: JSON.stringify(listOptions.Entree).replace('[', '{').replace(']', '}'),
                  allowNulls: true,
                  type: "reject"
                })
                rangeToChange.value(listOptions.Entree[0]);
              }
            },
            sheets: [
              {
                name: "Food Order",
                rows: [
                  {
                    height: 25,
                    cells: [
                      {
                        value: "Product Type", background: "rgb(167,214,255)", textAlign: "center", color: "rgb(0,62,117)"
                      },
                      {
                        value: "Product", background: "rgb(167,214,255)", textAlign: "center", color: "rgb(0,62,117)"
                      },
                    ]
                  },
                  {
                    cells: [
                      {
                        value: "Entree", background: "rgb(255,255,255)", color: "rgb(0,62,117)",
                        validation: {
                          dataType: "list",
                          showButton: true,
                          comparerType: "list",
                          from: '{ "Entree", "Side" }',
                          allowNulls: true,
                          type: "reject"
                        }
                      },
                      {
                        value: "Calzone", background: "rgb(255,255,255)", color: "rgb(0,62,117)",
                        validation: {
                          dataType: "list",
                          showButton: true,
                          comparerType: "list",
                          from: JSON.stringify(listOptions.Entree).replace('[', '{').replace(']', '}'),
                          allowNulls: true,
                          type: "reject"
                        }
                      },
                    ]
                  },
                ],
                columns: [
                  {
                    width: 215
                  },
                  {
                    width: 215
                  },
                ]
              }
            ]
          });
        });

      </script>
    </div>

See Also

In this article