Unable to Create a Delete Confirmation for a selected GridPanel Row that also Alert the user if no rows are selected

I would like to add a delete confirmation before deleting a row from a GridPanel that also displays an alertbox if there's no rows selected (as opposed to nothing happening when the user clicks 'Delete' without having selected a row).

The following code creates the delete confirmation only when a row is selected in my 'CompanyGridPanel'. However, if a row is not selected, nothing happens.

Code:

---

<ext:ToolbarButton runat="server" Icon="Delete" Text="Delete" ID="btnDeleteRecord">
    <AjaxEvents>
      <Click OnEvent="DeleteClick">
          <Confirmation ConfirmRequest="true" Title="Confirm Delete" Message="Are you sure you want to delete this company?" />
          <ExtraParams>
            <ext:Parameter Name="recordId" Value="#{CompanyGridPanel}.getSelectionModel().getSelected().id" Mode="Raw" />
          </ExtraParams>
          <EventMask Msg="Deleting..." ShowMask="true" />
      </Click>
    </AjaxEvents>
</ext:ToolbarButton>

---

The following code creates the delete confirmation if a row has been selected. If a row has not been selected, an alert informs the user to select a row. However, if a row has been selected and the user clicks yes to confirm the deletion, the 'DeleteClick' event never gets fired.

Code:

---

<ext:ToolbarButton runat="server" Icon="Delete" Text="Delete" ID="btnDeleteRecord">
    <AjaxEvents>
        <Click OnEvent="DeleteClick" Before="return (#{CompanyGridPanel}.getSelectionModel().getSelected() != undefined);" >
            <Confirmation BeforeConfirm="if (#{CompanyGridPanel}.getSelectionModel().getSelected() == undefined) { Ext.Msg.alert('Warning', 'Please select a row'); return false; } else { return true; };" ConfirmRequest="true" Title="Confirm Delete" Message="Are you sure you want to delete this company?" />
            <ExtraParams>
                <ext:Parameter Name="recordId" Value="#{CompanyGridPanel}.getSelectionModel().getSelected()" Mode="Raw" />
            </ExtraParams>
            <EventMask Msg="Deleting..." ShowMask="true" />
        </Click>
    </AjaxEvents>
</ext:ToolbarButton>

---

Notice that I have to remove the 'id' from the parameter, so that it reads:

Code:

---

#{CompanyGridPanel}.getSelectionModel().getSelected()

---

If I leave the 'id' in as part of the parameter, the alertbox does not appear if a row has not been selected, but the delete confirmation does appear if a row has been selected. This is the same functionality as the first code block without the alertbox telling the user to select a row.

Can you tell me what I am missing to get a working delete confirmation with an alert if a row has not been selected?

I found a workaround that might be better, although I'd still like to know how to use both an Alert and a Confirmation on the same button (as discussed above).

This workaround disables the delete button on load and anytime the 'RowDeselect' event is fired. It enables the delete button anytime the 'RowSelect' event is fired.

The workaround was adopted from this Coolite example:
https://examples1.ext.net/#/GridPane.../Confirmation/

The delete button is defined below. Notice that the 'Disabled' flag is set to true.

Code:

---

<ext:ToolbarButton runat="server" Icon="Delete" Text="Delete" ID="btnDeleteRecord" Disabled="true">
    <AjaxEvents>
        <Click OnEvent="DeleteClick" >
            <Confirmation ConfirmRequest="true" Title="Confirm Delete" Message="Are you sure you want to delete this company?" />
            <ExtraParams>
                <ext:Parameter Name="recordId" Value="#{CompanyGridPanel}.getSelectionModel().getSelected().id" Mode="Raw" />
            </ExtraParams>
            <EventMask Msg="Deleting..." ShowMask="true" />
        </Click>
    </AjaxEvents>
</ext:ToolbarButton>

---

The SelectionModel is defined below. I added the 'RowSelect' and 'RowDeselect' listeners.

Code:

---

<SelectionModel>
    <ext:RowSelectionModel runat="server" SingleSelect="true">
        <Listeners>
            <RowSelect Handler="#{btnDeleteRecord}.enable();" />
            <RowDeselect Handler="if (!#{CompanyGridPanel}.hasSelection()) {#{btnDeleteRecord}.disable();}" />
        </Listeners>
    </ext:RowSelectionModel>
</SelectionModel>

---

Like I said before, this might or might not be the *right* solution, but I'd still like to know how to get both the Alert and Confirmation boxes to work together on a single button.

I further refined the functionality to make sure the 'Delete' button was disabled once clicked because no row is selected when returning to the gridpanel. I added a 'Success' attribute to the Click event.

Code:

---

<ext:ToolbarButton runat="server" Icon="Delete" Text="Delete" ID="btnDeleteRecord" Disabled="true">
    <AjaxEvents>
        <Click OnEvent="DeleteClick" Success="#{btnDeleteRecord}.disable();" >
            <Confirmation ConfirmRequest="true" Title="Confirm Delete" Message="Are you sure you want to delete this Company Employee?" />
            <ExtraParams>
                <ext:Parameter Name="CompanyEmployeeGridPanel_CompanyEmployeeId" Value="#{gpCompanyEmployee}.getSelectionModel().getSelected().id" Mode="Raw" />
            </ExtraParams>
            <EventMask Msg="Deleting..." ShowMask="true" />
        </Click>
    </AjaxEvents>
</ext:ToolbarButton>

---