Xml databind

[mustafaParticipant]

Hello this xml struct

<?xml version="1.0"?>
<Languages>
  <Language CountryId="1">

      <Country>Turkey</Country>
      <CountryCode>90</CountryCode>
      <image img="/Content/img/Flag/72x72/Turkey.ico" link="" bigphoto="/Content/img/Flag/256x256/Turkey.png"/>
      <Zone>Europe</Zone>
 
  </Language>
  
  <Language CountryID="3">

    <Country>Belarus</Country>
    <CountryCode>80</CountryCode>
    <image img="/Content/img/Flag/72x72/Belarus.ico" link="" bigphoto="/Content/img/Flag/256x256/Belarus.png"/>
    <Zone>Europe</Zone>
    
  </Language>

  <Language CountryID="4">

    <Country>Bulgaria</Country>
    <CountryCode></CountryCode>
    <image img="/Content/img/Flag/72x72/Bulgaria.ico" link="" bigphoto="/Content/img/Flag/256x256/Bulgaria.png"/>
    <Zone>Europe</Zone>
    
  </Language>

  <Language CountryID="5">

    <Country>Denmark</Country>
    <CountryCode></CountryCode>
    <image img="/Content/img/Flag/72x72/United-Kingdom.ico" link="" bigphoto="/Content/img/Flag/256x256/Denmark.png"/>
    <Zone>Europe</Zone>
    
  </Language>

  <Language CountryID="6">

    <Country>England</Country>
    <CountryCode></CountryCode>
    <image img="/Content/img/Flag/72x72/England.ico" link="" bigphoto="/Content/img/Flag/256x256/England.png"/>
    <Zone>Europe</Zone>
    
  </Language>

  <Language CountryID="7">

    <Country></Country>
    <CountryCode></CountryCode>
    <image img="/Content/img/Flag/72x72/Finland.ico" link="" bigphoto="/Content/img/Flag/256x256/Finland.png"/>
    <Zone>Europe</Zone>
    
  </Language>

  <Language CountryID="8">

    <Country>Norway</Country>
    <CountryCode></CountryCode>
    <image img="/Content/img/Flag/72x72/Norway.ico" link="" bigphoto="/Content/img/Flag/256x256/Norway.png"/>
    <Zone>Europe</Zone>
    
  </Language>

  <Language CountryID="9">

    <Country>Russia</Country>
    <CountryCode></CountryCode>
    <image img="/Content/img/Flag/72x72/Russia.ico" link="" bigphoto="/Content/img/Flag/256x256/Russia.png"/>
    <Zone>Europe</Zone>
    
  </Language>

  <Language CountryID="10">

    <Country>Scotland</Country>
    <CountryCode></CountryCode>
    <image img="/Content/img/Flag/72x72/Scotland.ico" link="" bigphoto="/Content/img/Flag/256x256/Scotland.png"/>
    <Zone>Europe</Zone>
    
  </Language>

  <Language CountryID="11">

    <Country>Slovakia</Country>
    <CountryCode></CountryCode>
    <image img="/Content/img/Flag/72x72/Slovakia.ico" link="" bigphoto="/Content/img/Flag/256x256/Slovakia.png"/>
    <Zone>Europe</Zone>
    
  </Language>

  <Language CountryID="12">

    <Country>Slovakia</Country>
    <CountryCode></CountryCode>
    <image img="/Content/img/Flag/72x72/Slovakia.ico" link="" bigphoto="/Content/img/Flag/256x256/Slovakia.png"/>
    <Zone>Europe</Zone>
    
  </Language>
 
</Languages>

    var url = "/Content/Xml/Language.xml";

    var source =
               {
                   dataType: "xml",
                   dataFields: [
                       { name: 'CountryId', type: 'number' },
                       { name: 'Country', type: 'number' },
                       { name: 'CountryCode', type: 'string' },
                       { name: 'image', type: 'string' },
                       { name: 'Zone', type: 'string' }                 
                   ],
                  
                   id: 'CountryId',
                   root: 'Languages',
                   record: 'Language',
                   url: url
               };

    var dataAdapter = new $.jqx.dataAdapter(source, { async: false });
    // Create a jqxComboBox
    $(".language").jqxComboBox({ selectedIndex: 0, source: dataAdapter, displayMember: "image", valueMember: "image", width: 200, height: 25 });
    $(".language").on('select', function (event) {
        if (event.args) {
            var item = event.args.item;
            if (item) {
                var valueelement = $("<div></div>");
                valueelement.text("Value: " + item.value);
             
            }
        }
    });

I do not see the picture

Thank you

[Peter StoevKeymaster]

Hi mustafa,

All of your items have empty labels because they point to “image” variable which is empty, too. You can probably resolve that by setting the “image” datafield’s map property to the Image tag’s img or bigphoto attribute.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[mustafaParticipant]

ok thank you peter
I fix the problem but Have another problem

  var url = "/Content/Xml/Language.xml";

    var source =
               {
                   dataType: "xml",
                   dataFields: [
                       { name: 'CountryId', type: 'number' },
                       { name: 'Country', type: 'number' },
                       { name: 'CountryCode', type: 'string' },
                       { name: 'image', type: 'string' },
                       { name: 'Zone', type: 'string' }                 
                   ],
                  
                   id: 'CountryId',
                   root: 'Languages',
                   record: 'Language',
                   url: url
               };
                 

   
    var dataAdapter = new $.jqx.dataAdapter(source, { async: false });
   

        $('.language').jqxComboBox({
            selectedIndex: 0,
            theme: 'energyblue',
            source: dataAdapter,
        
            itemHeight: 50,
            height: 25,
            width: 270,
            renderer: function (index, label, value) {
                var table = '<table>';                         
                for (var i = 0; i < dataAdapter.records.length; i++) {
                 
                    var img = '<img height="72" width="72" src="' + dataAdapter.records[i].image + '"/>';
                    table += '<tr><td>' + img + '</td></tr>';
                }
                table += '</table>';    
                return table;
             
            }

        });

Creating multiple tables

[Peter StoevKeymaster]

Hi mustafa,

What do you mean by creating multiple tables? You would like to display Table tags within a ComboBox item?

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[mustafaParticipant]

sorry my english is not good
I do not want to create multiple tables

” You would like to display Table tags within a ComboBox item? ”
yes how can I do?

[mustafaParticipant]

hi I fixed problem
thank you

function WebLanguage() {
    var jsonObj = new Array();

    var url = "/Content/Xml/Language.xml";

    $.get("Content/Xml/Language.xml")
.done(function (data) {
    jsonObj = $.xml2json(data);
 
    var source =
{
    dataType: "json",
    dataFields: [
        { name: 'CountryId', type: 'number' },
        { name: 'Country', type: 'number' },
        { name: 'CountryCode', type: 'string' },
        { name: 'image', type: 'string' },
        { name: 'Zone', type: 'string' }
    ],
    localdata: jsonObj,
    id: 'CountryId',
    root: 'Language'

};
    var dataAdapter = new $.jqx.dataAdapter(source, {
        autoBind: true
    });

    dataAdapter.dataBind();
 

    $('.language').jqxComboBox({
        selectedIndex: 0,
        theme: 'energyblue',
        source: dataAdapter,
        displayMember: "image",
        valueMember: "CountryId",
        renderer: function (index, label, value) {
            var datarecord = jsonObj.Language[index];
            var img = '<img height="72" width="72" src="' + datarecord.image + '"/>';
       
            var table = '<table style="min-width: 150px;"><tr><td>'+img+'</img>'+'</td></tr><tr><td></table>';
            return table;
        }

    });

});

[Peter StoevKeymaster]

Hi mustafa,

I see that your table’s height is 72px. This means that your ListBox’s itemHeight property should be set to at least 72px, too.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts