Databases
StackOverflow2013
Postsdbo
PODependent Kendo Grid with Dynamic Filter Preventing Adding Records
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PODependent Kendo Grid with Dynamic Filter Preventing Adding Records
    primarykey
    data
    text
    <p>Okay, so I have two observable datasources. One uses a model called TestRequest, of which I can have multiples. The other uses a model of TestResult of which multiples can exist for each TestRequest. I have a requestId data item that I am filtering on to populate my dependent grid. With declarative data and a declarative filter everything works fine. If I dynamically set the filter, I can no longer add new records to the filtered datasource. How can I get around this? I was going to set the "foreign" id in a handler on the data source's change event (this is how I maintain client side primary keys just fine). And I can I can tell from my handler that the "add" action is firing, but the editor popup (I am using popup editing on both grids) is not showing? Is there some other magic I need to enable?</p> <p>Let me know if I need to post code and I will put my html and js up on a server for y'all to look at and criticize :)</p> <p>Thanks in advance.</p> <p>Relevant JavaScript:</p> <pre><code>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("&gt;tr[data-uid='"+uid+"']")); }, 100); }, .... .... </code></pre> <p>The HTML:</p> <pre><code>&lt;div id="testsResults"&gt; &lt;h2&gt;Tests/Results&lt;/h2&gt; &lt;fieldset&gt; &lt;legend&gt;Test Requests&lt;/legend&gt; &lt;div id="testRequests"&gt; &lt;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"}]'&gt; &lt;/div&gt; &lt;/div&gt; &lt;/fieldset&gt; &lt;fieldset&gt; &lt;legend&gt;Test Results&lt;/legend&gt; &lt;div id="testResults"&gt; &lt;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"}]'&gt; &lt;/div&gt; &lt;/div&gt; &lt;/fieldset&gt; &lt;/div&gt; </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USMark Lybrand
    1. USMark Lybrand
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COI added as much of the JavaScript and the bound HTML as I thought was necessary. If y'all need more to see where I have gone astray, please let me know :)
      singulars
      1. PODependent Kendo Grid with Dynamic Filter Preventing Adding Records
      1. USMark Lybrand
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload