Add Data to Listbox from DB with ID and VALUES

[mohan rajMember]

Hi,

I need to add data to multiple listbox with checkbox. I am using ‘addItem’ property to achieve this. But I am able to add only text. My requirement is to display text in listbox with ID Values. Onclick of the checkbox i need to pass ID’s to DB. PLease provide some info.
Please refer below sample code:

$.ajax({
type: “POST”,
url: urlLOB,
data: { lobID: item },
success: function (returndata) {

if (args.checked) {
debugger;
var LobCount;
for (LobCount = 0; LobCount < returndata.data.length; LobCount++) {

$("#LstFamParent").jqxListBox('addItem', returndata.data[LobCount].PlatformFamilyBrandName );

}

}

Note: "returndata.data[LobCount].PlatformFamilyBrandName" is my List item text.

"returndata.data[LobCount].PlatformFamilyID" is my List item ID.

Please provide some info ASAP

[Peter StoevKeymaster]

Hi mohan raj,

To add items from external source like JSON, XML, etc. I suggest you to take a look at this sample: listboxbindingtojson.htm.

Note that the ‘addItem’ method adds a new item. You can add an item like that: {label: “My Item”, value: “My ID”}.

To send the values of your items to the server, you need to dynamically create a data object and set the ajax’s “data” field to point to your object.

Example:

 var params = { id:"Item" };
 var str = jQuery.param(params);

The result is: id=Item

In your server script, you should check whether there’s the “id” is set.

if (isset($_POST['id']))
{
     $itemID = $_POST['id'];  
}

Hope this helps.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[NishchaljainParticipant]

Hi , i am trying to bind json data to my list box but getting error. Below is my code :

var channelGrpTypeKey = $(‘#ddlChannelGroupType’).val();
var url = “/MappingChannelGroup/GetChannelsByGrpTypeKeyAndGrpNameKey”;

var source =
{
datatype: “json”,
datafields: [
{ name: ‘ChannelName’ },
{ name: ‘ChannelKey’ }
],
ChannelGrpTypeKey: channelGrpTypeKey,
srcFuncAreaKey: funcareakey,
url: url
};
var dataAdapter = new $.jqx.dataAdapter(source);

$(“#listBoxA”).jqxListBox({ source: dataAdapter, displayMember: “ChannelName”, valueMember: “ChannelKey”, width: 200, height: 250 });

I am getting error on binding the source to the dataAdaptor , the error says – Uncaught TypeError: Cannot read property ‘dataAdapter’ of undefined
Although it is not hitting my action method. I dont know where i am doing wrong. And sorry as i was not getting the right place to post a new question.

[Peter StoevKeymaster]

Hi Nishchaljain,

This means that you’re missing Javascript references to required Javascript files. I suggest you to look at the binding to json demo of our ListBox and se the list of references in the page’s head.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[NishchaljainParticipant]

Hi Peter , Thanks for a quick response.

I am using all the javascript files mention in the listbox tutorial.Below are the javascripts files that are on my page :

<link href=”~/jqwidgets/styles/jqx.base.css” rel=”stylesheet” />
<link href=”~/Content/bootstrap.min.css” rel=”stylesheet” />
<link href=”~/Content/toastr.css” rel=”stylesheet” />

<link rel=”stylesheet” href=”//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css”>

<script src=”//code.jquery.com/jquery-1.10.2.js”></script>

<script src=”~/Scripts/toastr.js”></script>
<script src=”~/Scripts/jquery.validate.min.js”></script>
<script src=”~/Scripts/jquery.validate.unobtrusive.min.js”></script>
<script src=”~/jqwidgets/jqxcore.js”></script>
<script src=”~/jqwidgets/jqxdata.js”></script>
<script src=”~/jqwidgets/jqxbuttons.js”></script>
<script src=”~/jqwidgets/jqxscrollbar.js”></script>
<script src=”~/jqwidgets/jqxlistbox.js”></script>

Please let me know if i am still missing any.

[Peter StoevKeymaster]

Hi Nishchaljain,

Then the path to the files is incorrect.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts