Search code examples
javascriptjqueryjqgridfree-jqgrid

How to remove action buttons from posted rows in free jqgrid using Fontawesome checkbox formatter


Free jqgrid contain boolean hidden column IsPosted defined as

    {"label":null,"name":"IsPosted",
 "edittype":"checkbox","editoptions":{"value":"True:False","readonly":"readonly","disabled":"disabled"},
"align":"center",
"formatter":"checkboxFontAwesome4",
"editable":true,
"width":0,"classes":null,
"hidden":true,"stype":"select",
"searchoptions":{"sopt":["eq","ne"],
"value":":Free;true:Yes;false:No"}
    }],

delete, edit and custom post button needs to be removed from inline actions toolbar if this column has value true. Rhis is done using method

   disableRows('IsPosted', true);

It works with Clickable checkbox formatter. If checkboxFontAwesome4 formatter is used,

            isPosted = $(row.cells[iCol]).find(">span>div>input:checked").length > 0;

is always false. I tried also

            isPosted = $(row.cells[iCol]).children("input:checked").length > 0;

but this is false for all formatters. I tried also template = "booleanCheckboxFa", instead of formatter line but this does not show fontawecome icon.

How to fix it so that it works with checkboxFontAwesome4 formatter or with all formatters ?

var disableRows = function (rowName, isBoolean) {
    var iCol = getColumnIndexByName($grid, rowName),
              cRows = $grid[0].rows.length,
              iRow,
              row,
              className,
              isPosted,
              mycell,
              mycelldata,
              cm = $grid.jqGrid('getGridParam', 'colModel'),
              iActionsCol = getColumnIndexByName($grid, '_actions'), l;
    l = cm.length;
    for (iRow = 0; iRow < cRows; iRow = iRow + 1) {
        row = $grid[0].rows[iRow];
        className = row.className;
        isPosted = false;

        if ($(row).hasClass('jqgrow')) {
            if (!isBoolean) {
                mycell = row.cells[iCol];
                mycelldata = mycell.textContent || mycell.innerText;
                isPosted = mycelldata.replace(/^\s+/g, "").replace(/\s+$/g, "") !== "";
            }
            else {
                isPosted = $(row.cells[iCol]).find(">span>div>input:checked").length > 0;
            }
            if (isPosted) {
                if ($.inArray('jqgrid-postedrow', className.split(' ')) === -1) {
                    row.className = className + ' jqgrid-postedrow not-editable-row';
                    $(row.cells[iActionsCol]).attr('editable', '0');
                    $(row.cells[iActionsCol]).find(">div>div.ui-inline-del").hide();
                    $(row.cells[iActionsCol]).find(">div>div.ui-inline-post").hide();
                    $(row.cells[iActionsCol]).find(">div>div.ui-inline-edit").hide();
                }
            }
        }
    }
};

Solution

  • I'm not sure that I correctly understand your question. Probably you want just test whether the cell row.cells[iCol] contained checked symbol (<i> with the class fa-check-square-o) or unckecked (<i> with the fa-square-o). You can just use unformatter. If you prefer low-level way like

    isPosted = $(row.cells[iCol]).find(">span>div>input:checked").length > 0;
    

    then you can use

    isPosted = $(row.cells[iCol]).find("i").hasClass("fa-check-square-o");
    

    instead.

    UPDATED: One can use

    var isPostedStr = $.unformat.call(this, row.cells[iCol],
            {rowId: row.id, colModel: cm}, iCol);
    if (cm.convertOnSave) {
        isPosted = cm.convertOnSave.call(this, {
                       newValue: isPostedStr,
                       cm: cm,
                       oldValue: isPostedStr,
                       id: row.id,
                       //item: $grid.jqGrid("getLocalRow", row.id),
                       iCol: iCol
                   });
    }
    

    where I suppose that this is equal to $grid[0] and cm is colModel[iCol]. The returned value will be the string "true" or "false" and to have boolean variable you need convert it to true or false. To be exactly the returned value depend on editoptions.value which one use. template: "booleanCheckboxFa" uses editoptions: {value: "true:false", defaultValue: "false"}. So the returned value are the string "true" or "false". If you want to make clean conversion of results to Boolean I would recommend you to look at the code of convertOnSave. I included the call of cm.convertOnSave in case if it exist. In common case one should initialize item property of the row, but simple formatters like formatter: "checkboxFontAwesome4" don't uses the value.