jqxDropDownList select function updating jqxListBox

[rcm01Participant]

In a MVC4 project I have a drop down list and a list box. I want the user drop down selection to update the contents of the list box. The initial pass through the code below populates the data while subsequent drop down selections fail.

<script type=”text/javascript”>
$(document).ready(function () {

// prepare the data for Package Dropdown
var source =
{
datatype: “json”,
datafields: [
{ name: ‘PackageID’, type: ‘string’ },
{ name: ‘PackageName’, type: ‘string’ }
],
url: ‘Package/GetPackages’
};
var dataAdapter = new $.jqx.dataAdapter(source);

$(“#myPackage”).jqxDropDownList({ source: dataAdapter, width: ‘200px’, height: ’25px’, displayMember: “PackageName”, valueMember: “PackageID” });

prepare the data for the PackageDoc List
var PackageDocSource =
{
datatype: “json”,
datafields: [
{ name: ‘PackageDocID’, type: ‘string’ },
{ name: ‘Number’, type: ‘string’ },
{ name: ‘Title’, type: ‘string’ },
],
url: ‘Package/GetPackageDocs’,
data: { n: 0 }
}

var dataAdapter2 = new $.jqx.dataAdapter(PackageDocSource);

$(“#LBXPackageDoc”).jqxListBox({
source: dataAdapter2, displayMember: ‘Title’, valueMember: ‘PackageDocID’, width: 200, height: 200,
renderer: function (index, label, value) {
var datarecord = this.source.records[index];
var displayText =  datarecord.Title + ” ” + datarecord.Number;
return displayText;
}
});

//Events
$(“#myPackage”).on(‘select’,
function (event) {
var args = event.args;
var item = $(“#myPackage”).jqxDropDownList(‘getItem’, args.index);
if (item != null) {
alert(“Package is set: ” + item.value);
PackageDocSource.data = { n: item.value }
GetPackageDocs();
}
}
);
};

function GetPackageDocs() {
// prepare the data for the Package Docs List

dataAdapter2.dataBind();

alert(“in GetPackageDocs” + “\n” + PackageDocSource.data.n );

$(“#LBXPackageDoc”).jqxListBox({
source: dataAdapter2, displayMember: ‘Title’, valueMember: ‘PackageDocID’, width: 200, height: 200,
renderer: function (index, label, value) {
var datarecord = this.source.records[index];
var displayText =  datarecord.Title + ” ” + datarecord.Number;
return displayText;
}
});
}
</script>

<div id=”myPackage”></div>
<div id=”LBXPackageDoc”></div>

[Peter StoevKeymaster]

Hi rcm01,

When you select an item in the DropDownList and want to update the ListBox, you need to do the following:

1. Create dataAdapter instance.

var adapter= new $.jqx.dataAdapter(PackageDocSource);

2. Just set the ListBox’s source property to point to the adapter.

$(“#LBXPackageDoc”).jqxListBox({source: adapter});

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[rcm01Participant]

I’m still getting an error which I’ve narrowed down to an issue with the property “renderer”. If I comment out the property, the second and subsequent selections work without a problem. If renderer is set, only the first selection works. Here’s the error that’s thrown

Unhandled exception at line 154, column 17 in http://localhost:41236/package
0x800a138f – Microsoft JScript runtime error: Unable to get value of the property ‘Title’: object is null or undefined
If there is a handler for this exception, the program may be safely continued

Also, I tried moving stuff around and defining the property in the initial instantiation under document ready as well as in the GetPackageDocs method. So I’m wondering do I need to move the function for renderer to another property like loadComplete as a work around.

Here’s the code at the moment.

@model IEnumerable<ALHCOS.Models.Package>
@{
    ViewBag.Title = "Index";
}
@section scripts {
        <script type="text/javascript" src="~/scripts/jqwidgets/jqx-all.js"></script>
    <link rel="stylesheet" type="text/css" href="~/scripts/jqwidgets/styles/jqx.base.css" />
 <script type="text/javascript">
     //prepare the data for the PackageDoc List
     var PackageDocSource =
     {
         datatype: "json",
         datafields: [
            { name: 'PackageDocID', type: 'string' },
            { name: 'Number', type: 'string' },
            { name: 'Title', type: 'string' },
         ],
         url: 'Package/GetPackageDocs',
         data: { n: 0 }
     }
     $(document).ready(function () {
         // prepare the data for Package Dropdown
         var source =
         {
             datatype: "json",
             datafields: [
             { name: 'PackageID', type: 'string' },
             { name: 'PackageName', type: 'string' }
             ],
             url: 'Package/GetPackages'
         };
         var dataAdapter = new $.jqx.dataAdapter(source);
         $("#myPackage").jqxDropDownList({ source: dataAdapter, width: '200px', height: '25px', displayMember: "PackageName", valueMember: "PackageID" });
         $("#LBXPackageDoc").jqxListBox({
              displayMember: 'Title', valueMember: 'PackageDocID', width: 200, height: 200
             //, renderer: function (index, label, value) {
             //    var datarecord = this.source.records[index];
             //    var displayText = datarecord.Title + " " + datarecord.Number;
             //    return displayText;
             //}
         });
         //Events
         $("#myPackage").on('select',
             function (event) {
                 var args = event.args;
                 var item = $("#myPackage").jqxDropDownList('getItem', args.index);
                 if (item != null) {
                     alert("Package is set: " + item.value);
                     PackageDocSource.data = { n: item.value }
                     GetPackageDocs();
                 }
             }
         );
     }
     );
    function GetPackageDocs() {
	    // prepare the data for the Package Docs List
        var adapter = new $.jqx.dataAdapter(PackageDocSource);
	    //dataAdapter2.dataBind();
   
        alert("in GetPackageDocs" + "\n" + PackageDocSource.data.n);
        $("#LBXPackageDoc").jqxListBox({
            source: adapter
            //, renderer: function (index, label, value) {
            //    var datarecord = this.source.records[index];
            //    var displayText = datarecord.Title + " " + datarecord.Number;
            //    return displayText;
            //}
        });
	
    }
 </script>
}
<div id="myPackage"></div>
<div id="LBXPackageDoc"></div>
		

[Author]

Posts