Cascading Combobox for json data

[arkgroupParticipant]

I have 2 combo boxes (director and units) and second one did not filter data. It should return units based on director selection from first combo box. I think problem is in this line: unitsSource.data = { Director: value }; Data is coming from AJAX call. Here is the code:

  var data2 = {};
            $.ajax({
                type: 'POST',
                datatype: 'json',
                async: false,
                url: 'Default.aspx/UnitList',
                cache: false,
                contentType: 'application/json; character=utf-8',
                success: function (data) {

                    data2 = $.parseJSON(data.d);

                },
                error: function (err) {
                    console.log(err);
                }
            });

            $("#units").jqxComboBox(
		{
		    width: 300,
		    height: 25,
		    disabled: true,
		    promptText: "Select unit...",
		    displayMember: 'Unit_Name',
		    valueMember: 'Director'
		});

            var unitsSource =
		{
		    dataType: "json",
		    dataFields: [
				{ name: 'Unit_Name' },
				{ name: 'Director' }
			],
		    cache: false,
		    async: false,
                    localdata: data2
		};

		var unitsAdapter = new $.jqx.dataAdapter(unitsSource);

            $("#directors").bind('select', function (event) {
                if (event.args) {
                    $("#units").jqxComboBox({ disabled: false, selectedIndex: -1 });
                    var value = event.args.item.value;

                    //this one return all units
                     unitsSource.data = { Director: value };
                     
                    //this return only director name
                    // unitsSource.localdata = { Director: value };

                    unitsAdapter = new $.jqx.dataAdapter(unitsSource);

                    $("#units").jqxComboBox({ source: unitsAdapter });
                }
            });

thanks

[DimitarParticipant]

Hello arkgroup,

Please try the following:

$("#directors").bind('select', function(event) {
    if (event.args) {
        $("#units").jqxComboBox({
            disabled: false,
            selectedIndex: -1
        });
        var value = event.args.item.value;
        var label = event.args.item.label;

        //this one return all units
        unitsSource.data = [{
            Director: value,
            Unit_Name: label
        }];

        //this return only director name
        // unitsSource.localdata = { Director: value };

        unitsAdapter = new $.jqx.dataAdapter(unitsSource);

        $("#units").jqxComboBox({
            source: unitsAdapter
        });
    }
});

You can also check out the following cascading combobox example: http://www.jqwidgets.com/jquery-widgets-demo/demos/php/cascadingcombobox.htm?arctic.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[arkgroupParticipant]

Hi Dimitar,

Both value and label coming from first combo box and have only director name.

$(“#directors”).jqxComboBox(
{
source: data1,
width: 320,
height: 25,
promptText: “Select director…”,
displayMember: ‘Director’,
valueMember: ‘Director’
});
The difference between combobox example is that I am using ajax call and localdata, not url. I don’t know how to filter localdata.

Thanks

[DimitarParticipant]

Hi arkgroup,

This solution should work in your case:

var data2 = {};
$.ajax({
    type: 'POST',
    datatype: 'json',
    async: false,
    url: 'Default.aspx/UnitList',
    cache: false,
    contentType: 'application/json; character=utf-8',
    success: function(data) {

        data2 = $.parseJSON(data.d);

    },
    error: function(err) {
        console.log(err);
    }
});

$("#units").jqxComboBox({
    width: 300,
    height: 25,
    disabled: true,
    promptText: "Select unit...",
    displayMember: 'Unit_Name',
    valueMember: 'Director'
});

var unitsSource = {
    dataType: "json",
    dataFields: [{
        name: 'Unit_Name'
    }, {
        name: 'Director'
    }],
    cache: false,
    async: false,
    localdata: data2
};

var unitsAdapter = new $.jqx.dataAdapter(unitsSource);

$("#directors").bind('select', function(event) {
    if (event.args) {
        $("#units").jqxComboBox({
            disabled: false,
            selectedIndex: -1
        });
        var value = event.args.item.value;

        var dataFiltered = [];
        for (var i = 0; i < data2.length; i++) {
            if (data2[i].Director === value) {
                dataFiltered.push({
                    Unit_Name: data2[i].Unit_Name,
                    Director: data2[i].Director
                });
            }
        }

        unitsSource.localdata = dataFiltered;
        unitsAdapter.dataBind();

        $("#units").jqxComboBox({
            source: unitsAdapter
        });
    }
});

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[arkgroupParticipant]

Thanks Dimitar,

This worked as well:
unitsSource.localdata = $.grep(unitsSource.localdata, function (obj, index) {
return obj.Director === value;
});

[Author]

Posts