jQuery UI Widgets Forums Grid jqxGrid add empty row problem with dropdownlist column

This topic contains 3 replies, has 2 voices, and was last updated by  Stanislav 6 years, 4 months ago.

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

  • Yannx02
    Participant

    Hi,

    I have a jqxgrid with a dropdownlist column. When I add empty rows, the first row is well displayed. When I enter a new row and leave the edit mode, the first row disappears.

    Code :

    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="jquery/jquery.min.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxdata.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxmenu.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxgrid.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxgrid.selection.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxgrid.pager.js"></script>
    	<script type="text/javascript" src="jqwidgets/jqxgrid.filter.js"></script>
    	<script type="text/javascript" src="jqwidgets/jqxgrid.sort.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxgrid.edit.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxdropdownlist.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxcombobox.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxpanel.js"></script>
        
        <script type="text/javascript">
        $(document).ready(function () {
    		var dataEdited = new Array();
    		
    		var sourceList =
    		{
    			datatype: "json",
    			datafields: [
    				{ name: 't_id', type: 'int' },           
    				{ name: 't_libelle', type: 'string' }                        
    			],
    			id: 't_id',
    			url: "sampledata/listdata.json"
    		};
    					  
    		var dataAdapterList = new $.jqx.dataAdapter(sourceList, { autoBind: true });
    		
    		var sourceGrid =
    		{
    			datatype: "json",
    			datafields: [
    				{ name: 'fiche_id', type: 'int' },
    				{ name: 'fiche_num', type: 'string' },
    				{ name: 'fiche_libelle', type: 'string' },
    				{ name: 'type_id', type: 'int' },
    				{ name: 'type_libelle', value: 'type_id', values: { source: dataAdapterList.records, value: 't_id', name: 't_libelle' } }                       
    			],
    			id: 'fiche_id',
    			url: "sampledata/griddata.json",
    			
    			updaterow: function (rowid, rowData, commit) {
    				dataEdited.push(rowData);
    				commit(true);
    			}
    		};
    		
    		var dataAdapterGrid = new $.jqx.dataAdapter(sourceGrid);
    			
    		$("#jqxgrid").jqxGrid(
    		{
    			width: 700, 
    			height: '100%',
    			source: dataAdapterGrid,                        
    			autoheight: false,        
    			sortable: true,
    			altrows: true,
    			enabletooltips: true,
    			editable: true,
    			selectionmode: 'singlerow',
    			editmode: 'selectedrow',
    			showfilterrow: true,
    			filterable: true,               
    			columns: [
    				{ text: 'idfiche', datafield: 'fiche_id', cellsalign: 'center',  hidden: true, editable: false },
    				{ text: 'Type fiche', datafield: 'type_id', displayfield: 'type_libelle', cellsalign: 'left', width: 250, columntype: 'dropdownlist', 
    					createeditor: function (row, cellvalue, editor) {
    						editor.jqxDropDownList({ source: dataAdapterList, displayMember: 't_libelle', valueMember: 't_id', autoDropDownHeight: true });
    					}
    				},
    				{ text: 'Numero fiche', datafield: 'fiche_num', cellsalign: 'center', width: 100 },
    				{ text: 'Libelle fiche', datafield: 'fiche_libelle', cellsalign: 'left', width: 350 }            
    			]
    		});	
    			
    		$("#addRow").click(function () {
    			$("#jqxgrid").jqxGrid('addrow', null, {}, 'first');
    		});				
    	});
        </script>
    </head>
    <body class='default'>
        <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
            <div id="jqxgrid">
            </div>
            <br />
            <button id="addRow">
                Add row</button>
        </div>
    </body>
    </html>
    

    sampledata/listdata.json :

    
    [{"t_id":1,"t_libelle":"type 1"},{"t_id":2,"t_libelle":"type 2"},{"t_id":3,"t_libelle":"type 3"}]
    

    sampledata/griddata.json :

    
    [{"fiche_id":1,"fiche_num":"FIC-0001","fiche_libelle":"TEST1","type_id":1,"type_libelle":"type 1"}]
    

    I would like to be able to add rows without them disappearing.
    Can you help me please ?


    Stanislav
    Participant

    Hello Yannx02,

    Ok, I managed to simulate your case with custom data.
    You are right, when you create a row it is fine, but when you create a second row the first one creates a duplicate, which disappears not the initial row itself.
    At least this is what I saw in my tests. Non the less, this shouldn’t be happening, and I am very thankful to you for giving us this example!

    But when I test a simple example, like the one on our website, it works fine, and no rows are duplicated/deleted.
    I will continue to test your example, And I will try to give you an update soon. I would advise you to do the same if possible.

    Best Regards,
    Stanislav

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

    • This reply was modified 6 years, 4 months ago by  Stanislav.

    Yannx02
    Participant

    Hello Stanislav,

    The problem does not occur with text columns
    The problem occurs as soon as we add a dropdowlist column.
    I will continue to test on my side as well.

    Best Regards,

    Yannx02


    Stanislav
    Participant

    Hello Yannx02,

    Thank you for the update!
    We appreciate your help.

    Best Regards,
    Stanislav

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

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

You must be logged in to reply to this topic.