dependent() problem creating cascading drop down in editor

Skitson

I have two select fields in editor, One for "Departments and one for "works cells"
What I need to do is limit the list of the Work Cells based on the selection of the Department select list.
The options for each select list each have a label and a value, the value of each work cell matches the value of the department to which it belongs.
So for example when the Department labels "CNC" is selected only those Work Cells in the "CNC" department are listed in the Work Cells select drop down.
This is basically the same as all of the Country-State type of example I've seen.
My assumption is that this is a good application for dependent(), but for the life of me I can't figure how to code it. Or exactly where to place it.
I get the impression that something simple like editor.dependent("department", "work_cell"); would work, but it sure doesnt.
I'm very new to Datatables and any kind of coding whatsoever so any help is appreciated as I'm under a deadline.
Thanks.

Here are my field optoin pertaining to these two fields:

{
                "label": "Department:",
                "name": "department",
                "type": "select",
                "def": "CNC",
                "options": [
                    { label: "CNC", value: 110},
                    { label: "Wet Grind", value: 120 },
                    { label: "EDM", value: 130 },
                    { label: "SIP", value: 140 },
                    { label: "Jig Grind", value: 150 },
                    { label: "Heat Treat", value: 160 },
                    { label: "Grinding", value: 170 },
                    { label: "QC", value: 180 }
                ]
            },
            {
                "label": "Work Cell:",
                "name": "work_cell",
                "type": "select",
                "options": [
                    { label: "CNC", value: 110 },
                    { label: "Small Haas", value: 110 },
                    { label: "Large Haas", value: 110 },
                    { label: "Mazak HCN", value: 110 },
                    { label: "Toyoda", value: 110 },
                    { label: "EC2000", value: 110 },
                    { label: "Mazak AJV", value: 110 },
                    { label: "Lathe", value: 110 },
                    { label: "Hardmill", value: 110 },
                    { label: "  WaterJet", value: 110 },
                    { label: "Programming", value: 110 },
                    { label: "Wet Grind", value: 120 },
                    { label: "Large Wet Grind", value: 120 },
                    { label: "Medium Wet Grind", value: 120 },
                    { label: "Small Wet Grind", value: 120 },
                    { label: "EDM", value: 130 },
                    { label: "Large wire", value: 130 },
                    { label: "Medium Wire", value: 130 },
                    { label: "Small Wire", value: 130 },
                    { label: "EDM Sinker", value: 130 },
                    { label: "Hole Blast", value: 130 },
                    { label: "SIP", value: 140 },
                    { label: "SIP 740", value: 140 },
                    { label: "SIP 700", value: 140 },
                    { label: "Jig Grind", value: 150 },
                    { label: "S50 CNC", value: 150 },
                    { label: "S50 DR", value: 150 },
                    { label: "S35 CNC", value: 150 },
                    { label: "MOORE", value: 150 },
                    { label: "Heat Treat", value: 160 },
                    { label: "IN HOUSE", value: 160 },
                    { label: "VENDOR", value: 160 },
                    { label: "Grinding", value: 170 },
                    { label: "  Surface Grind", value: 170 },
                    { label: "Visual Grind", value: 170 },
                    { label: "SuperTEC", value: 170 },
                    { label: "QC", value: 180 }

                ]
            },

allan

You are correct - dependent() is the way to do this.

editor.dependent("department", "work_cell"); will make an Ajax call to the work_cell script on the server-side, and expect to get JSON back in return which defines the options that should be available. Looking at the above, that probably isn't what you want right now.

However, before we explore that, there is another issue we need to address - in the work_cell options there are a number of options which have the same value. For example, if in the database you store 130, how would Editor know if you want to show EDM, Large wire or any of the other options for 130. The value should be unique.

I see that you are using that as the grouping value, but that needs to change.

Assuming that you have the list of options available at the client-side, use dependent() with a callback function - the function will be given the value of the department field, from which you can determine the options that should be shown (using $.map for example to get the list of options). Then return that as the options to be shown for the work_cell.

Allan

Skitson

OK. Thanks Allan.
I"ll go see if I can figure out what all that means and how to do it.