jQWidgets Forums

jQuery UI Widgets Forums Grid Conditionally show/hide edit button in renderer

This topic contains 2 replies, has 2 voices, and was last updated by  sjkcwatson 10 years, 3 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author

  • sjkcwatson
    Participant

    Is it possible with this example
    http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/popupediting.htm

    to use the cellrenderer on the “edit” button column to show/hide the edit button based on conditions for that row. For example, if the current user has permission to edit the row, show the edit button. If they do not, leave the cell blank.

    I have figured out how to return ‘Edit’ or ‘Locked’ as text and how to lock down the row from editing, but I would prefer to not show the button at all or possibly use an edit image and display a blank image if it cannot be edited.

    Thanks!


    Dimitar
    Participant

    Hello sjkcwatson,

    cellsrenderer for columntype: 'button' only changes the text of the buttons. You would be able to use an edit image and display a blank image if the row cannot be edited by applying cellsrenderer but to a column with another type.

    Best Regards,
    Dimitar

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


    sjkcwatson
    Participant

    Thank you, I was able to make it work using an image like in this example .. http://www.jqwidgets.com/community/topic/edit-imagebutton-in-grid/.

    Since I search these forums for assistance before asking, in case someone else is searching

      { text: 'Edit', datafield: 'Edit', width: 50, columntype: 'number', 
                            cellsrenderer:editcellrenderer
      var editcellrenderer = function (row, column, value, defaultHtml) {                   
                        var rowAddedByEmpID = $('#jqxStatusGrid').jqxGrid('getcellvalue', row, 'AddedByEmpID');
                        if (vAllowEdit != 'T' && (rowAddedByEmpID != cs_empID)) {
                            return '<div style="width: 100%">&nbsp;</div>';
                        }
                        else {
                            return '<div style="width: 100%"><img src="images/newicons/pencil.png" style="margin-left: 25%" /></div>';
                        };
                    $("#jqxStatusGrid").on("cellclick", function (event) {    
                        var column = event.args.column;            
                        var rowindex = event.args.rowindex;     
                        var columnindex = event.args.columnindex;       
                        if (columnindex == 3) {
                            // open the popup window when the user clicks a button.       
                            editrow = rowindex;
                            // get the clicked row's data and initialize the input fields.           
                            var dataRecord = $("#jqxStatusGrid").jqxGrid('getrowdata', editrow);
    
                            var rowAddedByEmpID = dataRecord.AddedByEmpID // $('#jqxStatusGrid').jqxGrid('getcellvalue', row, 'AddedByEmpID');
                            if (vAllowEdit == 'T' || (rowAddedByEmpID == cs_empID)) {
                                //Allow Edit
                                var offset = $("#jqxStatusGrid").offset();
                                $("#popupWindow").jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60 } });
                                $("#ecapaStatus").val(dataRecord.CAStatus);
                                // show the popup window.          
                                $("#popupWindow").jqxWindow('show');
                            };
                        }

    The If statement in the cellclick allows for checking to see if the person clicked on the “blank” cell by using the same paramaters that determined if the edit button was shown or not.

    Hope it helps.

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

You must be logged in to reply to this topic.