dependent select box in editor

edanyildiz

Dear All,

I have 2 select boxes in the editor. Is there a way to populate the second select box using the first one while the user is creating a new record.
I had a chance to read the dependent() example but there is no clear example or post about this.

edanyildiz

For example;

First select - Countries
second select - Cities

allan

Basically you need to use:

editor.dependent( 'country', '/ajax/api/to/get/cities' );

The URL given would need to return JSON in the form:

{
  "options": {
    "city" [
      { label: "Edinburgh", value: 1 },
      ...
   }
}

based on the parameters submited of course.

So essentially you need to write the server-side script to get the list of cities (which would presumably involve a database lookup).

Regards,
Allan

edanyildiz

Thank you Allan.
I hope we have an example including serverside script when you have free time.

hnhegde

Hello,
I have a very similar query. I am developing a webapp in Django. I am trying to populate list of US counties based on the State selected. I have two select fields. First one is the state and second is the list of counties. What should I specify as the 'options' for county field? Below is the relevant code snippet:

 var accountsRecTableNewEditor;
        $(document).ready(function () {
            accountsRecTableNew_editor = new $.fn.dataTable.Editor({
                table: '#accountRecs',
                ajax: "{% url 'delta_cdm_app:account_model_update' %}",              
                fields: [
                {
                    label: "State",
                    name: "state_code",
                    type: "select",
                    options: [
                        {% for state in states %}
                        {
                            value: '{{ state.state_code }}',
                            label: '{{ state.state_name }}'
                        },
                    {% endfor %}
                    ]
                },
                {
                    label: "County",
                    name: "county",
                    type: "select",
                    options: [ ]
                }, ]
            });            
            accountsRecTableNewEditor.dependent('state_code', '{% url "delta_cdm_app:get_county_list_json" %}')

And get_county_list_json() reads thus:

def get_county_list_json(request):
    return_json = {
        "data": [],
        "files": [],
        "options": []
    }

    for key, value in request.POST.iteritems():
        if 'state_code' in key:
            county_list_sql = """ select uscl_seq_num, county
                                from us_state_county_list
                                where state_code = '{0}' """.format(value)

            county_list = UsStateCountyList.objects.raw(county_list_sql)
    
            idx = 0
            for c in county_list:
                idx += 1
                json_entry = {
                    "DT_RowId": "row_" + str(idx),
                    "county": c.county
                }
                return_json["data"].append(json_entry)

    return HttpResponse(json.dumps(return_json), content_type='application/json')

Appreciate if experts here can kindly advise me,

Thanks,
Harsha

allan

What should I specify as the 'options' for county field?

Initially an empty array would be fine. The key is the response to the Ajax response that the dependent() method makes. Is that aspect working?

Allan

hnhegde

Allan, thanks. I have got this working. A question though - Does the dependency prevent a user from selecting a different option than what was set by the dependency rule? In other words, can a user still edit the dependant field?

allan

Yes they could do if the option is there for them to do so. dependent() can also be used to change the options of the field - so you could just set it to be a single option if you want to force a value.

Allan

hnhegde

Thanks Allan, Working now.