Virtualmode and DropDownList Column, can't work together ?

[StormParticipant]

Dear all,

I have a grid that loads json data from server.
I have used Virtualmode = true for Paging, Sorting and Filtering.

When I use Virtualmode= true and not use DropDownList Column, my program is working.
When I don’t use Virtualmode = true and use DropDownList Column, my program is working.

But when I use Virtualmode = true and DropDownList Column together, the error occurs.

My question, why is this not working together ?

[DimitarParticipant]

Hello Storm,

If you wish to use a dropdownlist editor in a grid with enabled virtual mode, you would have to specify a data source for the editor in the column’s createeditor callback function, e.g.:

$("#jqxgrid").jqxGrid(
{
    width: 850,
    source: dataAdapter,
    virtualmode: true,
    editable: true,
    rendergridrows: rendergridrows,
    columns: [
        { text: 'Id', datafield: 'id', width: 100 },
        { text: 'First Name', datafield: 'firstname', width: 120, columntype: "dropdownlist", createeditor: function (row, cellvalue, editor, celltext, cellwidth, cellheight) {
            var dataSource = ['Cappuccino', 'Caramel Latte', 'Caffe Espresso'];
            editor.jqxDropDownList({ source: dataSource });
        }
        },
        { text: 'Last Name', datafield: 'lastname', width: 120 },
        { text: 'Product', datafield: 'productname', width: 180 },
        { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
        { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
        { text: 'Total', datafield: 'total', cellsalign: 'right', cellsformat: 'c2' }
    ]
});

The dropdownlist editor’s source cannot be set automatically because the grid is dynamically populated and the records are not known when the editor’s source is being set.

Best Regards,
Dimitar

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

[StormParticipant]

Thank Dimitar,

I run an example using Custom DropDownList Column: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/gridkeyvaluescolumnwitharray.htm and a data source for the editor in the column but same error occurs.

I need map the record’s “ID” from gridAdapter matches to the “Name” from dropDownListAdapter.

How to fix it ? ( Virtualmode = true )

Thank!

[DimitarParticipant]

Hi Storm,

Could you, please, provide us with your relevant JavaScript code so that we may be able to better be of help?

Best Regards,
Dimitar

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

[StormParticipant]

Dear Dimitar,

This is my source code,

    <script type="text/javascript" src="/aceadmin/jqw/jqwidgets/jqxcore.js"></script>
	<script type="text/javascript" src="/aceadmin/jqw/jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="/aceadmin/jqw/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="/aceadmin/jqw/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="/aceadmin/jqw/jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="/aceadmin/jqw/jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="/aceadmin/jqw/jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="/aceadmin/jqw/jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="/aceadmin/jqw/jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="/aceadmin/jqw/jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="/aceadmin/jqw/jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="/aceadmin/jqw/jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="/aceadmin/jqw/jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="/aceadmin/jqw/jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="/aceadmin/jqw/jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="/aceadmin/jqw/jqwidgets/jqxdata.export.js"></script>
    <script type="text/javascript" src="/aceadmin/jqw/jqwidgets/jqxgrid.export.js"></script>
    <script type="text/javascript" src="/aceadmin/jqw/jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript" src="/aceadmin/jqw/jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="/aceadmin/jqw/jqwidgets/globalization/globalize.js"></script>
	<script type="text/javascript" src="/aceadmin/jqw/jqwidgets/jqxgrid.pager.js"></script>	
	<script type="text/javascript" src="/aceadmin/jqw/jqwidgets/jqxgrid.columnsreorder.js"></script>
	<script type="text/javascript" src="/aceadmin/jqw/jqwidgets/jqxgrid.columnsresize.js"></script>
	<script type="text/javascript" src="/aceadmin/jqw/jqwidgets/jqxtabs.js"></script>
	<script type="text/javascript" src="/aceadmin/jqw/jqwidgets/jqxwindow.js"></script>
	<script type="text/javascript" src="/aceadmin/jqw/jqwidgets/jqxnumberinput.js"></script>
	<script type="text/javascript" src="/aceadmin/jqw/jqwidgets/jqxinput.js"></script>
	<script type="text/javascript">
        $(document).ready(function () {
        	$.jqx.theme = 'base';        
        	
         	var entityNameDropDown =  'AcctgTransType';
         	var dropDownSortColumn =  'description';
			
	 		var arrEntityNameDropDown = entityNameDropDown.split(";");
	 		var arrDropDownSortColumn = dropDownSortColumn.split(";");
	
     		var dropDownSource =
            {	       
            	 dataType: 'json',        
                 dataFields: [
                     { name: 'acctgTransTypeId', type: 'string' },
         	   		 { name: 'description', type: 'string' }	                     
                 ],
                id: 'dropId1',		               
                type : 'POST',
                data : {
                	noConditionFind: 'Y',
					entityName: arrEntityNameDropDown[0],						
         			sortdatafield: arrDropDownSortColumn[0],
            		sortorder: 'asc',
            		selectFields: 'acctgTransTypeId;description'		                	
                },
                contentType: 'application/x-www-form-urlencoded',	                
            	url: '/control/listDropDownJQ',
            	async: false            		                	
            };	 		             
            var dropDownAdapter = new $.jqx.dataAdapter(dropDownSource, {
                autoBind: true                			         
            });
                                
             	   
            var gridSource  =
            {
                dataType: 'json',
                dataFields: [           
					{ name: 'test', value: 'acctgTransTypeId', values: { source: dropDownAdapter.records, value: 'acctgTransTypeId', name: 'description' } },                                                                                                                   
                    { name: 'acctgTransTypeId', type: 'string'}                                                                                                 		 		 
                ],
                id: 'paymentId',
                type: 'POST',
                data: {
			        noConditionFind: 'N',
			        conditionsFind: '|TEST|invoiceId|ESTT|8002|ESTT|EQUAL|ESTT|0',
			    },
                contentType: 'application/x-www-form-urlencoded',
                url: '/control/listGlTestJQ',
                beforeprocessing: function (data) {
                    gridSource.totalrecords = data.TotalRows;
                },
                filter: function () {
                    // update the grid and send a request to the server.
                    $("#jqxgridAtat").jqxGrid('updatebounddata');
                },
                sort: function () {
                    // update the grid and send a request to the server.
                    $("#jqxgridAtat").jqxGrid('updatebounddata');
                },
                sortcolumn: 'acctgTransEntrySeqId',
                sortdirection: 'asc',
                pagenum: 0,
                pagesize: 20,
                entityName: 'AcctgTransAndEntries',
                pager: function (pagenum, pagesize, oldpagenum) {
                    // callback called when a page or page size is changed.
                },                            						
                root: 'results'
            };                                                         
             
             var dataadapter = new $.jqx.dataAdapter(gridSource, 
             {
             	formatData: function (data) 
             	{
					    	if (data.filterscount) 
					    	{
	                            var filterListFields = "";
	                            console.log(data.filterscount);
	                            for (var i = 0; i < data.filterscount; i++) 
	                            {
	                                var filterValue = data["filtervalue" + i];
	                                var filterCondition = data["filtercondition" + i];
	                                var filterDataField = data["filterdatafield" + i];
	                                var filterOperator = data["filteroperator" + i];
	                                
	                                
	                                console.log("filtercondition" + i);
	                                console.log(filterDataField);
	                                console.log(filterValue);
	                                console.log(filterCondition);
	                                console.log(filterOperator);
	                                filterListFields += "|TEST|" + filterDataField;
	                                filterListFields += "|ESTT|" + filterValue;
	                                filterListFields += "|ESTT|" + filterCondition;
	                                filterListFields += "|ESTT|" + filterOperator;
	                            }
	                            data.filterListFields = filterListFields;
	                        }
		                        // update the $skip and $top params of the OData service.
		                        // data.pagenum - page number starting from 0.
		                        // data.pagesize - page size
		                         data.$skip = data.pagenum * data.pagesize;
		                         data.$top = data.pagesize;
		                         data.$inlinecount = "allpages";
                        data.entityName = 'AcctgTransAndEntries';
                        return data;
                    },
                loadError: function (xhr, status, error) {
                    alert(error);
                },
                downloadComplete: function (data, status, xhr) {
                        if (!gridSource.totalRecords) {
                            gridSource.totalRecords = parseInt(data["odata.count"]);
                        }
                }, 
                beforeLoadComplete: function (records) {
                	for (var i = 0; i < records.length; i++) {
                		if(typeof(records[i])=="object"){
                			for(var key in records[i]) {
                				var value = records[i][key];
                				if(value != null && typeof(value) == "object" && typeof(value) != null){
                					var date = new Date(records[i][key]["time"]);
                					records[i][key] = date;
                				}
                				
                			}
                		}
                	}
                }
            });
            
            //var editrow = -1;
            $("#jqxgridAtat").jqxGrid(
            {      
                source: dataadapter,
                filterable: true,
                autoshowfiltericon: true,
                editable: true,                
                	selectionmode: 'singlecell',

             
                autoheight: true,
                pageable: true,
                columnsresize: true,
                columnsreorder: true,
                sortable: true,
                virtualmode: true,
                rendergridrows: function () {
                    return dataadapter.records;
                },
                columns: [
							{ text: 'Acctg Trans Type Id', datafield:'acctgTransTypeId', displayfield: 'test', 
                       		columntype: 'dropdownlist',
                    		createeditor: function (row, value, editor) 
                                        {
                                            editor.jqxDropDownList({ source: dropDownAdapter, displayMember: 'description', valueMember: 'acctgTransTypeId' });
                                        }
                                     }                        

                ]
            });              			                                                                          
        });
    </script>
	<div id="jqxgridAtat">
    </div>

Thank you for support!

[DimitarParticipant]

Hi Storm,

Unfortunately, we cannot test your code because we do not have access to the data source. Do you experience the issue with our example and would you be able to recreate yours with some sample local data so that we can test it?

Please also make sure you are using the latest version of jQWidgets (3.5.0).

Best Regards,
Dimitar

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

[Author]

Posts