kendoComboBox Cascade от нескольких родителей - PullRequest
Новая
       14

kendoComboBox Cascade от нескольких родителей

0 голосов
/ 05 февраля 2019

Как я могу каскадироваться от нескольких родителей в kendoComboBox kendoUi?

скажем, я должен использовать родительские списки;comboBoxA: [A, B, C, D] и comboBoxB: [1,2,3,4], а каскад из поля 'desc' в обоих выпадающих списках вернет [A, B, C, D, 1,2,3,4] 

$('#comboBoxChild').kendoComboBox({
 cascadeFrom: ??
});

1 Ответ

0 голосов
/ 06 февраля 2019

Следующий код взят из официальной демонстрационной программы Kendo UI Jquery, которая ясно демонстрирует каскадный кендо ComboBox. 

var categories = $("#categories").kendoComboBox({
    filter: "contains",
    placeholder: "Select category...",
    dataTextField: "CategoryName",
    dataValueField: "CategoryID",
    dataSource: {
        type: "odata",
        serverFiltering: true,
        transport: {
            read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Categories"
        }
    }
}).data("kendoComboBox");

var products = $("#products").kendoComboBox({
    autoBind: false,
    cascadeFrom: "categories",
    filter: "contains",
    placeholder: "Select product...",
    dataTextField: "ProductName",
    dataValueField: "ProductID",
    dataSource: {
        type: "odata",
        serverFiltering: true,
        transport: {
            read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
        }
    }
}).data("kendoComboBox");

var orders = $("#orders").kendoComboBox({
    autoBind: false,
    cascadeFrom: "products",
    filter: "contains",
    placeholder: "Select order...",
    dataTextField: "Order.ShipCity",
    dataValueField: "OrderID",
    dataSource: {
        type: "odata",
        serverFiltering: true,
        transport: {
            read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Order_Details?$expand=Order"
        }
    }
}).data("kendoComboBox");

Обновлено:

Скопируйте приведенный ниже код вhttps://dojo.telerik.com/ для запуска демонстрации.

Каскадный кендо ComboBox от нескольких родителей! 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.rtl.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.silver.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.mobile.all.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2019.1.115/js/kendo.all.min.js"></script>
</head>
<body>

    supplier: <select id="suppliers"></select>
    product: <select id="products"></select>
    <script>
      $(function() {
        var productsDataSource = new kendo.data.DataSource({
          type: "odata",
          serverFiltering: true,
          transport: {
            read: {
              url: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products",
            },
            parameterMap: function(data) {
              return kendo.data.transports.odata.parameterMap.call(this, data);
            }
          }
        });

        $("#products").kendoMultiSelect({
          autoBind: false,
          dataTextField: "ProductName",
          dataValueField: "ProductID",
          dataSource: productsDataSource
        });

        $("#suppliers").kendoMultiSelect({
          autoBind: false,
          dataTextField: "CompanyName",
          dataValueField: "SupplierID",
          dataSource: {
            type: "odata",
            serverFiltering: true,
            transport: {
              read: {
                url: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Suppliers"
              }
            }
          },
          change: function() {
            var filters = buildFilters(this.dataItems());
            productsDataSource .filter(filters);
          }
        });

        function buildFilters(dataItems) {
          var filters = [],
              length = dataItems.length,
              idx = 0, dataItem;

          for (; idx < length; idx++) {
            dataItem = dataItems[idx];

            filters.push({
              field: "SupplierID",
              operator: "eq",
              value: parseInt(dataItem.SupplierID)
            });
          }

          return {
            logic: "or",
            filters: filters
          };
        }
      });
    </script>
</body>
</html>
...