Jsgrid: Dynamic select options

Created on 14 Jul 2016 · 1Comment · Source: tabalinas/jsgrid

I tried creating a jsGrid with 4 columns. Two are of type "select" and the others are number and text.
I wanted the second select dropdown to change options based on the first select's value.

This was tricky due to how the grid was refreshed. I tried binding the change event to one of the select options, but it would only trigger once because when I tried using the "fieldOption" method, the grid would refresh and the onChange event would not be bound anymore.

I got what I wanted by using the "onRefreshing" and "onRefreshed" callbacks from jsGrid.

After properly getting the options to switch based on the first select, I realized this was all pointless because the values of inserted rows were being changed!!!

Instead of saving the value of the dropdown in the grid, it seems the inserted rows are actually referring to what's in the dropdown. For example, take this inserted row with

Category: Animal, Type: Dog

If I change the type's available options, it will affect ALL INSERTED ROWS in the grid.
$("#jsGrid").jsGrid("fieldOption", "Type", "items", ["SUV", "Sedan", "Coupe"]);

Running that line will change my inserted rows to

Category: Animal, Type: SUV

here is my code for the dynamic select options:

var categoryCache;

$(document).ready(function() {
    // js Grid initialization
    $("#jsGrid").jsGrid({
        width: "100%",
        height: "350px",
        noDataContent: "",

        inserting: true,
        editing: true,

        fields: [
            { name: "Category", type: "select", items: [{Name:"Animal"}, {Name:"Car"}, {Name:"Fruit"}], valueField: "Name", textField: "Name", width: 150, validate: "required" },
            { name: "Type", type: "select", items: ["Cat", "Dog"], width: 250, validate: "required" },
            { name: "Amount", type: "number", width: 150, validate: "required" },
            { name: "Notes", type: "text", width: 300 },
            { type: "control" }
        ], 

        /**
         * All this is to achieve dynamic "Type" based on "Category".
         * The jsGrid seems to be recreated everytime $().jsGrid("fieldOption"....) is run
         * I was binding the change event outside before and it would catch the event only once
         * binding the event in the "onRefreshing" correctly updated the "Type" options, BUT it kept resetting the "Category" value.
         * So, after refresh is complete, inside "onRefreshed", I updated the "Category" value by holding onto the value in the variable categoryCache.
         */
        onRefreshing: function(args) { 
            // when Category changes, update the Type options
            var category = $('#jsGrid .jsgrid-insert-row td:first-child select');
            category.on("change", function() { 
                var categoryValue = category.val();
                categoryCache = $('#jsGrid .jsgrid-insert-row td:first-child select').val();

                switch(categoryValue) {
                    case 'Animal':
                        $("#jsGrid").jsGrid("fieldOption", "Type", "items", ["Cat", "Dog"]);
                        break;
                    case 'Car':
                        $("#jsGrid").jsGrid("fieldOption", "Type", "items", ["SUV", "Sedan", "Coupe"]);
                        break;
                    case 'Fruit':
                        $("#jsGrid").jsGrid("fieldOption", "Type", "items", ["Apple", "Orange"]);
                        break;
                    default:
                        console.log('eh.');
                }
            });
        },
        onRefreshed: function(args) {
            if(categoryCache != null) { 
                $('#jsGrid .jsgrid-insert-row td:first-child select').val(categoryCache); 
            }
        }
    });
});

help wanted

Source