Issue with dropdownlist and combobox controls in grid

[tpackardParticipant]

Having an issue getting the jqxDropDownList and jqxComboBox controls to display the value from the cell in the createeditor function. They are displaying the first item in the list upon initial selection rather than the value in the cell. Using the json datatype to populate the lists from the server.

      	var presortSource =
       	{
       		datatype: "json",
 	       	datafields:
    	        [
		        { name : 'SRPSRT', type: 'number'  },
 			{ name : 'SRPSTT', type: 'string'  }
                ],
                url: "../BrochuresServlet?task=presort"               
           };
           var presortAdapter = new $.jqx.dataAdapter(presortSource, {
                autoBind: true,
            });

            var printerSource =
       		{
         		datatype: "json",
	        	datafields:
    	     		[
 				{ name : 'BRPDSC', type: 'string'  }
          		],
                        url: "../BrochuresServlet?task=printer"               
           	};
 		var printerAdapter = new $.jqx.dataAdapter(printerSource);

            	var source =
            	{
		    datatype: "json",
             	    datafields:
               	    [
 		       {name : 'BRPSTT', value: 'BRPSRT', values: { source: presortAdapter.records, value: 'SRPSRT', name: 'SRPSTT' } },
		       {name : 'BRPDSC', type: 'string'   }
               	    ],
             	};

                var dataAdapter = new $.jqx.dataAdapter(source);

            $("#jqxgrid").jqxGrid(
            {
                width: "98%",
                height: "800",                
                source: dataAdapter,
                editable: true,
                columns: [
                
                  { text: 'PresortType', datafield: 'BRPSRT', displayfield: 'BRPSTT', columntype: 'dropdownlist', width: 450,
                        createeditor: function (row, value, editor) {
                            editor.jqxDropDownList({ source: presortAdapter, displayMember: 'SRPSTT', valueMember: 'SRPSRT' });
                        }
                    },   
                  { text: 'Printer Desc', columntype: 'combobox', datafield: 'BRPDSC', width: 140,
                      	createeditor: function (row, value, editor) {
        		    editor.jqxComboBox({source: printerAdapter });
    			 } 
                   }
                ]
            });

[Peter StoevKeymaster]

Hi tpackard,

Actually, you are not using the default DropDownList and ComboBox editors. In your case, you override the default behavior through “createeditor”. If you want to set the cell’s value, then you should use the “initeditor” for that purpose. “initeditor” is called each time a cell goes into edit mode. “createeditor” is called just once – when the editor is created.

Best Regards,
Peter Stoev

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

[tpackardParticipant]

In createeditor, the listbox for the dropdownlist/combobox is not being loaded/shown until after the selectIndex is called and is returning 0 for the index value. On subsequent selections, it works as should as the listbox is now populated and it can perform a match. I tried the initeditor function to select the cell value but it is not working. How do I get the listbox to load first before it sets the index?

[Peter StoevKeymaster]

Hi tpackard,

“createeditor” is called when the editor is created. “initeditor” is called when the cell is in edit mode as I explained earlier. If you want to make selection, then you should write custom code in the “initeditor”. I also suggest you to look at the Grid’s Editing examples.

Best Regards,
Peter Stoev

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

[tpackardParticipant]

After tracing through the listbox/combobox code, it looks like the listbox is not getting populated until after the search is performed resulting in an index value of zero and thus the control displays the first item in the list and notthe value from the cell. It works fine on the second call when the listbox has been populated. I tried to set the value with initeditor but that function does not work.

[Peter StoevKeymaster]

Hi tpackard,

Let me explain why the provided code will not work:

1. Syntax error after autoBind: true,
Remove “,”.

2. {name : ‘BRPSTT’, value: ‘BRPSRT’, values: { source: presortAdapter.records, value: ‘SRPSRT’, name: ‘SRPSTT’ } } – This will not work because presortAdapter.records is empty. You use Ajax call and when you do that, you should not expect the data to be loaded few lines below. If you want to ensure that your data is loaded, then set the async: false in presortSource.
3. In createeditor, use presortAdapter.records. It is not necessary to make additional Ajax call for loading the same data.
4. Use initeditor for setting the currently selected index.

Hope the above helps.

Best Regards,
Peter Stoev

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

[Author]

Posts