dependentFieldId setup

[Steve Fazekas]

Joel & all,

Here is a general gist of the filtered columns selectors setup I have.  Use JSBeautifier to clean this up a for a prettier view.

The basic setup of my rendering was for an Entity View / Table View model in a .NET application, so the configuration would use the lookups of tables and columns to create the views in my application.  By the use of this design, we could dynamically create a multitude of views based on who was looking at the tables / columns.

I have not included everything in my overview, but those of you who want to really get this working, you will probably not need the rest of the code to get a basic working version going.  My version worked with JSON data for both defined columns and rows that came back from .NET webservice calls, so I could create any grid with different columns and filter them with dependent column selections.

Cheers,

Steve Fazekas
sfaz...@act1.net

PS. I receive a daily digest at the end of the day / early morning EST, so feel free to email me direct.  I usually do not have time to pursue independent projects, so please don't contact me about projects except looking for a solution in SlickGrid which I have mentioned in one of my posts.

---

Your own grid w/DataView setup may be different and so on...

I used Mustache Templates plugin to use with my JSON data and HTML templating to return the rendered <select> lists I needed.

Lookups are pre-set options available as JSON data for all kinds of options that a grid or a form will use later on when the grid is actually loaded.  this is the key to the entire operation.  Download all filtered columns data first and utilize those as lookups.

// This makes sure we do not overwrite the original values

var lookupVal = $.parseJSON(str(eval("lookups['"+lookupId+"']")));

Whereas lookups are all dropped into a JSON data variable for easy access:

var lookups = {

// this is the basic format, but you can choose your own style

// lookupVal = {"optionVals":[{"optVal":"0","optText":"Select parent option"}]};

   "lookup_20" = [

      {"optionVal":"1", "optionText": "1 finger"}, {"optionVal":"2", "optionText": "2 fingers"}

   ]

}

In my grid setup, I have several options added for header updates:

        grid.onColumnsResized.subscribe(function(e, args){
            updateHeaderRow();
        });
        grid.onColumnsReordered.subscribe(function(e, args){
            updateHeaderRow();
        });

After my DataView is set, I do an initial call:

dataView.endUpdate();
updateHeaderRow();
     

Here's the basis for the function call:

        // add header names to grid
        function updateHeaderRow(){
                tick('header row filters',0,1,null,null);
                log("updateHeaderRow");
               
                for (var i = 0; i < columns.length; i++) {
                        if (columns[i].id !== "selector") {
                                var col = columns[i];
                                var columnId=col.id;
                                var header = grid.getHeaderRowColumn(columnId);
                                $(header).empty();
                                if (i > 0) {
                                        $(header).addClass('Pad0');
                                };
                                var inp = $("<input type='text'>");
                               
                                var lookup = columns[i].lookup;  // I added this attribute to the column definition for data to be rendered for the select list
                                if (lookup) {
                                        // set new options JSON value
                                        var lookupId=lookup.lookup_id;
                                        var lookupVal = $.parseJSON(str(eval("lookups['"+lookupId+"']")));

                                        var sortBy='optText';
                                        if(lookupVal.sortBy){sortBy=lookupVal.sortBy};
                                        lookupVal.optionVals=sortJSON(lookupVal.optionVals, sortBy, true);

                                        var depFieldId = col.dependentFieldId;
                                        var depFieldInfo='';
                                        var depFormFieldId = col.dependentFormFieldId;
                                        // log("columnId: "+columnId+" depFieldId: "+depFieldId+" depFormFieldId: "+depFormFieldId);
                                        if(depFieldId){
                                            depFieldInfo=' dependentFieldId="'+depFieldId+'"';
                                        };

                                        // if column def has "depFieldId" for filter column, use this to parse lookup based on its value;
                                        if(depFieldId){
                                            /* filter fields should be set empty intially */;
                                            var EntityObj = $('.slick-headerrow-columns :input[name="'+depFieldId+'"]');
                                            EntityObj.change(function(){
                                                updateDependentFields($(this));
                                            });

                                            lookupVal = {"optionVals":[{"optVal":"0","optText":"Select parent option"}]};
                                        };

                                        selectHTML = JSONtoHTML(lookupVal, 'optionValsEnabled');
                                        inp = $("<select name='"+columnId+"' "+depFieldInfo+" lookup='"+lookupId+"' class='"+columnId+" H20 F11 Marg3 W90PCT' size=1>" + selectHTML + "</select>");
                                };
                                inp.data("columnId", columns[i].id).val(columnFilters[columns[i].id]).appendTo(header);

                        }
                }
        }


// parent change checks for dependent selectors,
// triggers the new lookup options based on its value
var updateDependentFields = function(parentObj){
    log("updateDependentFields");
    var fieldName = parentObj.attr('name');
    var fieldVal = parentObj.val();
    var fieldText = parentObj.find('OPTION:selected').text();
    var fieldTables = parentObj.find('OPTION:selected').attr('tables');
    log("updateDependentFields: field="+fieldName+" val="+fieldVal+" text="+fieldText);
    // either in viewdef grid or in detailview
    var depFields = parentObj.parents('.viewdefview').find("SELECT[dependentfieldid='"+fieldName+"']");
    if (depFields.length == 0) {
      var depFields = parentObj.parents('.detailview').find("SELECT[dependentfieldid='"+fieldName+"']");
  };
    $.each(depFields,function(idx){
        var selectObj=$(depFields[idx]);
        log("reset options: "+selectObj.attr('name'))
        resetSelectOptions(selectObj,fieldText,fieldVal,fieldTables)
    });
}