jQuery UI Widgets Forums Grid Virtualmode and DropDownList Column, can't work together ?

This topic contains 5 replies, has 2 voices, and was last updated by  Dimitar 9 years, 6 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author

  • Storm
    Participant

    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.
    Vituralmode and DropDownList Column Error

    My question, why is this not working together ?


    Dimitar
    Participant

    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/


    Storm
    Participant

    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!

    • This reply was modified 9 years, 6 months ago by  Storm.
    • This reply was modified 9 years, 6 months ago by  Storm.
    • This reply was modified 9 years, 6 months ago by  Storm.

    Dimitar
    Participant

    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/


    Storm
    Participant

    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!


    Dimitar
    Participant

    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/

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.