Strategy

To achieve tutorial objectives we'll use project from View & Referential Lists and make few changes.

Develop (or extend):

EntityRepository

Update entity repository with following code:

//Loads reference records based on key value
if (!string.IsNullOrEmpty(searchQuery.key))
{
       Nullable<Guid> keyGuid = null;
       try
       {
            keyGuid = Guid.Parse(searchQuery.key);
       }
       catch { }

       if (keyGuid != null)
       {
             query = query.Where(l => l.CategoryId == keyGuid);
       }
}

Knockout View Template

Refer project code here.

WindnTrees Views Script

Develop and integrate multiple referenced views as following:

//main view
var categoryView = new CRUDView({
     'uri': '/category', //service uri address
     'observer': new CRUDObserver({ 'contentType': new Category({}), 'messages': intialize(new MessageRepository()) }), // observer
     'views': new ListObserver({ object: new ObjectObserver({}) }) //listobserver and object observer hosts referenced views
});

//referenced view
var topicView = new CRUDView({
     'key': 'topic-view',
     'uri': '/topic', //service uri address
     'objectkey': null, //set key here to reference records
     'keyfield': 'CategoryId', //set key field that is required to be updated automatically while storing new records
     'observer': new CRUDObserver({ 'contentType': new Topic({}), 'messages': intialize(new MessageRepository()) }), // observer
     'fields': [{
                    'uri': '/skilllevel', // server side CRUDController uri address
                    'target': 'List', // CRUDController function that you want to invoke to get list results
                    'field': 'SkillLevelsList', // CRUDObserver will be extended with SkillLevelsList list observable (ko.observableArray)
                    'key': 'Title', // key (display) field bound with dropdown list
                    'value': 'Uid' // value field bound with dropdown list
                }]
});
    
//select reference topics
categoryView.getObserverObject().selectTopics = function (category) {

//set reference key
topicView.setObjectKey(category.Uid);

//load reference records
topicView.list(1);
};

//adds referential (topic) view in category view
categoryView.getReferentialViews().newItem({ 'object': topicView });

//Extends related observable fields like 'SkillLevelsList'
topicView.ExtendFields();

$(function () {

    try {
                //binds main view's observer object with document node
                ko.applyBindings(categoryView.getObserverObject(), document.getElementById('ko-node-element'));
        }
        catch (e) {

               console.log(e.message);
        }

         //loads reference lists
         topicView.LoadFields();

         //loads category view
         categoryView.load();
});

WindnTrees CRUDviews are smart and intelligent that can be referenced to multiple CRUD sources integrated together to display master detail records. Like in this example Category have many Topics referenced through Category primary key, display referential records.

Referential view can be setup by parameterizing primary key using objectkey parameter or calling setObjectKey method.

Note:

'keyfield': 'CategoryId' is updated automatically during saving and resets. If you need to update additional reference keys with values automatically,

use:

setObjects( { 'field': 'field_name', 'object': 'field_value' } ); //for single reference field and object value
setObjects( [{ 'field': 'field1', 'object': 'object1' }, { 'field': 'field2', 'object': 'object2' }] ); //for multiple reference fields and object values

HTML View

Refer project code here.

Summary

WindnTrees CRUDS provide efficient means of developing master detail referential views that allow view based CRUD operations either individual or in referenced configuration. Programmers can script views to interact with each other and develop a chain of referenced distributed views. Download project code here. Run (or load) CategoryTopics page to see implementation.