依賴Kendo網格與動態過濾器防止添加記錄

Question

好吧，所以我有兩個可觀察的數據源。一個使用稱爲TestRequest的模型，其中我可以有多個。另一個使用TestResult的模型，其中可以存在每個TestRequest的倍數。我有一個requestId數據項目，我正在過濾填充我的依賴網格。使用聲明性數據和聲明性篩選器，一切正常。如果我動態設置過濾器，我不能再向過濾的數據源添加新記錄。我怎樣才能解決這個問題？我打算在數據源的更改事件的處理程序中設置「外部」標識（這是我如何維護客戶端主鍵就好）。我可以從我的處理程序中知道「添加」操作正在觸發，但編輯器彈出窗口（我在兩個網格上使用彈出窗口編輯）未顯示？我需要啓用其他一些魔法嗎？

讓我知道如果我需要張貼代碼，我會把我的HTML和JS一臺服務器上你們都來看看，批評:)提前

感謝。

相關的JavaScript：

var TestRequest = kendo.data.Model.define({ 
    id: "Id", 
    fields: { 
     "accessionNumber": { type: "string" }, 
     "specimenCollectionDate": { type: "date" }, 
     "specimenReceivedDate": { type: "date" }, 
     "resultReportDate": { type: "date" }, 
     "testDescription": { type: "string" }, 
     "relevantClincalInfo": { type: "string" }, 
     "specimenSource": { type: "string" }, 
     "resultStatus": { type: "string" }, 
     "reasonForTest": { type: "string" }, 
     "comments": { type: "string" } 
    } 
}); 

var testRequestDataSource = new kendo.data.DataSource({ 
    schema: { 
     model: TestRequest 
    } 
}); 

testRequestDataSource.bind("change", function(e) { 
    if (e.action === "add") { 
     e.items[0].dirty = true; 
     kendo.data.ObservableObject.fn.set.call(e.items[0], "Id", viewModel.testsResults.nextRequestId); 
     viewModel.testsResults.nextRequestId++; 
    } 
}); 

var TestResult = kendo.data.Model.define({ 
    id: "Id", 
    fields: { 
     "requestId": { 
      type: "number", 
      editable: false 
     }, 
     "foo": { 
      type: "string" 
     } 
    } 
}); 

var testResultDataSource = new kendo.data.DataSource({ 
    data: [ 
     { 
      Id: 1, 
      requestId: 1, 
      foo: "bar" 
     }, 
     { 
      Id: 2, 
      requestId: 1, 
      foo: "baz" 
     }, 
     { 
      Id: 3, 
      requestId: 2, 
      foo: "beep" 
     } 
    ], 
    schema: { 
     model: TestResult 
    }, 
    filter: { 
     "field": "requestId", 
     "operator": "eq", 
     "value": 0 
    } 
}); 

testResultDataSource.bind("change", function(e){ 
    if (e.action === "add") { 
     e.items[0].dirty = true; 
     kendo.data.ObservableObject.fn.set.call(e.items[0], "Id", viewModel.testsResults.nextResulttId); 
     viewModel.testsResults.nextResultId++; 
    } 
}); 

var viewModel = kendo.observable({ 
    ... 
    testsResults: { 
     nextRequestId: 1, 
     nextResultId: 4, 
     testRequests: testRequestDataSource, 
     testResults: testResultDataSource, 
     testRequestChange: function() { 
      var selectedItems =testRequestGrid.select(); 
      var selectedRow = $(selectedItems[0]); 
      var selectedUid = selectedRow.data("uid"); 
      var selectedData = testRequestGrid.dataSource.getByUid(selectedUid); 
      var requestId = selectedData.id; 
      this.testsResults.testResults.filter({ 
       "field":"requestId", 
       "operator":"eq", 
       "value": requestId 
      }); 
     }, 
     testRequestEdited: function(e) { 
      var uid = e.model.uid; 
      // TODO: fix below code to use callback or better event 
      setTimeout(function() { 
       testRequestGrid.select(testRequestGrid.tbody.find(">tr[data-uid='"+uid+"']")); 
      }, 100); 
     }, 
     .... 

.... 

的HTML：

<div id="testsResults"> 
    <h2>Tests/Results</h2> 
    <fieldset> 
     <legend>Test Requests</legend> 
     <div id="testRequests"> 
      <div data-role="grid" 
       data-bind="source: testsResults.testRequests, events: { change: testsResults.testRequestChange, save: testsResults.testRequestEdited }" 
       data-editable="popup" 
       data-selectable="true" 
       data-toolbar='["create"]' 
       data-columns='[{"field":"accessionNumber","title":"Accession #"}, 
           {"field":"specimenCollectionDate", "title":"Specimen Collection Date", "hidden":"true"}, 
           {"field":"specimenReceivedDate", "title":"Specimen Received Date", "hidden":"true"}, 
           {"field":"resultReportDate", "title":"Result Report Date", "hidden":"true"}, 
           {"field":"testDescription","title":"Test Description"}, 
           {"field":"relevantClinicalInfo", "title":"Relevant Clinical Information", "hidden":"true"}, 
           {"field":"specimenSource","title":"Specimen Source", "hidden":"true"}, 
           {"field":"resultStatus","title":"Result Status","hidden":"true"}, 
           {"field":"reasonForTest","title":"Reason For Test", "hidden":"true"}, 
           {"field":"comments","title":"Comments","hidden":"true"}, 
           {"command":["edit","destroy"], "title":" ", "width":"170px"}]'> 
      </div> 
     </div> 
    </fieldset> 
    <fieldset> 
     <legend>Test Results</legend> 
     <div id="testResults"> 
      <div data-role="grid" 
       data-bind="source: testsResults.testResults" 
       data-editable="popup" 
       data-selectable="true" 
       data-toolbar='["create"]' 
       data-columns='[{"field":"requestId","title": "Test Request ID", "hidden":"true"}, 
           {"field":"foo", "title":"Foo"}, 
           {"command":["edit","destroy"], "title":" ", "width":"170px"}]'> 
      </div> 
     </div> 
    </fieldset> 
</div> 

Answer 1

耶！我可以回答我自己的問題。問題是新記錄與過濾器不匹配，所以編輯彈出窗口無法顯示。我在數據源的更改事件處理程序中添加了缺失的部分，並且所有工作都很漂亮：

testResultDataSource.bind("change", function(e){ 
    if (e.action === "add") { 
     e.items[0].dirty = true; 
     kendo.data.ObservableObject.fn.set.call(e.items[0], "Id", viewModel.testsResults.nextResulttId); 
     var filters = this.filter().filters; 
     var requestId = filters[0].value; 
     kendo.data.ObservableObject.fn.set.call(e.items[0], "requestId", requestId); 
     viewModel.testsResults.nextResultId++; 
} 

}）;