Select row before delete

[David Simmonds]

I have a GridButtonColumn of type ImageButton with CommandName set to Delete. The column also has ConfirmDialogType set to RadWindow. I click the button in the grid cell and the RadWindow comes up asking if I want to delete the item. However, the user has no idea which item has been selected since it is not in a selected state. The user simply just click the delete button. How do I select the row before the confirm window comes up?

[Pavlina]

Hi David,

In order to configure the grid so that it always has one row selected, please refer to the following help article, which illustrates one way to accomplish this.
Making a grid row selected at all times (similar to WinForms grids)

Greetings,
Pavlina
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[David Simmonds]

I dont think that is the solution nor the problem. The problem is that I click the delete icon in the row and the confirm window shows up and the row is not selected at that time. The solution that you suggested is for have a row always selected.

[Pavlina]

Hi David,

An alternative approach would be attaching OnCommand client event and showing the confirmation explicitly, so that you can set the ConfirmText according to the row value (show the related value in the confirm message) which is going to be deleted. You can cancel the OnCommand event if the confirm returns false (set eventArgs.set_cancel(true) to cancel).

Hope this gets you started properly.

Sincerely yours,

Pavlina
the Telerik team

 

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[David Simmonds]

So why is there no way of selecting the row when the delete button is clicked. Is it becuase the auto radwindow is getting in the way and preventing this from happening?

[Pavlina]

Hello David,

For more information about how to achieve the desire functionality, please refer to the forum thread below, which elaborates on similar subject and let me know if it helps:
http://www.telerik.com/community/forums/aspnet-ajax/grid/select-row-client-side-on-hyperlink-click.aspx

Greetings,
Pavlina
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[David Simmonds]

Well, yes, that does select the row when I click the button, but it stops the automatic confirm radwindow from showing. The button I am clicking is a "Delete" column via a GridButtonColumn (ButtonType="ImageButton"). So when I click it, the autoconfirm radwindow normally comes up before the DeleteCommand event is issued. This is good. But the suggestion disables that since it takes over the OnClick handler. I could put a radcomfirm call into the OnClick handler, but then I dont have a way of cancelling the delete if the user selects No.

Does that make sense?

[Pavlina]

Hi David,

You can refer to the following code library submission in order to allow the radconfirm window to simulate the blocking of the execution thread while waiting for user's confirmation:
Block the execution thread with radconfirm

All the best,
Pavlina
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Richard]

Here's a solution that works for me in order to highlight/select the row that is being deleted when the "Delete" LinkButton in the last column cell of that row is clicked. This provides the end user with a visual indication of the exact row that he/she is confirming for delete when interacting with the popup confirm window.

The modifications were made to the online demo: Grid/Automatic Operations. You can see my modified version of the demo in action here: http://screencast.com/t/QOgs7pb45 (I did not implement the actual delete from my local Northwind install, so you can see an error message displayed when I confirm the delete in the popup)

I've wired the "On Click" event of the "Delete" LinkButton to the JavaScript "Select" function, passing the GridDataItem.ItemIndex (row # clicked) as an argument. In the client-side function, we use it to set that row as selected as well as to grab the ProductName text value in order to use it to populate the confirm popup's message. This popup is called from within the function. If the user clicks "OK" the delete of the row occurs, if "Cancel" the selected row is deselected.

JavaScript in Default.aspx:

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        <!--
        function Select(RowIndex) {
            var RadGrid1 = $find("<%= RadGrid1.ClientID %>");
            RadGrid1.get_masterTableView().get_dataItems()[RowIndex].set_selected("true");
            var row = RadGrid1.get_masterTableView().get_dataItems()[RowIndex].get_element();
            var productName = row.cells[1].innerHTML;
            var agree = confirm('Do you want to delete the Product: ' + productName + '?');

            if (agree) {
                return true;
            }
            else {
                RadGrid1.get_masterTableView().get_dataItems()[RowIndex].set_selected("false");
                return false;
            }
        }
        -->
    </script>
</telerik:RadCodeBlock>

RadGrid definition in Default.aspx:

<div>
    <telerik:RadGrid ID="RadGrid1" GridLines="None" runat="server" AllowAutomaticDeletes="True"
        AllowAutomaticInserts="True" AllowAutomaticUpdates="True" AllowPaging="True"
        AutoGenerateColumns="False" DataSourceID="SqlDataSource1" OnItemUpdated="RadGrid1_ItemUpdated"
        OnItemDeleted="RadGrid1_ItemDeleted" OnItemInserted="RadGrid1_ItemInserted" OnDataBound="RadGrid1_DataBound"
        CellSpacing="0" OnItemDataBound="RadGrid1_ItemDataBound">
        <PagerStyle Mode="NextPrevAndNumeric" />
        <MasterTableView Width="100%" CommandItemDisplay="TopAndBottom" DataKeyNames="ProductID"
            DataSourceID="SqlDataSource1" HorizontalAlign="NotSet" AutoGenerateColumns="False">
            <Columns>
                <telerik:GridEditCommandColumn ButtonType="ImageButton" UniqueName="EditCommandColumn">
                    <ItemStyle CssClass="MyImageButton" />
                </telerik:GridEditCommandColumn>
                <telerik:GridBoundColumn DataField="ProductName" HeaderText="ProductName" SortExpression="ProductName"
                    UniqueName="ProductName" ColumnEditorID="GridTextBoxColumnEditor1">
                </telerik:GridBoundColumn>
                <telerik:GridDropDownColumn DataField="CategoryID" DataSourceID="SqlDataSource2"
                    HeaderText="Category" ListTextField="CategoryName" ListValueField="CategoryID"
                    UniqueName="CategoryID" ColumnEditorID="GridDropDownColumnEditor1">
                </telerik:GridDropDownColumn>
                <telerik:GridNumericColumn DataField="UnitsInStock" HeaderText="Units In Stock" SortExpression="UnitsInStock"
                    UniqueName="UnitsInStock" ColumnEditorID="GridNumericColumnEditor1">
                </telerik:GridNumericColumn>
                <telerik:GridBoundColumn DataField="QuantityPerUnit" HeaderText="Quantity Per Unit"
                    SortExpression="QuantityPerUnit" UniqueName="QuantityPerUnit" Visible="false"
                    EditFormColumnIndex="1" ColumnEditorID="GridTextBoxColumnEditor2">
                </telerik:GridBoundColumn>
                <telerik:GridCheckBoxColumn DataField="Discontinued" HeaderText="Discontinued" SortExpression="Discontinued"
                    UniqueName="Discontinued" EditFormColumnIndex="1">
                </telerik:GridCheckBoxColumn>
                <telerik:GridTemplateColumn HeaderText="UnitPrice" SortExpression="UnitPrice" UniqueName="TemplateColumn"
                    EditFormColumnIndex="1">
                    <ItemTemplate>
                        <asp:Label runat="server" ID="lblUnitPrice" Text='<%# Eval("UnitPrice", "{0:C}") %>'></asp:Label>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <span>
                            <telerik:RadNumericTextBox runat="server" ID="tbUnitPrice" Width="40px" DbValue='<%# Bind("UnitPrice") %>'>
                            </telerik:RadNumericTextBox><span style="color: Red"><asp:RequiredFieldValidator
                                ID="RequiredFieldValidator1" ControlToValidate="tbUnitPrice" ErrorMessage="*"
                                runat="server">
                            </asp:RequiredFieldValidator></span>
                    </EditItemTemplate>
                </telerik:GridTemplateColumn>
                <telerik:GridButtonColumn  ButtonType="LinkButton" UniqueName="DeleteCol"
                    CommandName="Delete" Text="Delete">
                    <ItemStyle HorizontalAlign="Center" />
                </telerik:GridButtonColumn>
            </Columns>
            <EditFormSettings ColumnNumber="2" CaptionDataField="ProductName" CaptionFormatString="Edit properties of Product {0}"
                InsertCaption="New Product">
                <FormTableItemStyle Wrap="False"></FormTableItemStyle>
                <FormCaptionStyle CssClass="EditFormHeader"></FormCaptionStyle>
                <FormMainTableStyle GridLines="None" CellSpacing="0" CellPadding="3" BackColor="White"
                    Width="100%" />
                <FormTableStyle CellSpacing="0" CellPadding="2" Height="110px" BackColor="White" />
                <FormTableAlternatingItemStyle Wrap="False"></FormTableAlternatingItemStyle>
                <EditColumn ButtonType="ImageButton" InsertText="Insert Order" UpdateText="Update record"
                    UniqueName="EditCommandColumn1" CancelText="Cancel edit">
                </EditColumn>
                <FormTableButtonRowStyle HorizontalAlign="Right" CssClass="EditFormButtonRow"></FormTableButtonRowStyle>
            </EditFormSettings>
        </MasterTableView>
        <ClientSettings AllowRowsDragDrop="true" EnablePostBackOnRowClick="false" >
            <Selecting AllowRowSelect="true" EnableDragToSelectRows="false" />
        </ClientSettings>
    </telerik:RadGrid>

Default.aspx.cs (partial):

protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
{
    if (e.Item is GridDataItem)
    {
        GridDataItem item = (GridDataItem)e.Item;
        int RowIndex = item.ItemIndex;
        LinkButton lnkbtn = (LinkButton)item["DeleteCol"].Controls[0];
        lnkbtn.Attributes.Add("OnClick", "return Select('" + RowIndex + "');");
    }
}

Cheers!

[Josef Rogovsky]

Thanks jumpstart, this was a very helpful solution. I hope you got some Telerik points for providing it.