This is a migrated thread and some comments may be shown as answers.

Select row before delete

9 Answers 75 Views
Grid
This is a migrated thread and some comments may be shown as answers.
David Simmonds
Top achievements
Rank 1
David Simmonds asked on 19 Mar 2010, 06:41 PM
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?

9 Answers, 1 is accepted

Sort by
0
Pavlina
Telerik team
answered on 24 Mar 2010, 10:15 AM
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.
0
David Simmonds
Top achievements
Rank 1
answered on 24 Mar 2010, 03:08 PM
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.
0
Pavlina
Telerik team
answered on 24 Mar 2010, 05:13 PM
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.
0
David Simmonds
Top achievements
Rank 1
answered on 24 Mar 2010, 05:30 PM
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?
0
Pavlina
Telerik team
answered on 29 Mar 2010, 03:27 PM
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.
0
David Simmonds
Top achievements
Rank 1
answered on 30 Mar 2010, 01:28 AM
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?
0
Pavlina
Telerik team
answered on 01 Apr 2010, 03:01 PM
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.
0
Richard
Top achievements
Rank 1
answered on 20 Apr 2012, 09:27 PM
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!
0
Josef Rogovsky
Top achievements
Rank 2
answered on 03 Aug 2015, 06:04 PM
Thanks jumpstart, this was a very helpful solution. I hope you got some Telerik points for providing it.
Tags
Grid
Asked by
David Simmonds
Top achievements
Rank 1
Answers by
Pavlina
Telerik team
David Simmonds
Top achievements
Rank 1
Richard
Top achievements
Rank 1
Josef Rogovsky
Top achievements
Rank 2
Share this question
or