How to dim custom button conditionally?

[pelurusilver]

i create a custom button as shown below, next I want the button1 to be dimmed if from the dataset got content text of "Error" inside "TRIGGER" field. can someone help to provide the complete code?
i create this complete script but, the button1 still not dimmed;

// Page Render event
function Page_Render()
{
    $options = &$this->OtherOptions;

    // Create my_custom_button
    $option = &$options["action"];
    $item = &$option->add("my_custom_button");
    $item->Body = "<a class=\"ew-action\" title=\"Clear All Data\" data-caption=\"Clear All Data\" href=\"custom\\reset_sd_import_non_kcb2_inline.php\">Clear All Data</a>";
    $item->Visible = TRUE;

    // Create my_custom_button1
    $option = &$options["action"];
    $item = &$option->add("my_custom_button1");

    // Check if any row in TRIGGER contains the text 'Error'
    $errorCondition = false;

    foreach ($this->data as $row) {
        // Assuming TRIGGER is the correct field name, adjust it if needed
        $triggerContent = $row['TRIGGER'];

        // Check if the TRIGGER field contains the exact text 'Error' (case-insensitive)
        if (strcasecmp($triggerContent, 'Error') === 0) {
            $errorCondition = true;
            break;
        }
    }

    // Set the appropriate attributes for my_custom_button1
    if ($errorCondition) {
        $item->Visible = FALSE;
    } else {
        $item->Visible = TRUE;
        $item->Body = "<a class=\"ew-action\" title=\"Move Data To Permanent Table\" data-caption=\"Move Data To Permanent Table\" href=\"custom\\button_add_data_to_sd_trans_non_kcb_a_inline.php\">Move Data To Permanent Table</a>";
    }

 
}

[arbei]

You set your item as visible or not only, not "dimmed".

You may also read Disabled state.

[pelurusilver]

i really stucked. can someone help me

the button still can be click even there is 'Error' inside the TRIGGER field.

// Page Render event
function Page_Render()
{
    $options = &$this->OtherOptions;
    $option = &$options["action"];

    // Clear All Data button
    $item = &$option->add("my_custom_button");
    $item->Body = "<a class=\"ew-action\" title=\"Clear All Data\" data-caption=\"Clear All Data\" href=\"custom\\reset_sd_import_non_kcb2_inline.php\">Clear All Data</a>";
    $item->Visible = TRUE;

    // Move Data To Permanent Table button
    $item = &$option->add("my_custom_button1");
    $item->Body = "<a class=\"ew-action\" title=\"Move Data To Permanent Table\" data-caption=\"Move Data To Permanent Table\" href=\"custom\\button_add_data_to_sd_trans_non_kcb_a_inline.php\">Move Data To Permanent Table</a>";
    $item->Visible = TRUE;

    // Disable my_custom_button1 if TRIGGER column from any rows is "Error"
    $rows = $this->AllRows;
    $disableButton1 = false;

    foreach ($rows as $row) {
        if ($row["TRIGGER"]->CurrentValue == "Error") {
            $disableButton1 = true;
            break;
        }
    }

    if ($disableButton1) {
        // Add JavaScript to disable my_custom_button1
        echo '<script>
            document.addEventListener("DOMContentLoaded", function() {
                var myCustomButton1 = document.querySelector(".ew-action[data-caption=\'Move Data To Permanent Table\']");
                myCustomButton1.setAttribute("disabled", true);
                myCustomButton1.style.pointerEvents = "none";
                myCustomButton1.style.opacity = "0.5"; 
            });
        </script>';
    }
}

[arbei]

There are many problems in your code:

href=\"custom\\button_add_data_to_sd_trans_non_kcb_a_inline.php\"

You should use "/" and absolute path, e.g. the output HTML should be like href="/mybasepath/custom/button_add_data_to_sd_trans_non_kcb_a_inline.php"

$rows = $this->AllRows;

There is no $this->AllRows. You better query the database to get what you need, you may use $this->CurrentFilter to get the WHERE clause of the current page.

echo '<script>...</script>';

You should not output JavaScript in Page_Render server event. You should add the "disabled" attribute to your button in the server event, as suggested:

You may also read Bootstrap button Disabled state.

[pelurusilver]

My code is working now, wrongly placed under Page_Render, it should be under Row_Rendered.

function Row_Rendered() {
    $rowData = $this->TRIGGER->CurrentValue;

    if (stripos($rowData, 'Error') !== false) {
        $this->TRIGGER->CellAttrs["style"] = "background-color: #FF0000; color: #FFFFFF;";

        // Add JavaScript to disable my_custom_button1
        echo '<script>
            document.addEventListener("DOMContentLoaded", function() {
                var myCustomButton1 = document.querySelector(".ew-action[data-caption=\'Move Data To Permanent Table\']");
                myCustomButton1.setAttribute("disabled", true);
                myCustomButton1.style.pointerEvents = "none";
                myCustomButton1.style.opacity = "0.5"; // You can set any styling to indicate the button is disabled
            });
        </script>';
    } else {
        $this->TRIGGER->CellAttrs["style"] = "background-color: #FFFFFF; ";
    }
}

[arbei]

Row_Rendered is outputted per row, you should not output your JavaScript multiple times. You may check if it is already outputted first.