I need to quit edit mode of grid's cell after selecting a dropdownlist item

[gtocuyoParticipant]

Hello,

I’ve a pretty similar grid like your example’s one at

http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/cascadingediting.htm?arctic

I mean, a grid with a column with a dropdownlist editor and I need to set focus on the contiguos cell when I select any item of the dropdownlist on the edit mode of the first cell.

Managing it on the “close” event of the dropdownlist could work for me, but I have not found a way to set the fous on the next cell of the same row and exiting the edit mode of my dropdownlist cell.

In fact, I found a similar behaviour in the gris of your example, because you have to press the TAB key or ENTER key after selecting any item of the dropdownlist to exit edit mode of the cell.

Thanks in advance for any ideas…

[Peter StoevKeymaster]

Hi gtocuyo,

You can use endcelledit method to quit edit mode. For example: http://jsfiddle.net/jqwidgets/Z6WHX/

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[gtocuyoParticipant]

Hi Peter, thanks for your response.

I’d cheked the API already for endcelledit method as you suggest in the example but it doesn’t work for me like that (I mean, with a external button to trigger de method).

I need to get it done just when the user selects a value from de dropdownlist of the cell in my grid.

Here is an extract of what i’m trying to do:

            $("#jqxgrid").jqxGrid(
            {
                width: '100%',
                height: 500,
                source: dataAdapter,
                editable: true,
                selectionmode: 'checkbox',
                autoheight: true,
                showstatusbar: true,
                showtoolbar: true,
                showaggregates: true,
                rowdetails: true,
                rowdetailstemplate: { rowdetails: "<div style='margin: 10px;'><ul style='margin-left: 30px;'><li class='auxiliares'></li><li class='movBancarios'></li></ul><div class='tabAuxiliares'></div><div class='tabMovBancarios'></div></div>", rowdetailsheight: 250 },
                initrowdetails: rowTabs,
                columns: [
                      { text: 'CUENTA', datafield: 'cuenta', align:'center', width:'25%', columntype: 'dropdownlist', cellsalign:'left',
                            createeditor: function (row, column, editor) {
                                // assign a new data source to the combobox.

                                editor.jqxDropDownList(
                                    {
                                         autoDropDownHeight: true, source: dataAdapterCuentas, displayMember: "label", valueMember: "value", placeHolder:'- Seleccione -', searchMode:  'containsignorecase', filterable: true
                                    }).on('close',function(event){   
                                        $("#jqxgrid").jqxGrid('endcelledit', 0, "cuenta", false); //>THIS IS THROWING "Maximum call stack size exceeded" ERROR
                                    }); 
               
                            },
                            // update the editor's value before saving it.
                            cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
                                // return the old value, if the new value is empty.
                                if (newvalue == "")
                                    return oldvalue;
                            },
                            cellsrenderer: cellRenderer
                      }, 
                     ...

Thanks again four your time.

[Peter StoevKeymaster]

Here’s a sample: http://jsfiddle.net/2jeejehv/

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[gtocuyoParticipant]

Peter, I think we’re getting closer to the goal.

Your timeout function worked well, when I select any item of the dropdown it execute de endcelledit method and the dropdown dissapear but, now I’m having the following error after selecting the item of de dropdownlist:

jqxdropdownlist.js:6 Uncaught TypeError: Cannot read property ‘focus’ of undefined
at b (jqxdropdownlist.js:6)
at jqxdropdownlist.js:6

Any ideas?

Here’s the code block of my jqxgrid:

var editrow  = -1;

            $("#jqxgrid").jqxGrid(
            {
                width: '100%',
                height: 500,
                source: dataAdapter,
                editable: true,
                selectionmode: 'checkbox',
                autoheight: true,
                showstatusbar: true,
                showtoolbar: true,
                showaggregates: true,
                rowdetails: true,
                rowdetailstemplate: { rowdetails: "<div style='margin: 10px;'><ul style='margin-left: 30px;'><li class='auxiliares'></li><li class='movBancarios'></li></ul><div class='tabAuxiliares'></div><div class='tabMovBancarios'></div></div>", rowdetailsheight: 250 },
                initrowdetails: rowTabs,
                columns: [
                      { text: 'CUENTA', datafield: 'cuenta', align:'center', width:'25%', columntype: 'dropdownlist', cellsalign:'left',
                            createeditor: function (row, column, editor) {
                                // assign a new data source to the combobox.

                                editor.jqxDropDownList(
                                    {
                                         autoDropDownHeight: true, source: dataAdapterCuentas, displayMember: "label", valueMember: "value", placeHolder:'- Seleccione -', searchMode:  'containsignorecase', filterable: true
                                    }).on('close',function(event){
                                        setTimeout(function() {
                                            $("#jqxgrid").jqxGrid('endcelledit', editrow, "cuenta", false); 
                                        });
                                    }); 
               
                            },
                            initeditor: function(row, column, editor) {
                                editrow = row;
                            },                            
                            cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {

                                if (newvalue == "")
                                    return oldvalue;
                            },
                            cellsrenderer: cellRenderer
                      },                                           
                      { text: 'GLOSA', datafield: 'glosa', align:'center', cellsalign:'left', 
                        aggregates: ['sum'], 
                        aggregatesrenderer: function (aggregates)
                        {                            
                            var renderstring = "";
                            $.each(aggregates, function (key, value) {
                                //renderstring += '<div style="text-align:right;margin: 5px;font-weight:bolder;">TOTALES:</div>';
                            });
                            return renderstring;
                        } 
                      },
                      { text: 'C.C', datafield: 'ceco', align:'center', columntype: 'combobox',  cellsalign:'left', hidden: true, width: '10%' },
                      { text: 'SUCURSAL', datafield: 'sucursal', align:'center', columntype: 'combobox',  cellsalign:'left', hidden: true, width: '10%' },
                      { text: 'DEBE', datafield: 'debe', align:'center', cellsalign:'right', width: '10%',
                        aggregates: ['sum'],   
                        aggregatesrenderer: function (aggregates) {
                          var renderstring = "";
                          $.each(aggregates, function (key, value) {
                              renderstring += '<div style="text-align:right;margin: 5px;font-weight:bolder;">$' + value + '</div>';
                          });
                          return renderstring;
                        }              
                      },
                      { text: 'HABER', datafield: 'haber', align:'center', cellsalign:'right',  width: '10%',
                        aggregates: ['sum'],
                        aggregatesrenderer: function (aggregates) {
                          var renderstring = "";
                          $.each(aggregates, function (key, value) {
                              renderstring += '<div style="text-align:right;margin: 5px;font-weight:bolder;">$' + value + '</div>';
                          });
                          return renderstring;
                        }  
                      }
                  ]
            }).on('cellvaluechanged', function (event) 
            {
                var datafield = event.args.datafield;
                if(datafield === 'cuenta')
                    ShowHideColumns();

            }).on('rowexpand', function (event) 
            {

                var rowBoundIndex = args.rowindex;
                var val = $('#jqxgrid').jqxGrid('getcellvalue', rowBoundIndex, "cuenta");
                if(val === "" || val === undefined)
                    $('#jqxgrid').jqxGrid('hiderowdetails', rowBoundIndex);
                else{
                    // GET ALL SELECTE ROW INDEX (RETURNS ARRAY)
                    var prev_row = $('#jqxgrid').jqxGrid('selectedrowindexes');
                    // IF PREV ROW NOT NOT BLANK LOOP THROUGH ARRAY HIDING selectedrowindexes
                    if (prev_row != '') {
                        for (var i = 0; i < prev_row.length; i++) {
                            $('#jqxgrid').jqxGrid('hiderowdetails', prev_row[i]);
                        }
                    };
                    // GET INDEX
                    var index = $('#jqxgrid').jqxGrid('getrowboundindex', event.args.rowindex);      
                    // SET CURRENT ROW AS SELECTED
                    $('#jqxgrid').jqxGrid({selectedrowindexes: [index]});
                }

            }).on('rowcollapse', function (event) 
            {
                $('#jqxgrid').jqxGrid('clearselection');
                
            })
        });

Is there any way, for example, to set programmatically, the focus on the next column (“glosa”) to get rid of that error?

Thanks again…

[Peter StoevKeymaster]

This does not seem to happen in the sample I provided. I would suggest you to test and debug what in your code makes this error to be thrown.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[gtocuyoParticipant]

Peter,

I’ve detected the issue, I’d like to know if you have any idea of what could be happening…

According with selected value of the cell edition dropdownlist, I need to show/hide some columns of the grid.

Just right there seems to be the error with jqxdropdownlist.js…

In the grid i’m using this event:

.on(‘cellvaluechanged’, function (event) {
if(event.args.datafield === ‘cuenta’){
ShowHideColumns();
}
})

So, after your timeout function (in the dropdownlist), it triggers and call ShowHideColumns function.

This is the function’s code:

        function ShowHideColumns(){        

            var rows = $('#jqxgrid').jqxGrid('getrows');
            var daRecords = dataAdapterCuentas.records;
            var showCC = false;
            var showSuc = false;
            for (var i = 0; i < rows.length; i++) 
            {
                var valCuenta = rows[i].cuenta;
                if(valCuenta !== undefined && valCuenta !== "")
                {
                    var filtrado = $.grep(daRecords, function(n, i){
                        return n.label == valCuenta;
                    });
        
                    if(filtrado !== undefined && filtrado.length > 0)
                    {
                        if(filtrado[0].hasCC === "1")
                            showCC = true;
                        if(filtrado[0].hasSuc === "1")
                            showSuc = true;
                    }
                }
            }

       //IF I COMMENT THIS BLOCK THE ERROR IS NOT RAISED ////////
            if(showCC)
                $("#jqxgrid").jqxGrid('showcolumn', 'ceco');
            else
                $("#jqxgrid").jqxGrid('hidecolumn', 'ceco');

            if(showSuc)
                $("#jqxgrid").jqxGrid('showcolumn', 'sucursal');
            else
                $("#jqxgrid").jqxGrid('hidecolumn', 'sucursal');
       //BUT IF I USE IT, AFTER SHOWING/HIDING THE NEEDED COLUMN, THE ERROR APPEARS

        };

Do you have any clue about it??

Thank you very much for your time.

[Peter StoevKeymaster]

Unfortunately, I do not think that this could be achieved as all these operations affects the rendering and override built-in behaviors.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[gtocuyoParticipant]

In that case, what should be the accurate approach to solving the showing/hidding columns behaviour?

In which event should I trigger the showcolumn / hidecolumn methods?

Best Regards…

[gtocuyoParticipant]

Peter,

This feature (hiding/showing grid columns according dropdownlist selected option when that dropdown is the editor of a some grid’s cell) is very important to us in our evaluation process of jqwidgets in order to use the library for our company’s new project.

So, I’ve checked a unminified version of the class jqxdropdownlist.js and I’ve found in the focus function (line 220) the problem for our implementation…

Originally, the function goes like this:

        focus: function() {
            try {
                var a = this,
                    b = function() {
                            a.host.focus(), a._firstDiv && a._firstDiv.focus()
                    };
                b(), setTimeout(function() {
                    b()
                }, 10)
            } catch (a) {}
        },

But 10 miliseconds for the setTimeout function is a very short time and then the instruction a.host.focus() fails because it doesn’t find the element (a.host is undefined).

Just for testing purposes, I’ve made two different modifications and the two of them worked nicely:

Mod. # 1:

        focus: function() {
            try {
                var a = this,
                    b = function() {
                        if(a.host !== undefined)
                            a.host.focus(), a._firstDiv && a._firstDiv.focus()
                    };
                b(), setTimeout(function() {
                    b()
                }, 10)
            } catch (a) {}
        },

And Mod. # 2:

        focus: function() {
            try {
                var a = this,
                    b = function() {
                        a.host.focus(), a._firstDiv && a._firstDiv.focus()
                    };
                b(), setTimeout(function() {
                    b()
                }, 0)
            } catch (a) {}
        },

Either version of focus implementation worked fine.

So my final questions / comment for this thread:

Is any way to set the time interval for dropdownlist’s focus like a parameter? So one could set it at 0 when it’s needed; or what should be the problem if this function sets this value in 0 for the timeout as default instead of 10 ?

Or in the other hand,

Is there any chance to override the focus function so I can include de conditional showed in “Mod. #1” in order to add the condition to check if a.host === undefined ?

Thanks again for your time and attention.

Best Regards.

[Peter StoevKeymaster]

Hi gtocuyo,

Glad to learn that your issue is resolved now. However, I should point out that any modification of our code is in violation with the EULA so please avoid doing such things in the future.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[gtocuyoParticipant]

Hi Peter,

I’m perfectly aware of that, and because so I was asking you what I asked.

I remember you I’m just doing some tests with the library according with our company’s project needs for licence buying evaluation, because of that, I need to know what can (and what cannot) be done with jqwidgets, as you can see, it’s pointless for us to buy licences if the library doesn’t cover all our needs right out of the box or isn’t any possible workarounds.

Could you please answer my questions made before?

Is any way to set the time interval for dropdownlist’s focus like a parameter? So one could set it at 0 when it’s needed; or what should be the problem if this function sets this value in 0 for the timeout as default instead of 10 ?
Or in the other hand,
Is there any chance to override the focus function so I can include de conditional showed in “Mod. #1” in order to add the condition to check if a.host === undefined ?

Thank you so very much.

[Peter StoevKeymaster]

Hi gtocuyo,

1. All the properties are listed in the API i.e we do not have such property.
2. No. It’s not possible through the built-in API to override methods. However, you can put overrides through Javascript prototypes.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts