Using "DropDown Grid" when editing cell in grid - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

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

Using "DropDown Grid" when editing cell in grid Posts

September 13, 2017 at 8:20 am Using "DropDown Grid" when editing cell in grid #95971

Participant

Hi,

When I use “DropDown Grid” when editing the cell in the grid and I click the paging buttons or the “DropDown Grid” filters, the component closes instead of changing the page or filtering content.

The component grows that I have selected a value and runs the event “rowrowselect”.

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">  
    <link rel="icon" type="image/png" sizes="16x16" href="{{ app.request.basepath }}/images/favicon-16x16.png">
    <link rel="stylesheet" href="{{ app.request.basepath }}/lib/jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="{{ app.request.basepath }}/lib/jqwidgets/styles/jqx.bootstrap.css" type="text/css" />  
	
    <script src="{{ app.request.basepath }}/lib/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="{{ app.request.basepath }}/lib/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="{{ app.request.basepath }}/lib/jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="{{ app.request.basepath }}/lib/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="{{ app.request.basepath }}/lib/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="{{ app.request.basepath }}/lib/jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="{{ app.request.basepath }}/lib/jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="{{ app.request.basepath }}/lib/jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="{{ app.request.basepath }}/lib/jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="{{ app.request.basepath }}/lib/jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="{{ app.request.basepath }}/lib/jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="{{ app.request.basepath }}/lib/jqwidgets/jqxgrid.edit.js"></script> 
    <script type="text/javascript" src="{{ app.request.basepath }}/lib/jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="{{ app.request.basepath }}/lib/jqwidgets/jqxdropdownbutton.js"></script>
    <script type="text/javascript" src="{{ app.request.basepath }}/lib/jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="{{ app.request.basepath }}/lib/jqwidgets/jqxdropdownlist.js"></script>
    <script src="{{ app.request.basepath }}/js/localization.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {      
            var source =
            {
                dataType: "json",
                dataFields: [
                    { name: 'app_id', type: 'number' },
                    { name: 'app_mat_voyageur', type: 'string' },                    
                    { name: 'nom_voyageur', type: 'string' },          
                    { name: 'app_mat_approbateur1', type: 'string' },                    
                    { name: 'nom_approbateur1', type: 'string' },           
                    { name: 'app_mat_approbateur2', type: 'string' },                    
                    { name: 'nom_approbateur2', type: 'string' }
                ],       
                id: 'app_id',
                url: "../getListeApprobateursParticuliersToJson"
            };
            var dataAdapter = new $.jqx.dataAdapter(source);

            var sourceLst =
            {
                datatype: "json",
                datafields: [
                    { name: 'matricule', type: 'string' },
                    { name: 'display', type: 'string' },
                    { name: 'displayfull', type: 'string' }
                ],
                url: "../getListeApprobateursSygmaToJson",
                id: 'matricule',
            };                    
            var dataAdapterLst = new $.jqx.dataAdapter(sourceLst);

            // Variables utilisées pour la récupération des valeurs sélection dans les listes "Approbateur 1" et "Approbateur 2"
            var matricule1;

            $("#grid_ApprobateursParticuliers").jqxGrid(
            {
                width: 350, 
                //height: '100%',
                source: dataAdapter,                
                theme: 'bootstrap',
                //pageable: true,
                autoheight: true,
                sortable: true,
                altrows: true,
                enabletooltips: true,
                editable: true,
               // editmode: 'selectedrow',
                showfilterrow: true,
                filterable: true,
                localization: getLocalization('fr'),
                selectionmode: 'none',
                columns: [
                    { text: 'Id', datafield: 'app_id', columntype: 'textbox', cellsalign: 'center', width: 25, hidden: true},
                    { text: 'Matricule', columngroup: 'Voyageur', datafield: 'app_mat_voyageur', columntype: "custom", cellsalign: 'center', width: 100, 
                        createEditor: function (row, cellvalue, editor, cellText, width, height) { 
                            editor.append('<div style="border-color: transparent;" id="jqxgrid-editor1"></div>');
                            editor.jqxDropDownButton({ width: 98, height: 28 , dropDownHorizontalAlignment: 'center' });

                            $("#jqxgrid-editor1").jqxGrid({
                                width: 500,
                                source: dataAdapterLst,
                                pageable: true,
                                autoheight: true,
                                columnsresize: true,
                                sortable: true,
                                altrows: true,
                                enabletooltips: true,        
                                showfilterrow: true,
                                filterable: true,                        
                                columns: [
                                  { text: 'Matricule', columntype: 'textbox', datafield: 'matricule', width: 90, cellsalign: 'center' },
                                  { text: 'Nom Prénom / Libellé', datafield: 'displayfull', columntype: 'textbox', width: 410 }         
                                ]
                            });

                            $("#jqxgrid-editor1").on('rowselect', function (event) {                         
                                var args = event.args;                        
                                var rowEdit = $("#jqxgrid-editor1").jqxGrid('getrowdata', args.rowindex);    

                                if(rowEdit !== undefined) {                            
                                    var dropDownContent = '<div style="position: relative; text-align:center;padding:10px 4px;">' + rowEdit['matricule'] + '</div>';
                                    matricule1 = rowEdit['matricule'];                            
                                    editor.jqxDropDownButton('setContent', dropDownContent);                            
                                }                                                                         
                            }); 
                            $("#jqxgrid-editor1").jqxGrid('selectrow', 0);

                        },
                        initEditor: function (row, cellvalue, editor, celltext, width, height) {   
                            var dropDownContent;
                            if( cellvalue == null) {
                                dropDownContent = '<div style="position: relative; text-align:center;padding:10px 4px;"></div>';
                            } else {
                                dropDownContent = '<div style="position: relative; text-align:center;padding:10px 4px;">' + cellvalue + '</div>';
                            }

                            editor.jqxDropDownButton('setContent', dropDownContent);                                                                                

                            setTimeout(function(){                                                   
                                var paginginformation = $('#jqxgrid-editor1').jqxGrid('getpaginginformation');
                                // The page's size.
                                var pagesize = paginginformation.pagesize;
                                $('#jqxgrid-editor1').jqxGrid('clearfilters');
                                var index = $('#jqxgrid-editor1').jqxGrid('getrowboundindexbyid', cellvalue);                        
                                $('#jqxgrid-editor1').jqxGrid('selectrow', index); 
                                var page=parseInt(((index+1)/pagesize))                                                
                                $("#jqxgrid-editor1").jqxGrid('gotopage', page);
                            }, 500);
                        },
                        getEditorValue: function (row, cellvalue, editor) {                 
                            // return the editor's value.
                            editor.jqxDropDownButton("close");
                            return matricule1;
                        } 
                    },
                    { text: 'Nom prénom / Libellé', columngroup: 'Voyageur', datafield: 'nom_voyageur', cellsalign: 'left', width: 250 },

                ]
            });   
        });
    </script>   
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="grid_ApprobateursParticuliers"></div>                                        
    </div>
</body>
</html>

Can you help me please ?

Thanks in advance.

September 14, 2017 at 8:42 am Using "DropDown Grid" when editing cell in grid #96004

Stanislav

Participant

Hello Yannx,

I did some testing and found that the main inconsistent behaviour comes from the editing.
I tried setting it like this: editmode: 'dblclick', and it worked fine.

I guess that it just sometimes it renders two clicks instead of one and unselects the cell, which leads to the closing of the DropDown.

Best Regards,
Stanislav

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

September 18, 2017 at 8:03 am Using "DropDown Grid" when editing cell in grid #96085

Yannx02

Participant

Hi,

I tried to configure it like this: editmode: ‘dblclick’ but the problem persists.

When I click in a filter of the jqxgrid-editor1, the component “DropDown Grid” closes instead of filtering the jqxgrid.

Yannx

September 20, 2017 at 8:01 am Using "DropDown Grid" when editing cell in grid #96153

Stanislav

Participant

Hi Yannx,

Unfortunately, I was not able to fully reproduce the issue you seem to be having.
Maybe you could send us a Fiddle.
Also I suggest looking through this old post:
https://www.jqwidgets.com/community/topic/can-not-filter-in-dropdowngrid/

Best Regards,
Stanislav

Author

Posts

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

You must be logged in to reply to this topic.