Referential and Distributed Views


In this tutorial we'll learn to develop referential distributed (master-detail) views that are contextually independent, scoped and integrated. Views perform their CRUD operations independently and load reference records based on keys.

Keywords: WindnTrees,CRUD,CRUDS,CRUD2CRUD,Referential Views,Distributed Views
  • Strategy

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

    Develop (or extend):

    1. EntityRepository
    2. Knockout view templates
    3. Script and reference multiple (WindnTrees) views
    4. HTML view


    Update entity repository with following code:

    //Loads reference records based on key value
    if (!string.IsNullOrEmpty(searchQuery.key))
           Nullable<Guid> keyGuid = null;
                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
    //load reference records
    //adds referential (topic) view in category view
    categoryView.getReferentialViews().newItem({ 'object': topicView });
    //Extends related observable fields like 'SkillLevelsList'
    $(function () {
        try {
                    //binds main view's observer object with document node
                    ko.applyBindings(categoryView.getObserverObject(), document.getElementById('ko-node-element'));
            catch (e) {
             //loads reference lists
             //loads category view

    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,


    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.