검도 UI 그리드를 두 번 이상 추가합니다.

Question

나는 행 ID를 가져 와서 다른 그리드를로드하는 다른 함수로 전달하는 change row 이벤트에 대해 검도 UI 그리드를 사용합니다. 나는이 같은 오류를 알아내는 작업을 단순화하려고 노력했다.

HTML 코드

<input type="button" id="load-first" value="Load 108" />  
<input type="button" id="load-second" value="Load 92" /> 

자바 스크립트

$("#load-first").click(function(){ 
    loadEmailGrid(108); 
}); 
$("#load-second").click(function(){ 
    loadEmailGrid(92); 
}); 

    function loadEmailGrid(salesRepsId) { 
     dataSource = new kendo.data.DataSource({ 
      transport: { 
       read: { 
        url: "operations/get_emails_sales_reps.php?salesRepsId=" + salesRepsId, 
        type: "GET" 
       }, 
       update: { 
        url: "operations/edit_email.php?salesRepsId=" + salesRepsId, 
        type: "POST", 
        complete: function (e) { 
         $("#email-grid").data("kendoGrid").dataSource.read(); 
        } 
       }, 
       destroy: { 
        url: "operations/delete_email.php", 
        type: "POST", 
        complete: function (e) { 
         $("#email-grid").data("kendoGrid").dataSource.read(); 
        } 
       }, 
       create: { 
        url: "operations/add_email.php?salesRepsId=" + salesRepsId, 
        type: "POST", 
        complete: function (e) { 
         $("#email-grid").data("kendoGrid").dataSource.read(); 
        } 
       }, 
      }, 
      schema: { 
       data: "data", 
       total: "data.length", //total amount of records 
       model: { 
        id: "EmailId", 
        fields: { 
         EmailType: { 
          defaultValue: { 
           EmailTypeId: 2, 
           EmailTypeName: "Home" 
          } 
         }, 
         EmailText: { 
          type: "string" 
         }, 
         IsMainEmail: { 
          type: "boolean" 
         }, 
        } 
       } 

      }, 
      pageSize: 5, 
     }); 
     //dataSource.sync(); 
     $("#email-grid").kendoGrid({ 
      dataSource: dataSource, 
      height: 250, 
      filterable: true, 
      sortable: true, 
      pageable: true, 
      reorderable: false, 
      groupable: false, 
      batch: true, 
      navigatable: true, 
      toolbar: ["create", "save", "cancel"], 
      editable: true, 
      columns: [{ 
       field: "EmailType", 
       title: "Type", 
       editor: EmailTypeDropDownEditor, 
       template: "#=EmailType.EmailTypeName#", 
       filterable: { 
        extra: false, 
        field: "EmailType.EmailTypeName", 
        operators: { 
         string: { 
          startswith: "Starts with", 
          eq: "Is equal to", 
          neq: "Is not equal to" 
         } 
        } 
       } 
      }, { 
       field: "EmailText", 
       title: "Email", 

      }, { 
       field: "IsMainEmail", 
       title: "Main?", 
       width: 65, 
       template: function (e) { 
        if (e.IsMainEmail == true) { 
         return '<img align="center" src ="images/check-icon.png" />'; 
        } else { 
         return ''; 
        } 
       } 
       // hidden: true 

      }, { 
       command: "destroy", 
       title: "&nbsp;", 
       width: 90 
      }, 

      ] 
     }); 
    } 

반환 add_email.php

[{ "EMAILID": (200)}]의 예

경우 나는 g를 적재한다. 예를 들어 하나의 ID로 제거하면로드 108 버튼을 클릭합니다. 추가 작업이 완벽하게 작동합니다. 하지만 두 개의 버튼을 클릭하여 믹스하면됩니다. 즉 다른 ID (들)로 그리드를로드 클릭 한 버튼 id를 사용하여 이전 id와 다른 id를 여러 번 호출하는 add 함수. 더 믹스 버튼 사이를 클릭하면 추가 기능이 추가됩니다.

이것은 문제를 보여주는 link입니다.

제발, 어떻게 해결할 수 있습니까? 나는 운이없는 많은 것을 시도했다.

Answer 1

당신은 데이터 소스를 혼합 할 수 있도록 전역 변수를 사용한다.

변경

dataSource = new kendo.data.DataSource({... 

var dataSource = new kendo.data.DataSource({... 

하고 다시 시도

합니다.

는 편집 :

는 스크립트 코드로 이것을 시도.

http://jsfiddle.net/blackjim/9LHW5

당신이해야 할 중요한 것은 전송 옵션의 변화와 함께, 그리드의 초기화를 분리하는 것입니다. 예를 들어

:

function loadDatasourceWithId(salesRepsId){ 
    var dataSourceOptions = dataSource.options; // find somehow the dataSource options 
    dataSourceOptions.transport.read.url = "operations/get_emails_sales_reps.php?salesRepsId="+salesRepsId; 
    dataSourceOptions.transport.update.url = "operations/edit_email.php?salesRepsId="+salesRepsId; 
    dataSourceOptions.transport.create.url = "operations/add_email.php?salesRepsId="+salesRepsId 

    datasource.read(); // read again to get new values to your dataSource 
}