新しい剣道UIデータソースを既存のものから作成する

同じバックエンドデータを使用する剣道UIコンボボックスは2つありますが、両方に同じ剣道UIデータソースを適用すると、 私は起こりたくない）。新しい剣道UIデータソースを既存のものから作成する

既存のデータソースのデータを新しいデータソースに適用して、1つのサービスコールを保存する方法はありますか。問題を示し

<select runat="server" id="combo1"></select> 
    <select runat="server" id="combo2"></select> 

    <script> 
    var data = [ 
      { title: "Star Wars: A New Hope", year: 1977 }, 
      { title: "Star Wars: The Empire Strikes Back", year: 1980 }, 
      { title: "Star Wars: Return of the Jedi", year: 1983 } 
    ]; 
    var DS1 = new kendo.data.DataSource({ 
      data: data 
    }); 

    $("#combo1").kendoComboBox({ 
      placeholder: "Select", 
      dataValueField: "year", 
      dataTextField: "title", 
      filter: "contains", 
      dataSource: DS1 
    }); 
    $("#combo2").kendoComboBox({ 
      placeholder: "Select", 
      dataValueField: "year", 
      dataTextField: "title", 
      filter: "contains", 
      dataSource: DS1 
    }); 

    </script>

JSビン：http://jsbin.com/likozaluci/edit?html,output

出典

2017-12-11 yogi

これを試してみてください：私の質問への答えでこれjsbinを発見

var data = [ 
 
      { title: "Star Wars: A New Hope", year: 1977 }, 
 
      { title: "Star Wars: The Empire Strikes Back", year: 1980 }, 
 
      { title: "Star Wars: Return of the Jedi", year: 1983 } 
 
    ]; 
 
    var DS1 = new kendo.data.DataSource({ 
 
      data: data 
 
    }); 
 
    
 
    var DS2 = new kendo.data.DataSource({ 
 
      data: data 
 
    }); 
 

 
    $("#combo1").kendoComboBox({ 
 
      placeholder: "Select", 
 
      dataValueField: "year", 
 
      dataTextField: "title", 
 
      filter: "contains", 
 
      dataSource: DS1 
 
    }); 
 
    
 
    $("#combo2").kendoComboBox({ 
 
      placeholder: "Select", 
 
      dataValueField: "year", 
 
      dataTextField: "title", 
 
      filter: "contains", 
 
      dataSource: DS2 
 
    });

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

 
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css"/> 
 
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.rtl.min.css"/> 
 
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.silver.min.css"/> 
 
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/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/2017.3.1026/js/kendo.all.min.js"></script> 
 
</head> 
 
<body> 
 
    
 
<select runat="server" id="combo1"></select> 
 
<select runat="server" id="combo2"></select> 
 
</body> 
 
</html>

出典

2017-12-12 08:12:21 sunwoo

一度テストあなたのコードは、同じ剣道ComboBoxインスタンスを共有するのcuzの、いずれかに入力されたフィルタテキストが自動的に別に入力されます。 – yogi

現在の値の候補を決定するために使用されるフィルタリング方法。したがって、別のデータソースを作成します。私のコードを修正する – sunwoo

、それは他人を助けることを願っています。 .. :)

http://jsbin.com/eDOVEV/2/edit?html,output

<!DOCTYPE html> 
<html> 
<head> 
    <title>KendoUI Test Page</title> 

    <link href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.common.min.css" rel="stylesheet" /> 
    <link href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.default.min.css" rel="stylesheet" /> 
    <link href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.dataviz.min.css" rel="stylesheet" /> 
    <link href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.mobile.all.min.css" rel="stylesheet" /> 

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
    <script src="http://cdn.kendostatic.com/2013.2.918/js/kendo.all.min.js"></script> 
</head> 
<body> 
    <div id="grid"></div> 
    <br /> 
    <div id="grid2"></div> 
    <br /> 
    <div id="grid3"></div> 

    <script> 
     var crudServiceBaseUrl = "http://demos.kendoui.com/service", 
      dataSource = new kendo.data.DataSource({ 
       transport: { 
        read: { 
         url: crudServiceBaseUrl + "/Products", 
         dataType: "jsonp" 
        }, 
        update: { 
         url: crudServiceBaseUrl + "/Products/Update", 
         dataType: "jsonp" 
        }, 
        destroy: { 
         url: crudServiceBaseUrl + "/Products/Destroy", 
         dataType: "jsonp" 
        }, 
        create: { 
         url: crudServiceBaseUrl + "/Products/Create", 
         dataType: "jsonp" 
        }, 
        parameterMap: function(options, operation) { 
         if (operation !== "read" && options.models) { 
          return {models: kendo.stringify(options.models)}; 
         } 
        } 
       }, 
       batch: true, 
       pageSize: 20, 
       schema: { 
        model: { 
         id: "ProductID", 
         fields: { 
          ProductID: { editable: false, nullable: true }, 
          ProductName: { validation: { required: true } }, 
          UnitPrice: { type: "number", validation: { required: true, min: 1} }, 
          Discontinued: { type: "boolean" }, 
          UnitsInStock: { type: "number", validation: { min: 0, required: true } } 
         } 
        } 
       }, 
       change: function() { 
        var data = this.data().toJSON(); 
        dataSource2.data(data); 
        dataSource3.data(data); 
       } 
      }), 
      dataSource2 = new kendo.data.DataSource({ 
       data: [], 
       filter: { field: "ProductName", operator: "startswith", value: "c" } 
      }), 
      dataSource3 = new kendo.data.DataSource({ 
       data: [], 
       filter: { field: "ProductName", operator: "startswith", value: "p" } 
      }); 

     $(document).ready(function() { 

      $("#grid").kendoGrid({ 
       dataSource: dataSource, 
       pageable: true, 
       height: 430, 
       toolbar: ["create"], 
       columns: [ 
        "ProductName", 
        { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "100px" }, 
        { field: "UnitsInStock", title:"Units In Stock", width: "100px" }, 
        { field: "Discontinued", width: "100px" }, 
        { command: ["edit", "destroy"], title: "&nbsp;", width: "172px" }], 
       editable: "inline" 
      }); 

      $("#grid2").kendoGrid({ 
       dataSource: dataSource2, 
       columns: [ 
        "ProductName", 
        { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "100px" } 
       ] 
      }); 

      $("#grid3").kendoGrid({ 
       dataSource: dataSource3, 
       columns: [ 
        "ProductName", 
        { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "100px" } 
       ] 
      }); 
     }); 
    </script> 

</body> 
</html>

出典

2017-12-19 22:43:12 yogi

新しい剣道UIデータソースを既存のものから作成する

答えて

関連する問題