jQWidgets Forums

Tagged: add row, dropdownlist column, edit row, jqxGrid ;, row

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

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

Author

jqxGrid add empty row problem with dropdownlist column Posts

February 1, 2018 at 2:24 pm jqxGrid add empty row problem with dropdownlist column #98551

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 ?

February 2, 2018 at 12:01 pm jqxGrid add empty row problem with dropdownlist column #98562

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/

February 5, 2018 at 8:33 am jqxGrid add empty row problem with dropdownlist column #98574

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

February 5, 2018 at 9:10 am jqxGrid add empty row problem with dropdownlist column #98575

Stanislav

Participant