Erstelle eine neue Kendo UI DataSource aus einer bestehenden

Ich habe zwei Kendo UI Combo-Boxen, die dieselben Backend-Daten verwenden, aber wenn ich dieselbe Kendo UI DataSource auf beide anwende, dann filtere auf einen Filter zweitens auch (was ich nicht passieren möchte).Erstelle eine neue Kendo UI DataSource aus einer bestehenden

Gibt es eine Möglichkeit, Daten der vorhandenen Datenquelle in neue Datenquelle anzuwenden, so dass ich einen Serviceanruf speichern kann.

<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 bin, der das Problem zeigt: http://jsbin.com/likozaluci/edit?html,output

Quelle

2017-12-11 yogi

Versuchen Sie folgendes:

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>

Quelle

2017-12-12 08:12:21 sunwoo

Test Code einmal, Cuz gleiche Kendo Combobox Instanz teilen, Filtertext in einem eingegeben wird in eine andere automatisch eingegeben. – yogi

Die Filtermethode, mit der die Vorschläge für den aktuellen Wert ermittelt werden. Also machst du eine andere Datenquelle. behebe meinen Code – sunwoo

Fand dieses jsbin mit Antwort auf meine Frage, hoffen, dass es andere helfen. .. :)

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>

Quelle

2017-12-19 22:43:12 yogi

Erstelle eine neue Kendo UI DataSource aus einer bestehenden

Antwort

Verwandte Themen