jqxComboBox default selected

[CwiParticipant]

hello,

I do not speak English too, the answer may be already in the forum but I have not found.

I wish I could define a selected list item by default.

This is the list of countries: IDPays (index letter) / Name of country

Example: CH: Switzerland

I wish I could select the CH index as a country, how?

	// prepare the data
            var sourcePays =
            {
                datatype: "json",
                datafields: [
                    { name: 'IDPays' },
                    { name: 'NomPays' }
                ],
                url: "../data_json.php?DataType=ListePays"

            };
		var dataAdapter = new $.jqx.dataAdapter(sourcePays);
           // Create a jqxComboBox
		$("#PaysListe").jqxComboBox({ 
			selectedIndex: 0, 
			source: dataAdapter, 
			displayMember: "NomPays", 
			valueMember: "IDPays", 
			width: 200, 
			height: 25
		});

I did not find a function like “SelectedKey” in text format which would be handy

Thank you in advance for your help

[NadezhdaParticipant]

Hello Cwi,

You can use the ‘selectItem’ method to select item by default. In the following JSFiddle you can see how to do it: http://jsfiddle.net/jqwidgets/ZayKP/.

Best Regards,
Nadezhda

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

[CwiParticipant]

Thank you for the link it will serve me later.

My concern for now is to just post the key to save it.

In fact I think I found, you just add:

<div id = “CountryList” name = “IDPays” value = “”> </ div>

[CwiParticipant]

I wish I could select a default jqxComboBox an item via its index.

As against the index is not a numeric key, but a key text.

Example of basic read:

<select name="Pays">
	...
	<option value="EN">Anglais</option>
	<option value="FR">Francais</option>
	...
</select>

I tested both ways but none works …
(I want to select eg ‘FR’ to open the page)

$("#jqxComboBox").jqxComboBox({
      source: source,
      theme: 'energyblue',
      width: '200px',
      height: '25px',
      <strong>selectedIndex: 'FR'</strong>
  });

$("#jqxComboBox").jqxComboBox({
      source: source,
      theme: 'energyblue',
      width: '200px',
      height: '25px',
      <strong>selectItem: 'FR'</strong>
  });

[NadezhdaParticipant]

Hello Cwi,

Please, note that “selectItem” is a method, not a property, and that the “selectedIndex” property requires a number. If you want you can use method “selectItem” to select default item as it is shown in the example:

$("#jqxComboBox").jqxComboBox({
      source: source,
      theme: 'energyblue',
      width: '200px',
      height: '25px'      
  });
$("#jqxComboBox").jqxComboBox('selectItem', 'FR');

Best Regards,
Nadezhda

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

[CwiParticipant]

I’m trying but it does not work.

Neither the key / value or the name, lower and upper case …

<script type="text/javascript">
$(function(){
	// Liste des pays
	var sourcePays = {
		datatype: "json",
		datafields: [
			{ name: 'IDPays' },
			{ name: 'NomPays' }
		],
		url: "../data_json.php?DataType=ListePays"
	};
	var dataAdapter = new $.jqx.dataAdapter(sourcePays);
	// Create a jqxComboBox
	$("#PaysListe").jqxComboBox({ 
		source: dataAdapter, 
		displayMember: "NomPays", 
		valueMember: "IDPays", 
		width: 200, 
		height: 25
	});
	$("#PaysListe").jqxComboBox('selectItem', 'FR');
});
</script>
<div id="PaysListe" name="IDPays" value=""></div>

Json data :
[{"IDPays":"AF","NomPays":"AFGHANISTAN"},{"IDPays":"ZA","NomPays":"AFRIQUE DU SUD"},{"IDPays":"AX","NomPays":"\u00c5LAND, \u00ceLES"},{"IDPays":"AL","NomPays":"ALBANIE"},{"IDPays":"DZ","NomPays":"ALG\u00c9RIE"},{"IDPays":"DE","NomPays":"ALLEMAGNE"},{"IDPays":"AD","NomPays":"ANDORRE"},{"IDPays":"AO","NomPays":"ANGOLA"},{"IDPays":"AI","NomPays":"ANGUILLA"},{"IDPays":"AQ","NomPays":"ANTARCTIQUE"},{"IDPays":"AG","NomPays":"ANTIGUA-ET-BARBUDA"},{"IDPays":"SA","NomPays":"ARABIE SAOUDITE"},{"IDPays":"AR","NomPays":"ARGENTINE"},{"IDPays":"AM","NomPays":"ARM\u00c9NIE"},{"IDPays":"AW","NomPays":"ARUBA"},{"IDPays":"AU","NomPays":"AUSTRALIE"},{"IDPays":"AT","NomPays":"AUTRICHE"},{"IDPays":"AZ","NomPays":"AZERBA\u00cfDJAN"},{"IDPays":"BS","NomPays":"BAHAMAS"},{"IDPays":"BH","NomPays":"BAHRE\u00cfN"} ....

[NadezhdaParticipant]

Hi Cwi,

Here is an example:

<!DOCTYPE html>
<html lang="en">
<head>    
    <title></title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcombobox.js"></script>
     <script type="text/javascript">
         $(document).ready(function () {
             var url = "test.txt";
             // prepare the data
             var sourcePays =
             {
                 datatype: "json",
                 datafields: [
                      { name: 'IDPays' },
                      { name: 'NomPays' }
                 ],
                 url: url,
                 async: false
             };
             var dataAdapter = new $.jqx.dataAdapter(sourcePays);
             // Create a jqxComboBox
             $("#PaysListe").jqxComboBox({ selectedIndex: 0, source: dataAdapter, displayMember: "NomPays", valueMember: "IDPays", width: 200, height: 25 });            
             $("#PaysListe").jqxComboBox('selectItem', 'AW');
         });
        </script>        
</head>
<body>
    <div id='content'>       
        <div id='PaysListe' name="IDPays" value="">
        </div>       
    </div>
</body>
</html>

text.txt

[
    {
        "IDPays": "AF",
        "NomPays": "AFGHANISTAN"
    },
    {
        "IDPays": "ZA",
        "NomPays": "AFRIQUE DU SUD"
    },
    {
        "IDPays": "AX",
        "NomPays": "ÅLAND, ÎLES"
    },
    {
        "IDPays": "AL", 
        "NomPays": "ALBANIE"
    },
    {
        "IDPays": "DZ",
        "NomPays": "ALGÉRIE"
    },
    {
        "IDPays": "DE",
        "NomPays": "ALLEMAGNE"
    },
    {
        "IDPays": "AD",
        "NomPays": "ANDORRE"
    },
    {
        "IDPays": "AO",
        "NomPays": "ANGOLA"
    },
    {
        "IDPays": "AI",
        "NomPays": "ANGUILLA"
    },
    {
        "IDPays": "AQ",
        "NomPays": "ANTARCTIQUE"
    },
    {
        "IDPays": "AG",
        "NomPays": "ANTIGUA-ET-BARBUDA"
    },
    {
        "IDPays": "SA",
        "NomPays": "ARABIE SAOUDITE"
    },
    {
        "IDPays": "AR",
        "NomPays": "ARGENTINE"
    },
    {
        "IDPays": "AM",
        "NomPays": "ARMÉNIE"
    },
    {
        "IDPays": "AW",
        "NomPays": "ARUBA"
    },
    {
        "IDPays": "AU",
        "NomPays": "AUSTRALIE"
    },
    {
        "IDPays": "AT",
        "NomPays": "AUTRICHE"
    },
    {
        "IDPays": "AZ",
        "NomPays": "AZERBAÏDJAN"
    },
    {
        "IDPays": "BS",
        "NomPays": "BAHAMAS"
    },
    {
        "IDPays": "BH",
        "NomPays": "BAHREÏN"
    }
]

I suggest you to use the latest version of jQWidgets.

Best Regards,
Nadezhda

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

[CwiParticipant]

Thank you.

This works, surely the “async: false” I had not used.

I will also update my version.

have a nice day

[Author]

Posts