[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.

[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.

[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,

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.

[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…

[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.

[Author]

Posts