Buttons in Grid Disable Events

[mcfloydParticipant]

I’m having an issue with buttons in a grid. The idea is that this is an admin page where one can edit a user displayed in the grid. I have successfully bound the buttons to events, but it only works if I define the events after the grid has rendered (in the ready: function() attribute of jqxGrid).

Everything works fine… the grid renders, buttons are changed to jqxButtons, click one and it opens a jqxWindow to a form with validators and such to edit the user. The problem lies when I click the button 3 times. Once works, then I close the jqxWindow and press again and it works, but the buttons become plain text and the buttons are removed.

I think this may be a problem with the grid code. Here is some relevant code:

// on complete of getting ajax data
            complete: function(response){
                myData.data = 'data';             
    
                // var submitButtonRenderer = function(index){
                //     return '<div class="submit" id="edit-' + index + '></div>';
                // }
                var responseText = response.responseText;

                if (typeof(responseText) == 'string') {

                    parsedData = $.parseJSON(responseText);
                    headerData = parsedData['headers'];

                    var columnsrenderer = function (value) {
                        return '<div style="text-align: center; margin-top: 5px;">' + value + '</div>';
                    }

                    for (var j in headerData) {
                        var entry = headerData[j];
                        var cellsFormat = '';                       
                        var dataFieldRow = {name: entry.attribute_var_name, type: entry.type};
                        
                        myDatafields.push(dataFieldRow);
                        cellsAlign = 'center';
                       
                        var deleteCellRenderer = function (row, columnfield, value, defaulthtml, columnproperties) {
                            return '<div class="btnDelete userButton" id="' + row +'">Delete User</div>';
                            //return '<button class="btnEdit" id="' + row +'">Edit User</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp<button class="btnDelete" class="btnEdit" id="' + row +'">Delete User</button>';
                        };
                        var editCellRenderer = function (row, columnfield, value, defaulthtml, columnproperties) {
                            return '<div class="btnEdit userButton" id="' + row +'">Edit User</div>';
                            //return '<button class="btnEdit" id="' + row +'">Edit User</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp<button class="btnDelete" class="btnEdit" id="' + row +'">Delete User</button>';
                        };

                        var userNameRenderer = function (row, columnfield, value) {
                            return '<div id="userName-' + row + '"style="text-align: center; margin-top: 5px;">' + value + '</div>';
                        }
                        if (entry.attribute_var_name == 'username'){
                            var dataColsRow = {
                                text: entry.display_name,
                                datafield: entry.attribute_var_name,
                                width: entry.grid_field_width_percent,
                                minwidth: entry.grid_field_width,
                                cellsformat: cellsFormat,
                                cellsalign: cellsAlign,
                                cellsrenderer: userNameRenderer,
                                renderer: columnsrenderer,
                                //rendered: headerTooltipRenderer(entry.tooltip)
                            };
                        }
                        else if (entry.attribute_var_name == 'delete'){
                            var dataColsRow = {
                                text: entry.display_name,
                                datafield: entry.attribute_var_name,
                                width: entry.grid_field_width_percent,
                                minwidth: entry.grid_field_width,
                                cellsformat: cellsFormat,
                                cellsalign: cellsAlign,
                                cellsrenderer: deleteCellRenderer,
                                renderer: columnsrenderer,
                                //rendered: headerTooltipRenderer(entry.tooltip)
                            };
                        }
                         else if (entry.attribute_var_name == 'edit'){
                            var dataColsRow = {
                                text: entry.display_name,
                                datafield: entry.attribute_var_name,
                                width: entry.grid_field_width_percent,
                                minwidth: entry.grid_field_width,
                                cellsformat: cellsFormat,
                                cellsalign: cellsAlign,
                                cellsrenderer: editCellRenderer,
                                renderer: columnsrenderer,
                                //rendered: headerTooltipRenderer(entry.tooltip)
                            };
                        }
                        else {
                            var dataColsRow = {
                                text: entry.display_name,
                                datafield: entry.attribute_var_name,
                                width: entry.grid_field_width_percent,
                                minwidth: entry.grid_field_width,
                                cellsformat: cellsFormat,
                                cellsalign: cellsAlign,
                                renderer: columnsrenderer,
                                //rendered: headerTooltipRenderer(entry.tooltip)
                            };  
                        }
                        myColumns.push(dataColsRow);
                    }
                    var mySource =
                    {
                        type: "POST",
                        url: adminUserUrl,
                        data: myData,
                        datatype: "json",
                        contenttype: "application/json; charset=utf-8",
                        datafields: myDatafields,
                        root: "data",
                        beforeprocessing: function(data){       
                            mySource.totalrecords = data.totalRows;
                        },
                        sort: function (){
                            $(".jqxAdminUserGrid").jqxGrid('updatebounddata');
                        },
                        filter: function () {  
                            $(".jqxAdminUserGrid").jqxGrid('updatebounddata', 'filter');
                        }
                    }
                    var settings = {
                        formatData: function(data){
                            data = JSON.stringify(data);
                            return data;
                        }
                    }
                    var myDataAdapter = new $.jqx.dataAdapter(mySource, settings);
                    // initialize jqxGrid

                    var btnClicked = "";
                    var currentId = 0;
                    $(".jqxAdminUserGrid").jqxGrid(
                    {
                        width: '100%',
                        source: myDataAdapter,
                        pageable: true,
                        autoheight: true,
                        sortable: true,
                        altrows: true,
                        enabletooltips: true,
                        virtualmode: true,
                        rendergridrows: function(){
                            return myDataAdapter
                            .records;
                        },
                        columns: myColumns,
                        theme: 'darkblue',
                        ready: function () {
                            $(".userButton").jqxButton({
                                theme: 'darkblue',
                                width: '100%',
                                height: '26px',
                                disabled: false
                            });
                            $('.userButton').click(function () {
                                btnClicked = "Edit";
                                currentId = $(this).attr('id');
                                //popup window
                                myData = {data: "userinfo", username: $("#userName-" + currentId).html()};
                                myDatafields = [];
                                myColumns = [];
                                $.ajax({
                                    type: "POST",
                                    url: adminUserUrl,
                                    data: JSON.stringify(myData),
                                    dataType: "json",
                                    contentType: "application/json; charset=utf-8",
                                    complete: function(response){
                                        var responseText = response.responseText;
                                        if (typeof(responseText) == 'string') {
                                            parsedData = $.parseJSON(responseText);
                                            $("[name='user_id']").val(parsedData['user_id']);
                                            $("[name='username']").val(parsedData['username']);
                                            $("[name='email']").val(parsedData['email']);
                                            $("[name='display_name']").val(parsedData['display_name']);
                                            $("[name='inventory_user_id']").val(parsedData['inventory_user_id']);
                                            $("[name='role_id']").val(parsedData['role_id']);
                                        }
                                    }
                                });
                                if ($(this).hasClass('btnEdit')){
                                    $("[name='submit']").removeAttr("disabled");
                                    $("[name='delete']").attr("disabled", "disabled");
                                    $("#passwordConfirmWindow").jqxWindow('close');
                                    $("#editUserWindow").jqxWindow('open');
                                }
                                else if ($(this).hasClass('btnDelete')){
                                    $("[name='delete']").removeAttr("disabled");
                                    $("[name='submit']").attr("disabled", "disabled");
                                    $("#userNameContent").html("Are you sure you want to delete " + $("#userName-" + currentId).html());
                                    $("#editUserWindow").jqxWindow('close');
                                    $("#passwordConfirmWindow").jqxWindow('open');
                                }
                            });
                        }
                    }); 
                }
            }
        });
    }

I hope this is enough information to properly debug.

Thanks
-mcfloyd

[mcfloydParticipant]

Just a side note: This same thing happens when I resize the page, and I have had similar problems with a grid where I have files in it and embed a progress bar for each file in the grid.

[Peter StoevKeymaster]

Hi mcfloyd,

The problem is that you try to render widgets within the Grid using cellsrenderer. This is not supported. By using cellsrenderer, you can render only HTML, but not widgets.

Best Regards,
Peter Stoev

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

[Author]

Posts