Conditional Confirm Dialog for GridButtonColumn

[Chris]

Requirements
RadControls version	2009.1.402.35
.NET version	3.5 SP1
Visual Studio version	2008 SP1
programming language	VB.NET / JavaScript
browser support	all browsers supported by RadControls

PROJECT DESCRIPTION
I was recently tasked to display a list of data in a rad grid and alert users if a change they were about to apply would have other changes that might impact the system globally. One of the things that I love about the RadGrid is the integration with RadWindow and the ability to add a confirm dialog before performing a command in the datagrid. However, I needed a way to conditionally set this to alert users only when the change they wanted to apply would affect other places in the system. If the change didn't impact other areas of the system, there was no reason to alarm the user.

Initially, I set up my RadGrid as follows:

        <telerik:RadGrid ID="gridFundList" runat="server" AllowMultiRowSelection="false"
            AllowAutomaticDeletes="false" AllowAutomaticInserts="false" AllowAutomaticUpdates="false"
            AllowFilteringByColumn="false" AllowPaging="false" AllowSorting="false" ShowGroupPanel="false"
            ShowFooter="false" ShowHeader="true" ShowStatusBar="true">
            <MasterTableView DataKeyNames="FundID" AutoGenerateColumns="false" ShowFooter="true">
                <Columns>
                    <telerik:GridButtonColumn UniqueName="Toggle" ButtonType="ImageButton" ImageUrl="~/images/buttonicons/lightbulb_off.png"
                        CommandName="ToggleReadable" ConfirmDialogType="RadWindow" ConfirmText="Are you sure you wish to change the global access settings for this fund?<br/><br/><strong>All</strong> applied rules for individual users <strong>will be</strong> removed.<br/><br/>Click <strong>OK</strong> to continue."
                        ConfirmTitle="Change Global Settings">
                        <ItemStyle Width="30px" />
                    </telerik:GridButtonColumn>
                    <telerik:GridBoundColumn UniqueName="FundID" DataField="FundID" DataFormatString="{0:00}"
                        HeaderText="Fund">
                        <ItemStyle Width="75px" HorizontalAlign="Center" VerticalAlign="Top" />
                        <HeaderStyle HorizontalAlign="Center" />
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn UniqueName="Desc" DataField="FundName" HeaderText="Description">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn UniqueName="Count" DataField="TotalCostCenterItemsInFund"
                        HeaderText="Items In Fund" DataFormatString="{0:#,##0} items found." Aggregate="Sum">
                        <ItemStyle HorizontalAlign="Right" Width="125px" />
                        <FooterStyle HorizontalAlign="Right" />
                        <HeaderStyle HorizontalAlign="Center" />
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn UniqueName="RuleCount" DataField="FundRulesApplied" HeaderText="Rules Applied"
                        DataFormatString="{0:#,##0} rules applied." Aggregate="Sum">
                        <ItemStyle HorizontalAlign="Right" Width="125px" />
                        <FooterStyle HorizontalAlign="Right" />
                        <HeaderStyle HorizontalAlign="Center" />
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn UniqueName="CreateDate" DataField="CreateDate" DataFormatString="{0:d} at {0:t}"
                        HeaderText="Created">
                        <ItemStyle Width="150px" />
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn UniqueName="ModifyDate" DataField="ModifyDate" DataFormatString="{0:d} at {0:t}"
                        HeaderText="Modified">
                        <ItemStyle Width="150px" />
                    </telerik:GridBoundColumn>
                </Columns>
            </MasterTableView>
        </telerik:RadGrid>

This worked great, but every time a user clicked on the ToggleReadable command they were prompted that they might remove existing rules. I could imagine a scenario where I would be receiving calls every time a user wanted to make a change, afraid they were about to break something.

After investigating the HTML output, I discovered how easy this really is to implement on a conditional basis. Hopefully this will be helpful to others. The output generated an onclick event for the image button with the following javascript:

if(!$find('<GridID>').confirm('<Message>', event, '<Window Title>'))return false;

This code needed to be placed on the ImageButtons that needed a confirm dialog box.

To start, remove the ConfirmDialogType, ConfirmText and ConfirmTitle attributes of the GridButtonColumn.

<telerik:GridButtonColumn UniqueName="Toggle" ButtonType="ImageButton"
     ImageUrl="~/images/buttonicons/lightbulb_off.png"
     CommandName="ToggleReadable">
          <ItemStyle Width="30px" />
</telerik:GridButtonColumn>

Then handle the ItemDataBound event of the RadGrid with code similar to the following:

    Protected Sub gridFundList_ItemDataBound(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridItemEventArgs) Handles gridFundList.ItemDataBound
        If e.Item.ItemType = Telerik.Web.UI.GridItemType.AlternatingItem Or e.Item.ItemType = Telerik.Web.UI.GridItemType.Item Then
            Dim item As TUI.GridDataItem = DirectCast(e.Item, TUI.GridDataItem)
            Dim data As Fund = item.DataItem

            Dim btnToggle As ImageButton = DirectCast(item("Toggle").Controls(0), ImageButton)

                If data.FundRulesApplied > 0 Then
                   ' This will affect other areas of the system.
                   ' Alert the user!
                    Dim message As String = "This change will impact other places in the system. Click OK to continue."
                    btnToggle.Attributes.Add("onclick", "if(!$find('" & gridFundList.ClientID & "').confirm('" & message & "', event, 'Change Global Settings'))return false;")
                End If
        End If
    End Sub

[Iana Tsolova]

Hi Chris,

Thank you for sharing your experience with the community. I hope other users find your sample useful.

Additionally, I have updated your Telerik points. 

Greetings,
Iana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Quesnay MALANDA]

thank you!