How to conditionally show alert based on the RadioButtonList Selection.

[gc_0620]

Folks,

I am using RadControls for ASP.NET AJAX Q3 2010 SP2 with VS2010. I am using Form Template for editing rows. Below is my code.

In my form I have a RadioButton list (RadioButtonListApprovalType) with 3 list items. (Approved, Denied and Pending). I would like to see if the user's selects 'Denied', prior to updating the form, show an alert (i.e. 'Are your sure to Deny the Process?'). If user's chooses 'Yes', Update the row. If user's chooses 'No', Cancel the update. Basically I would like to see the same sort of alert prior to Deleting Radgrid rows.

Thanks

GC_0620
______________

<telerik:RadGrid ID="RadGrid1" runat="server" AllowFilteringByColumn="True" AllowPaging="True"
                AllowSorting="True" DataSourceID="SqlDataSource3" GridLines="None" AutoGenerateColumns="False"
                PageSize="8" Skin="Office2007" AllowAutomaticDeletes="True"
                AllowAutomaticUpdates="True" EnableLinqExpressions="False" OnColumnCreated="RadGrid1_ColumnCreated"
                OnUpdateCommand="RadGrid1_UpdateCommand"

                OnItemCommand="RadGrid1_ItemCommand" OnPreRender="RadGrid1_PreRender" OnItemDataBound="RadGrid1_ItemDataBound">
                        '''''
                        ''''
                    <EditFormSettings EditFormType="Template">
                        <FormTemplate>
                            <table id="Table2" class="form-controls" cellspacing="2" cellpadding="1" width="100%"
                                border="0" rules="none" style="border-collapse: collapse; background: #DCDCDC;">

                                            <tr>
                                                <td style="font-size: 11px">
                                                    Approval status:
                                                </td>
                                                <td>
                                                    <asp:RadioButtonList ID="RadioButtonListApprovalType" DataTextField="ProcessStatus"
                                                        TabIndex="11" DataValueField="ProcessStatus"
                                                        RepeatDirection="Horizontal" runat="server" SelectedValue='<%# Bind("ProcessStatus") %>'>
                                                        <asp:ListItem Text="" />
                                                        <asp:ListItem Text="Approved" />
                                                        <asp:ListItem Text="Denied" />
                                                        <asp:ListItem Text="Pending" />
                                                    </asp:RadioButtonList>
                                                </td>


                                </tr>
                                <tr>
                                    <td align="right" colspan="2">
                                        <asp:Button ID="btnUpdate" runat="server" CssClass="form-button" CommandName='<%# (Container is GridEditFormInsertItem) ? "PerformInsert" : "Update" %>'
                                            Text='<%# (Container is GridEditFormInsertItem) ? "Insert" : "Update" %>' />

                                        <asp:Button ID="btnCancel" runat="server" CausesValidation="False" CssClass="form-button"
                                            CommandName="Cancel" Text="Cancel" />
                                    </td>
                                </tr>
                            </table>
                        </FormTemplate>
                    </EditFormSettings>
                    '''''
                    '''''

            </telerik:RadGrid>

[Princy]

Hello,

Try the following approach to achieve this. Attach 'onclick' client event to each ListItem in RadioButtonList to get which ListItem is selected. Then in 'onclientclick' event of Update button check the condition and cancel/perform update operation like below.

ASPX:

<td>
        <asp:RadioButtonList ID="RadioButtonListApprovalType" DataTextField="ProcessStatus"
            TabIndex="11" DataValueField="ProcessStatus" RepeatDirection="Horizontal" runat="server">
            <asp:ListItem Text="" />
            <asp:ListItem Text="Approved" onclick="validateButtonList(this);" />
            <asp:ListItem Text="Denied" onclick="validateButtonList(this);" />
            <asp:ListItem Text="Pending" onclick="validateButtonList(this);" />
        </asp:RadioButtonList>
    </td>
</tr>
<tr>
    <td align="right" colspan="2">
        <asp:Button ID="btnUpdate" OnClientClick="return validateUpdate();" runat="server"
            CssClass="form-button" CommandName='<%# (Container is GridEditFormInsertItem) ? "PerformInsert" : "Update" %>'
            Text='<%# (Container is GridEditFormInsertItem) ? "Insert" : "Update" %>' />
        <asp:Button ID="btnCancel" runat="server" CausesValidation="False" CssClass="form-button"
            CommandName="Cancel" Text="Cancel" />
    </td>
</tr>

Java Script:

<script type="text/javascript">
    function validateUpdate() {
        if (status == "Denied") {
            return (confirm('Are you sure..?'));
        }
    }
    var status;
    function validateButtonList(radioButtonListObj) {
        status = radioButtonListObj.value;
    }
 </script>

Thanks,
Princy.

[gc_0620]

Thanks Princy. But there is one issue. For example: If I select 'Approve' or 'Pending' in Radiobutton Selection, Update link button does not work (i.e. Edit Form Does not close or updates any thing). Just freezes. The same is true if RadioButton selection list is 'Denied' and if I choose 'OK' after the Javascript message box 'Are you sure..?' 

Another word I can't update the form regardless of RadioButtonlist Selection (i.e. close the form template and just show the RadGrid). The only way to exit the Form Template by choosing 'Cancel' (i.e btnCancel)'.

Appreciate for your help..
gc_0620

[Tsvetina]

Hello,

In this case, there are two things that you should check:

-Does the grid update its records if none of this logic is performed (just a normal grid which allows updates unconditionally)?
-In case the form does not postback at all when you click the Update button, then there must be some javascript error. Could you please check for any and let us know what they are?

Greetings,
Tsvetina
the Telerik team

[gc_0620]

Hi Tsvetina
Sorry for the late answer; had some family emergency.

1) Yes Grid Updates if none of the loogic is performed. It updates unconditionally.
2) I am not too fimiliar with Javscript.

Basically I want to see:
a) if RadioButton Selection is "Denied", a popup alert "Do you want to continue?" If the answer is "Yes". Perform the Grid Update and close the formtemplate. If answer is "No", cancel the update and close the formtem template.
b) if RadioButton Selection is "Approved" or "Pending" no popup alert. Perform the Grid Update and close the formtemplate.
c) Show the Radgrid after formtemplate is closed.

Another Issue is it possible to invoke "RadGrid_GridExporting" event immediately after Update if RadioButton selection is "Approved'? I want to Export the updated row to Pdf and programmatically save it to Server in a predefined location without showing the the PDF popup window, 

Thanks
gc_0620

[Tsvetina]

Hello,

I may have overlooked the client code provided in one of the previous posts. I assume the problem is caused by the fact that the validateUpdate function does not return true when the status is not denied. Could you please see how your grid behaves if you modify the script like that:

<script type="text/javascript">
    function validateUpdate() {
        if (status == "Denied") {
            return (confirm('Are you sure..?'));
        }
        return true;
    }
    var status;
    function validateButtonList(radioButtonListObj) {
        status = radioButtonListObj.value;
    }
 </script>

Best wishes,
Tsvetina
the Telerik team