【问题标题】:Kendo Multiselect i want to have 1 DataSource for the selecting options and 1 for the selected optionsKendo Multiselect 我想要 1 个 DataSource 用于选择选项,1 个用于所选选项
【发布时间】:2023-01-29 20:39:41
【问题描述】:

所以基本上我有一个剑道多选,我使用数据源来显示选项,但我想向用户显示一些基于另一个数据源的预选选项。

$("#multiselect").kendoMultiSelect({
   dataTextField: "text",
   dataValueField: "value",
   dataSource: dataforselection
   value: [],
   valuePrimitive: true,
   autoBind: false,
});

所以我想怎么填价值与另一个数据源? 所以我可以向预选数据源添加或删除项目。

预选数据源有一些与数据选择相同的属性

【问题讨论】:

    标签: javascript kendo-ui


    【解决方案1】:

    准备好来自两个数据源的数据后,创建一个包含这两个数据源的新数据源。然后使用这个组合的数据源作为多选的数据源和选择的数据源作为值,就像这样:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8"/>
        <title>Kendo UI Snippet</title>
    
        <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2023.1.117/styles/kendo.default-v2.min.css"/>
    
        <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
        <script src="https://kendo.cdn.telerik.com/2023.1.117/js/kendo.all.min.js"></script>
    </head>
    <body>
      
    <select id="multiselect" multiple="multiple"></select>
    <script>
    let dataSourceForSelection = [{
        text: "text1",
        value: "1"
    }, {
        text: "text2",
        value: "2"
    }, {
        text: "text3",
        value: "3"
    }];
    
    let selectedDataSource = [{
        text: "text4",
        value: "4"
    }, {
        text: "text5",
        value: "5"
    }];
    
    let combinedDataSource = [...dataSourceForSelection, ...selectedDataSource];
    
    $("#multiselect").kendoMultiSelect({
        dataTextField: "text",
        dataValueField: "value",
        dataSource: combinedDataSource,
        value: selectedDataSource,
        deselect: function(e) {
          if (selectedDataSource.some((entry) => entry.value === e.dataItem.value)) {
            e.preventDefault();
          }
        }
    });
    </script>
    </body>
    </html>

    【讨论】:

    • 是的,但我不想将 selectedDatasource 添加到 selectionDatasource 。假设 selectedDatasource 将始终是 selection datasource 的一部分。我只想从选定的数据源中添加或删除对象,然后再次将其发送回服务器和客户端
    • 因此,您需要用户无法取消选择任何预选选项吗?
    • 我更新了代码 sn-p 以防止用户取消选择预选条目
    猜你喜欢
    • 1970-01-01
    • 2017-05-23
    • 2020-08-23
    • 1970-01-01
    • 2022-01-07
    • 2016-09-02
    • 2013-02-24
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多