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


    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">
        <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) {
    		var dataAdapterGrid = new $.jqx.dataAdapter(sourceGrid);
    			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');
    <body class='default'>
        <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
            <div id="jqxgrid">
            <br />
            <button id="addRow">
                Add row</button>

    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 ?


    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,

    jQWidgets Team

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


    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,



    Hello Yannx02,

    Thank you for the update!
    We appreciate your help.

    Best Regards,

    jQWidgets Team

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

You must be logged in to reply to this topic.