Unable to get value for Cascading DropDownList

[joepacelliParticipant]

I’ve got a MVC application which is using the 2 jqxDropDownList. These are cascading dropdown lists. After you select the item from the first dropdownlist it populates the second dropdownlist. The data for the controls are loaded from a jqxdataadapter. The first control loads it’s data fine and after a selection is made, I retrieve the value from the selected item. It’s passed to my second source. This loads the data fine and it’s displayed correctly. But when I selected an item, the value is undefined.

var facilitySource =
         {
             dataType: "json",
             dataFields: [
                 { name: 'ShortName', type: 'string' },
                 { name: 'OrgNbr', type: 'int' }
             ],
             url: '@Url.Action("GetOrganizationsJsonResult", "JobDetail")'
         };

         var transportTypesSource =
         {
             dataType: "json",
             dataFields: [
                 { name: 'TransportTypeCD', value: 'TransportTypeCD', type: 'string' },
                 { name: 'Description', type: 'string'}

             ],
             url: '@Url.Action("GetTransportTypesJsonResult", "JobDetail")'
         };

         //Sent up the Data Adapters
         var facilityAdapter = new $.jqx.dataAdapter(facilitySource);
         var transportTypesAdapter = new $.jqx.dataAdapter(transportTypesSource);

$("#orgs").jqxDropDownList(
     {
         theme: 'energyblue',
         source: facilityAdapter,
         width: 300,
         height: 25,
         promptText: "Select org...",
         displayMember: 'ShortName',
         valueMember: 'OrgNbr'
     });

     $("#transportType").jqxDropDownList(
     {
         theme: 'energyblue',
         width: 300,
         height: 25,
         disabled: true,
         promptText: "Select Transport Type...",
         displayMember: 'Description',
         valueMember: 'TransportTypeCD'
     });

     $("#orgs").bind('select', function(event) {
         var localityCd = "en-US";

         if (event.args) {
             $("#transportType").jqxDropDownList(
             {
                 disabled: false,
                 selectedIndex: -1,
                 displayMember: 'Description',
                 valueMember: 'TransportTypeCD'
             });

             window.OrgNbr = event.args.item.value;
             transportTypesSource.data = { OrgNbr: window.OrgNbr, localityCd: localityCd };
             transportTypesAdapter = new $.jqx.dataAdapter(transportTypesSource);
             $("#transportType").jqxDropDownList({ source: transportTypesAdapter, displayMember: "Description", valueMember: "TransportTypeCD" });
         }
     });

     $("#transportType").bind('select', function(event) {
         if (event.args) {
             var index = $("#transportType").jqxDropDownList('selectedIndex');
             alert(index);
             if (index != -1) {
                 var item = args.item;
                 var record = transportTypesAdapter.loadedData[index];
                 //transportTypesAdapter.records.count();
                 window.TransportTypeCd = record.TransportTypeCD;
                 alert(record.TransportTypeCD);
                 alert(window.TransportTypeCd);
                 $("#jqxGo").jqxButton({ disabled: false });
             }
         }
     });

I’ve put in this line of code for testing
//transportTypesAdapter.records.count();
because it throws an error and I can break within Visual Studio
When I do, I can look at my variable record
And I can see both Description and TransportTypeCd.
But if I look at event.args.item.value, it’s undefined.

I’m new to web development and javascript, so I’ve been struggling with this.
The first control works fine. So I don’t understand when the second one does not work

[Peter StoevKeymaster]

Hi,

Sorry, but I don’t understand why this is required in the “select” event handler:

  $("#transportType").jqxDropDownList(
             {
                 disabled: false,
                 selectedIndex: -1,
                 displayMember: 'Description',
                 valueMember: 'TransportTypeCD'
             });

Also to set the source you need to set only the source property in the event handler.

         $("#transportType").jqxDropDownList({ source: transportTypesAdapter});

not:
` $(“#transportType”).jqxDropDownList({ source: transportTypesAdapter, displayMember: “Description”, valueMember: “TransportTypeCD” });
`

promptText is also deprecated property. The current one is placeHolder.

transportTypesAdapter.records.count() will throw an error. transportTypesAdapter.records is a JavaScript array and JavaScript arrays do not have count() method. They have “length” member.

Best Regards,
Peter Stoev

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

[joepacelliParticipant]

It’s in the select handler because it’s setting the control enabled.
It was basically just the disabled and SelectedIndex. I added the displayMember and valueMember since I been trying to get the value
Even if my event handler looks like this

$("#orgs").bind('select', function(event) {
         var localityCd = "en-US";

         if (event.args) {
             $("#transportType").jqxDropDownList(
             {
                 disabled: false,
                 selectedIndex: -1,
             });

             window.OrgNbr = event.args.item.value;
             transportTypesSource.data = { OrgNbr: window.OrgNbr, localityCd: localityCd };
             $("#transportType").jqxDropDownList({ source: transportTypesAdapter });
         }
     });

My second dropdownlist is loaded with the description.
But I still can not get the value. it’s always blank and undefined.

[Peter StoevKeymaster]

Hi joepacelli,

If the value is blank or null then most probably it is. Sorry, but without your JSON data results and a full example, we can’t test your case and can’t tell you what goes wrong on your side.

Best Regards,
Peter Stoev

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

[Author]

Posts