createeditor for columntype: 'dropdownlist' not showing the displaymember

[andymagerMember]

In grid the createeditor for columntype: ‘dropdownlist’ not showing the displaymember but the value .
Is there an error with the binding ?
Both sources are from mysql database .
the problem is with the UNIT datafield .

Thank you.

  
   
   
  
    $(document).ready(function () 
	  {
//############################################################################################################			
//--------------------------------------------------------------------------		
		var theme = 'ui-redmond';
		var theme1 = 'darkblue';
		var theme2 = 'fresh';
		var theme3 = 'energyblue';
		var quotation_enquiry_parts__quotation_source =
        {
          datatype: "json",
   	      datafields: [
			{ name: 'QUOTATION_PART_ID' },
			{ name: 'QUOTATION' },
			{ name: 'QUOTATION_ITEM_NO' },
			{ name: 'GROUP_ON' },
			{ name: 'PART_NO_SUPPLIER' },
			{ name: 'PART_DESC_SUPPLIER' },
			{ name: 'QUANTITY_SUPPLIER' },
			{ name: 'UNIT_SUPPLIER' },
			{ name: 'SUPPLIER_PRICE' },
			{ name: 'DELIVERY_TIME' },
			{ name: 'DELIVERY_COMMENTS' },
			{ name: 'ENQUIRY_PART_SP' },
			//------------------
			{ name: 'ENQUIRY_PART' },
			{ name: 'ITEM_NO' },
			{ name: 'PART_NO' },
			{ name: 'PART_DESC' },
			{ name: 'QUANTITY' },
			{ name: 'UNIT' },
			{ name: 'PART_COMMENTS' },
			{ name: 'GROUP1' }			
		  ],
 	      cache: false,
          async: false,
          url: 'php/quotations/quotation_enquiry_parts__quotation.php',           
		  type: 'POST'
		}   
        var units_source =
        {
          datatype: "json",
   	      datafields: [
		    { name: 'UNIT_ID'},
		    { name: 'UNITNAME'}
		  ],
 	    cache: false,
        async: false,
		type: 'POST',
        url: 'php/general/units.php',     
        }			
		var units_adapter = new $.jqx.dataAdapter(units_source, { autoBind: true } ,
        { loadError: function (xhr, status, error) {alert ("Error loading php/general/units.php")}});
		
/*		var units_adapter = new $.jqx.dataAdapter(units_source, 
		  {
            autoBind: true,
            beforeLoadComplete: function (records) {
            var data = new Array();
            for (var i = 0; i < records.length; i++) {
                var state = records[i];
                data.push(state);
              }
              return data;
            }
          }
		); */
		
        var quotation_enquiry_parts__quotation_adapter = new $.jqx.dataAdapter(quotation_enquiry_parts__quotation_source, // { autoBind: true } , 
	    { loadError: function (xhr, status, error) { alert ("Error loading php/quotations/quotation_enquiry_parts__quotation.php" & status)}});			 
		
		$("#grid2").jqxGrid(
          {
            source: quotation_enquiry_parts__quotation_adapter ,
			theme: theme2, 
 		    editable: true, 
			width: '1200',
			height: '400',
			rowsheight: 20,
    		altrows: true, altstep: 1,
			selectionmode: 'singlecell',  // singlecell   singlerow
			editmode: 'selectedcell',   //  click        selectedcell   dblclick
			columns: [
			  { text: 'No'                 ,datafield:'QUOTATION_ITEM_NO'   ,width: '40',  columntype:'text', cellsalign: 'center', align: 'center' },
			  { text: 'Part No.'           ,datafield:'PART_NO_SUPPLIER'    ,width: '150', columntype:'text'},
  			  { text: 'P'                  ,datafield:'PART_NO'             ,width: '40',  columntype:'text'},
			  { text: 'Description'        ,datafield:'PART_DESC_SUPPLIER'  ,width: '250', columntype:'text'},
  			  { text: 'D'                  ,datafield:'PART_DESC'           ,width: '40',  columntype:'text'},
			  { text: 'Qty'                ,datafield:'QUANTITY_SUPPLIER'   ,width: '50',  columntype:'text'},
			  { text: 'Q'                  ,datafield:'QUANTITY'            ,width: '40'  ,columntype:'text'},
			  { text: 'Unit'               ,datafield:'UNIT_SUPPLIER'       ,width: '80' , columntype: 'dropdownlist', source: units_adapter, displayMember: 'UNITNAME', valueMember: 'UNIT_ID' ,
			    createeditor: function (row, value, editor) 
				{
               	  //units_adapter = new $.jqx.dataAdapter(units_source, { autoBind: true });											   
                  editor.jqxDropDownList(
                    { source: units_adapter, 
        		      displayMember: 'UNITNAME', 
		     		  valueMember: 'UNIT_ID' ,
			     	  //selectedIndex: 0,
					  //promptText: "aaa" 
				    }
				  );
				}
			  }
			],			
          }
        ); 	
      }
    );
  

[Peter StoevKeymaster]

Hi,

Please, take a look at this sample: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/gridkeyvaluescolumnwitharray.htm?web. From it, you will learn how to create DropDownList editor with custom Data Source.

Best Regards,
Peter Stoev

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

[andymagerMember]

Thanks Peter i solved it.

var quotation_enquiry_parts__quotation_source =
{
datatype: “json”,
datafields: [
{ name: ‘QUOTATION_PART_ID’ },
{ name: ‘QUOTATION’ },
{ name: ‘QUOTATION_ITEM_NO’ },
{ name: ‘GROUP_ON’ },
{ name: ‘PART_NO_SUPPLIER’ },
{ name: ‘PART_DESC_SUPPLIER’ },
{ name: ‘QUANTITY_SUPPLIER’ },
//——————————————————————————–
{ name: ‘UNIT_SUPPLIER’ , value: ‘UNIT_SUPPLIER’, values: { source: units_adapter.records, value: ‘UNIT_ID’, name: ‘UNITNAME’ } },
//——————————————————————————–
{ name: ‘SUPPLIER_PRICE’ },
{ name: ‘DELIVERY_TIME’ },
{ name: ‘DELIVERY_COMMENTS’ },
{ name: ‘ENQUIRY_PART_SP’ },
//——————
{ name: ‘ENQUIRY_PART’ },
{ name: ‘ITEM_NO’ },
{ name: ‘PART_NO’ },
{ name: ‘PART_DESC’ },
{ name: ‘QUANTITY’ },
{ name: ‘PART_COMMENTS’ },
{ name: ‘GROUP1’ }
],
cache: false,
//async: false,
url: ‘php/quotations/quotation_enquiry_parts__quotation.php’,
type: ‘POST’
}

//and on the grid

$(“#grid2”).jqxGrid(
{
source: quotation_enquiry_parts__quotation_adapter ,
theme: theme2,
editable: true,
width: ‘1200’,
height: ‘400’,
rowsheight: 20,
altrows: true, altstep: 1,
selectionmode: ‘singlecell’, // singlecell singlerow
editmode: ‘selectedcell’, // click selectedcell dblclick
columns: [
{ text: ‘No’ ,datafield:’QUOTATION_ITEM_NO’ ,width: ’40’, columntype:’text’, cellsalign: ‘center’, align: ‘center’ },
{ text: ‘Part No.’ ,datafield:’PART_NO_SUPPLIER’ ,width: ‘150’, columntype:’text’},
{ text: ‘P’ ,datafield:’PART_NO’ ,width: ’40’, columntype:’text’},
{ text: ‘Description’ ,datafield:’PART_DESC_SUPPLIER’ ,width: ‘250’, columntype:’text’},
{ text: ‘D’ ,datafield:’PART_DESC’ ,width: ’40’, columntype:’text’},
{ text: ‘Qty’ ,datafield:’QUANTITY_SUPPLIER’ ,width: ’50’, columntype:’text’},
{ text: ‘Q’ ,datafield:’QUANTITY’ ,width: ’40’ ,columntype:’text’},
//{ text: ‘Unit’ ,datafield:’UNIT_SUPPLIER’ ,width: ’80’ , columntype: ‘dropdownlist’, source: units_adapter, displayMember: ‘UNITNAME’, valueMember: ‘UNIT_ID’ ,
{ text: ‘UNIT_SUPPLIER’, datafield: ‘UNIT_SUPPLIER’, columntype: ‘dropdownlist’, displayMember: ‘UNITNAME’,source: units_adapter,
createeditor: function (row, value, editor)
{
units_adapter = new $.jqx.dataAdapter( units_source,// { autoBind: true } ,
{ loadError: function (xhr, status, error) {alert (“Error loading php/general/units.php”)}});
editor.jqxDropDownList({ source: units_adapter, displayMember: ‘UNITNAME’, valueMember: ‘UNIT_ID’ , autoBind: true });
}

}
],
}
);

[Author]

Posts