기존 Kendo UI 데이터 소스를 새로 만듭니다.

두 개의 검도 UI 데이터 상자를 동일한 검도 UI 데이터 상자로 사용하지만 동일한 검도 UI 데이터 소스를 두 필터에 모두 적용한 경우 두 번째 필터도 완료됩니다. 나는 그것을 원하지 않는다.).기존 Kendo UI 데이터 소스를 새로 만듭니다.

하나의 서비스 호출을 저장할 수 있도록 기존 데이터 소스의 데이터를 새로운 데이터 소스에 적용 할 수있는 방법이 있습니까? 문제를 보여줍니다

<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

이 시도 :

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

테스트 코드는 한 번, 같은 검도 콤보 인스턴스를 공유 사촌, 하나의 입력 필터 텍스트는 자동으로 다른에 입력됩니다. – yogi

현재 값에 대한 제안 사항을 결정하는 데 사용되는 필터링 방법입니다. 그래서 다른 데이터 소스를 만듭니다. 내 코드를 고치다. – sunwoo

, 내 질문에 대한 대답이 jsbin 발견은 다른 사람을 도움이되기를 바랍니다. .. :)

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

기존 Kendo UI 데이터 소스를 새로 만듭니다.

답변

관련 문제