cascaded drop downs not loading properly

[sanathko]

My JTable loads properly and am trying to obtain the cascading drop down feature. I want to load sub categories based on categories.

I can see the categories dropdown getting rendered, but not the subcategories one, when the categories is changed. Actually in the vent change for the dropdown , nothing is happening - note the console.log line.

note that I can load the sub categories - if I remove the dependsOn and use

options: 'datatable/allsubcategories',

category: { title: 'Category', options: 'datatable/categories', list: false }, subcategory: { title: 'Sub Category', //options: 'datatable/allsubcategories', dependsOn: 'category', options: function (data) { //console.log(data.dependedValues); //if (data.source == 'list') { //Return url of all countries for optimization. //This method is called for each row on the table and jTable caches options based on this url. //return 'datatable/allsubcategories'; //} return 'datatable/subcategories?categoryId=' + data.dependedValues.category; }, list: false },

[zjakin]

Hello Sanathko. There is strictly mentioned in the tutorial that the links should be similar, so my advice is to change in data.source == 'list' condition the :datatable/allsubcategories to : datatable/subcategories?categoryId=0 modify your subcategories so if it accepts 0 parameter it returns all subcategories!

[zjakin]

Also check my question about perfomance issue in cascade dropdowns #354. I would be very greatful

[sanathko]

I have implemented my code as advised but still no lock with cascaded dropdowns.

if I directly give the options for subcategories with 'categoryId=0', all the sub categories are loaded. but with "dependsOn" nothigs gets loaded. am using jtable 1.7

[zjakin]

Try using the latest version of jtable, maybe in separate project for tersting purpose? Here is my working code: onloadCountry: { title: 'Onload Country', width: '14%', options: 'geo/get-country' //list: false }, onloadRegion: { title: 'Onload Region', width: '13%', dependsOn: 'onloadCountry', options: function (data) { if (data.source == 'list') { return 'geo/get-region?country_id=0'; } if(data.dependedValues.onloadCountry == 0) {
return [{ DisplayText: 'Select country to see regions', Value: 0}] } return 'geo/get-region?country_id=' + data.dependedValues.onloadCountry; } //list: false },

[sanathko]

thanks the issue was with the version of jtable. worked when I switched to the latest version. The working code is..

category: { title: 'Category', options: '/datatable/categories', list: false }, subcategory: { title: 'Sub Category', dependsOn: 'category', options: function (data) { if (data.source == 'list') { //Return url of all countries for optimization. //This method is called for each row on the table and jTable caches options based on this url. return '/datatable/subcategories?categoryId=0'; } return '/datatable/subcategories?categoryId=' + data.dependedValues.category; }, list: false },
description: { title: 'Description', width: '25%',
create: true, edit: true }

[sanathko]

sorry to bother again..I have come across another roadblock..

issue - when datatable is populated , categories and subcategories gets loaded. when cascading dropdowns added, the dropdowns gets loaded properly cascades as well.. but when loading an item per row, the correct element has not been preselected from the dropdowns and all the time, the topmost items is selected.

when we use the 1st part of the code, we can see data, so assume that the JSON object comes loaded with correct data.

[zjakin]

I dont know if i got what you need, but if you enable cascading dropdowns fields for LIST (list: true - its by default) they should be displayed correctly, you dont need first part of your code(commented one here)

[TroyWitthoeft]

@sanathko I had the same issue, and it was because the server-side code for my options was returning DisplayText and Value pairs... just like in the demo here.

.Select(x => new { DisplayText = c.ContinentalName, Value = c.ContinentalId })

But I'm not sure if jTable will ever be able to highlight the correct dropdown list item, because the _fillDropDownListWithOptions method (line 1647 in 2.3) is selecting the dropdown item by searching for the dropdown item who's value is equal to the current field's value. If you're using different values for your dropdown than the fields value, then you may never find a match.

To verify this is your problem, introduce an extra line of code into the method. Add some console output that shows each of the comparison's as the method iterates through the dropdown items. Adjust your _fillDropDownListWithOptions method to match the code below.

    /* Fills a dropdown list with given options.
    *************************************************************************/
    _fillDropDownListWithOptions: function ($select, options, value) {
        $select.empty();
        for (var i = 0; i < options.length; i++) {
            $('<option' + (options[i].Value == value ? ' selected="selected"' : '') + '>' + options[i].DisplayText + '</option>')
                .val(options[i].Value)
                .appendTo($select);
                console.log("Comparing " + options[i].Value + " to " + value + ".");
        }
    },

Fire up your firebug or Chrome developer tools and look at the javascript console. Click on your edit record button and watch the console output. You'll have a comparison for each dropdown item. If the values never equal, you'll never get a highlighted item....

all this makes me wonder how the Demo works....

[calmdq]

I have a similar situation. I'm using jTable 2.3 (latest version as today JUN-4-2013) with classic ASP (not .NET), just plain old classic ASP. I want to cascade two dropdowns like "@sanathko" did, in my case STATE and JURISDICTION. I created a similar code as your CATEGORY and SUBCATEGORY but the result I get shows "undefined" at the second dropdown (JURISDICTION). My JSON output coming from "getJL.asp" seems to be correct and if I call it directly it will provide me something like this:

{"Result": "OK","Options": [{"value": 501,"displaytext": "KENT"},{"value": 502,"displaytext": "NEW CASTLE"},{"value": 503,"displaytext": "SECRETARY OF STATE"},{"value": 504,"displaytext": "SUSSEX"}]}

NOTE: My JSON parser will return lower case for field names. I'm not sure if this could be the reason and problem, see the case on "value" instead of "Value" and "displaytext" instead of "DisplayText"

My Code:

    state_code: {
        title: 'State',
        width: '15%',
        options: {'0': 'Select State', 'AK': 'AK', 'AL': 'AL', 'AR': 'AR', 'AZ': 'AZ', 'CA': 'CA', 'CO': 'CO', 'CT': 'CT', 'DC': 'DC', 'DE': 'DE' }
    },  
    description: {
        title: 'Jurisdiction',
        width: '25%',
        display: function (data) {
            return( data.record.description );
        },

        dependsOn: 'state_code',
        options: function (data) {
            if (data.source == 'list'){
                return 'getJL.asp?state=ALL';
            }
            if (data.dependedValues.state_code == 0) {
                return [{ DisplayText: 'Select State to see Jurisdiction', Value: 0}];
            }
            return 'getJL.asp?state=' + data.dependedValues.state_code;
        }
    },  

My database has a "Jurisdiction" table with the following fields: Column_name Type juris_code int description varchar state_code char

My goal is to SET a list of "Distinct" states from this table and populate them into the "state_code" (STATE) dropdown and filter the "description" (JURISDICTION) dropdown based on the STATE Any suggestions?

[calmdq]

I updated my JSON parser and remove the "lowercase" statement and now it is working correctly. It seems that the jTable "options" for the dropdown will expect the "DisplayText" and "Value" with the correct case. My issue was resolved when the case on "value" was changed to "Value" and "displaytext" was changed to "DisplayText".

[khalidchaudhry]

In my case "DisplayText" and "Value"are in the correct case but still drop down is not populating.I am populating only single drop down field in Jtable with no dependency on another field.Seems like very basic scenario but not getting the result . Below is the java script that gets called on page onload event function jtableload() { $('#PackagesContainer').jtable({ title: 'Associated Application Packages', paging: false, pageSize:10, sorting: false, multiSorting: false, defaultSorting: 'ApplicationName asc', actions: { listAction: getListData }, fields: { ApplicationPackageId: { key: true, create: false, edit: false, list: false }, ApplicationId: { key: true, create: false, edit: false, list: false }, PackageId: { title:'PackageName', key: true, create: true, edit: true, list: true, width: '2%', options: function (data) {

                    if (data.source == 'list') {
                       return 'http://localhost:62237/api/packages/getpackages';
                   }
               }

           },
           StageName: {
               title: 'Stage',
               width: '2%'
           },
            Sequence: {
                   title: 'Sequence',
                   width: '2%'
               },
               Active: {
                   title: 'Status',
                   options: { 0: 'Inactive', 1: 'Active' },                       
                   width: '2%'

               },
               StageId: {
                   key: true,
                   create: false,
                   edit: false,
                   list: false
               }

           }   
   });
   $('#PackagesContainer').jtable('load');

} I checked through fiddler and the OData service is returning the response required for populating the optionset field but still getting the error that unable to load values for option set field.Please help and let me know what i am missing here.........

{"Result":"OK","Options":[{"DisplayText":"xxxx","Value":"10"},{"DisplayText":"yyyy","Value":"11"},{"DisplayText":"zzz","Value":"12"},{"DisplayText":"cddffdf","Value":"13"},{"DisplayText":"gfgfgfg","Value":"14"},{"DisplayText":"bbbbbbb","Value":"15"}]}

Below is the code of Odata Service that returns the data to the caller which in this case is html page calling JTable plugin

public HttpResponseMessage Getxxx(int id) { Object jresult = PackageRepository.GetStageIdxx(id);

    if (jresult == null)
    {
        var message = string.Format("Packages for stage with id {0} not found", id);
        return Request.CreateErrorResponse(HttpStatusCode.NotFound, message);
    }
    else
    {
        return Request.CreateResponse(HttpStatusCode.OK, jresult);
    }
}         

public static Object GetStageIdxx(int stageId) { //Code Logic to get package by id. List pkgs = new List();

    var jsonObject = new JObject();

    using (var db = new CCRMIntegrationDBEntities())
    {
        dynamic options = jsonObject;
        options.Add("Result", "OK");
        options.Options = new JArray() as dynamic;

        pkgs = db.Packages.Where(pkg => pkg.StageId == stageId).ToList();

        foreach (Package p in pkgs)
        {
            dynamic option = new JObject();
            option.DisplayText = p.Name;
            option.Value = p.PackageId.ToString();
            options.Options.Add(option);
        }

        return options;                
    }
}

And error i am getting when loading the data with combo box needs to populate from URL.

Below is the code of Odata Service that returns the data to the caller which in this case is html page calling JTable plugin

public HttpResponseMessage Getxxx(int id) { Object jresult = PackageRepository.GetStageIdxx(id);

    if (jresult == null)
    {
        var message = string.Format("Packages for stage with id {0} not found", id);
        return Request.CreateErrorResponse(HttpStatusCode.NotFound, message);
    }
    else
    {
        return Request.CreateResponse(HttpStatusCode.OK, jresult);
    }
}         

public static Object GetStageIdxx(int stageId) { //Code Logic to get package by id. List pkgs = new List();

    var jsonObject = new JObject();

    using (var db = new CCRMIntegrationDBEntities())
    {
        dynamic options = jsonObject;
        options.Add("Result", "OK");
        options.Options = new JArray() as dynamic;

        pkgs = db.Packages.Where(pkg => pkg.StageId == stageId).ToList();

        foreach (Package p in pkgs)
        {
            dynamic option = new JObject();
            option.DisplayText = p.Name;
            option.Value = p.PackageId.ToString();
            options.Options.Add(option);
        }

        return options;                
    }
}

And error i am getting when loading the data with combo box needs to populate from URL. untitled

[jocobi]

Hello @sanathko ! what version of jtable and jquery did you finally use to make the dropdowns work?

[jocobi]

I finally get working dropdows using jquery-1.9.1.min.js and latest jtable 2.4.0

[morgunder]

in case it helps someone - ran across this today - the dependsOn field must be listed PRIOR to the child. i was using it later in the table and it was pulling as an undefined value. moving the dependsOn field to be ordered before the dependent field fixed my issue.

an example:

BROKEN 'child': { dependsOn: 'master', ... }, 'master': { ... }

WORKING 'master': { ... }, 'child': { dependsOn: 'master', ... }