Put all child rows in edit mode for selected parent row

[Ray]

I have a hierarchical radGrid where the user can expand a parent row and then click on a child row to edit it in-place.  I would like to provide them with a button on the parent row that would put all the child rows (for that parent row) in edit mode at the same time so that they can edit them all and save them all with 1 click.

I have researched this and found lots of info on how to do this on the parent rows but found nothing on how to do it on the child rows.

The way it is constructed is that the parent rows are in a "RadGrid" and the child rows are in a "GridTableView".  Maybe this is where my problem is.

So, I need to either figure out how to accomplish it with what I have or to get some detail on how to redesign the grid to be able to do it.

Thanks in advance for any help or advise!

 Here is my grid:

        <telerik:RadGrid ID="rgTraveler" runat="server"
            DataSourceID="SqlDataSourceTravelerMain"
            AutoGenerateColumns="False" 
            AllowSorting="True"
            AllowPaging="True"
            PageSize="25"
            Width="1200px"
            OnUpdateCommand="rgTraveler_UpdateCommand"
            OnCancelCommand="rgTraveler_CancelCommand"
            OnItemCommand="rgTraveler_ItemCommand"
            OnItemDataBound="rgTraveler_ItemDataBound"
            AllowAutomaticUpdates="True"
            GroupPanelPosition="Top">
            <PagerStyle Mode="NextPrevAndNumeric" /> 
            <MasterTableView EnableNoRecordsTemplate="true" 
                CommandItemDisplay="None" 
                InsertItemDisplay="Bottom"
                HeaderStyle-HorizontalAlign="Center"
                ItemStyle-HorizontalAlign="Center" 
                AlternatingItemStyle-HorizontalAlign="Center"
                EditMode="InPlace" 
                DataKeyNames="PO"> 
                <NoRecordsTemplate>
                    <div>There are no records to display.</div>
                </NoRecordsTemplate>

                <DetailTables>
                    <telerik:GridTableView DataSourceID="SqlDataSourceTravelerSub" 
                        runat="server" 
                        CommandItemDisplay="None"
                        Name="GridTableViewSub" 
                        BackColor="White"
                        HeaderStyle-HorizontalAlign="Center"
                        ItemStyle-HorizontalAlign="Center" 
                        AlternatingItemStyle-HorizontalAlign="Center"
                        EditMode="InPlace"
                        DataKeyNames="DetailID,ProdOrder,Source">
                        <ParentTableRelation>
                            <telerik:GridRelationFields DetailKeyField="ProdOrder" MasterKeyField="PO" />
                        </ParentTableRelation>
                        <Columns>
                           <telerik:GridEditCommandColumn ButtonType="ImageButton" HeaderText="Edit" UniqueName="EditCommandColumn" />
                            <telerik:GridBoundColumn DataField="Source" HeaderText="" SortExpression="Source" UniqueName="Source" ItemStyle-Width="10px" ReadOnly="True" Visible="true" />
                            <telerik:GridBoundColumn DataField="DetailID" HeaderText="DetailID" ReadOnly="true" SortExpression="DetailID" Visible="false"  />
                            <telerik:GridBoundColumn DataField="ProdOrder" HeaderText="ProdOrder" ReadOnly="true" SortExpression="ProdOrder" Visible="true"  />
                            <telerik:GridBoundColumn DataField="SerialNumber" HeaderText="SerialNumber" ReadOnly="true" SortExpression="SerialNumber" ItemStyle-Width="100px" />
                            <telerik:GridBoundColumn DataField="PassToStockDate" HeaderText="Pass To Stock Date" SortExpression="PassToStockDate" DataType="System.DateTime" ReadOnly="True" UniqueName="PassToStockDate" DataFormatString="{0:d}" ItemStyle-Width="200px" />
                            <telerik:GridCheckBoxColumn DataField="FinalPassedToStock" HeaderText="Final Passed To Stock" SortExpression="FinalPassedToStock" UniqueName="FinalPassedToStock" ItemStyle-Width="200px" />
                            <telerik:GridDateTimeColumn DataField="FinalPassedToStockDate" HeaderText="Final Passed To Stock Date" SortExpression="FinalPassedToStockDate" ItemStyle-Width="200px" UniqueName="rdpFinalPassedToStockDate" DataFormatString="{0:d}" />
                            <telerik:GridCheckBoxColumn DataField="HasIssue" HeaderText="HasIssue" SortExpression="HasIssue" UniqueName="HasIssue" />
                            <telerik:GridBoundColumn DataField="Comments" HeaderText="Comments" SortExpression="Comments" UniqueName="txtComments" ItemStyle-Width="500px" />
                        </Columns>
                    </telerik:GridTableView>
                </DetailTables>

                <Columns>
                    <telerik:GridBoundColumn DataField="Source" HeaderText="" SortExpression="Source" UniqueName="Source" ItemStyle-Width="10px" ReadOnly="True" Visible="true" />
                    <telerik:GridBoundColumn DataField="ID" HeaderText="ID" ReadOnly="true" SortExpression="ID" DataType="System.Int32" Visible="false"  />
                    <telerik:GridBoundColumn DataField="PO" HeaderText="Prod Order" SortExpression="PO" UniqueName="PO" ItemStyle-Width="200px" ReadOnly="True" />
                    <telerik:GridBoundColumn DataField="SalesOrder" HeaderText="Sales Order" SortExpression="SalesOrder" UniqueName="SalesOrder" ItemStyle-Width="200px" ReadOnly="True" />
                    <telerik:GridBoundColumn DataField="SalesItem" HeaderText="Sales Item" SortExpression="SalesItem" ReadOnly="true" ItemStyle-Width="50px" />
                    <telerik:GridBoundColumn DataField="Part" HeaderText="Part" SortExpression="Part" UniqueName="Part" ItemStyle-Width="200px" ReadOnly="True" />
                    <telerik:GridBoundColumn DataField="Comments" HeaderText="Comments" SortExpression="Comments" UniqueName="Comments" ItemStyle-Width="600px" ReadOnly="True" />
                    <telerik:GridBoundColumn DataField="InspectionCompleteDate" HeaderText="Inspection Complete Date" SortExpression="InspectionCompleteDate" DataType="System.DateTime" ReadOnly="True" UniqueName="InspectionCompleteDate" DataFormatString="{0:d}" ItemStyle-Width="200px" />
                </Columns> 
                <EditFormSettings> 
                    <EditColumn ButtonType="ImageButton" /> 
                </EditFormSettings> 
            </MasterTableView> 
        </telerik:RadGrid> 
        <asp:SqlDataSource ID="SqlDataSourceTravelerMain" runat="server" ConnectionString="<%$ ConnectionStrings:SetoutsConnectionString %>" 
            SelectCommand="sp_GetTravelerMainRecords" SelectCommandType="StoredProcedure" CancelSelectOnNullParameter="False">
            <SelectParameters>
                <asp:ControlParameter ControlID="tbProdOrderNumberSearch" Name="PONumber" PropertyName="Text" Type="String" DefaultValue="" />
                <asp:ControlParameter ControlID="tbSalesOrderNumberSearch" Name="SONumber" PropertyName="Text" Type="String" DefaultValue="" />
                <asp:ControlParameter ControlID="rdpStartDateSearch" Name="StartDate" PropertyName="SelectedDate" Type="DateTime" DefaultValue="" />
                <asp:ControlParameter ControlID="rdpEndDateSearch" Name="EndDate" PropertyName="SelectedDate" Type="DateTime" DefaultValue="" />
                <asp:ControlParameter ControlID="rblIsPTS" Name="IsPTS" PropertyName="SelectedValue" Type="Int32" />
                <asp:ControlParameter ControlID="rblHasIssue" Name="HasIssue" PropertyName="SelectedValue" Type="Int32" />
            </SelectParameters>
        </asp:SqlDataSource>
        <asp:SqlDataSource ID="SqlDataSourceTravelerSub" runat="server" ConnectionString="<%$ ConnectionStrings:SetoutsConnectionString %>" 
            SelectCommand="sp_GetTravelerSubRecords" SelectCommandType="StoredProcedure"
            UpdateCommand="sp_UpdateTravelerSubRecord" UpdateCommandType="StoredProcedure">
            <SelectParameters>
                <asp:Parameter Name="ProdOrder" />
            </SelectParameters>
        </asp:SqlDataSource>

[Eyup]

Hello Ray,

You can achieve this requirement using the following approach:
Main Table:

<telerik:GridTemplateColumn UniqueName="TemplateColumnName">
    <ItemTemplate>
        <asp:Button ID="Button1" runat="server" Text="Button"
            OnClick="Button1_Click" />
    </ItemTemplate>
</telerik:GridTemplateColumn>

C#:

protected void Button1_Click(object sender, EventArgs e)
{
    Button button = (Button)sender;
    GridDataItem item = (GridDataItem)button.NamingContainer;
    GridTableView detailTable = item.ChildItem.NestedTableViews[0];

    foreach (GridDataItem detailItem in detailTable.Items)
    {
        detailItem.Edit = true;
    }
    detailTable.Rebind();
}

Hope this helps. Please give it a try and let me know if it works for you.

Regards,
Eyup
Telerik

[Ray]

Hi Eyup,

Thank you!  It works great after I set "AllowMultiRowEdit" to True.

Now, I am trying to figure out how to handle the saving of the edited rows.  I would like to provide the user with one button to save all the rows but I can't seem to get that to work.

Alternatively, if I have them click on the existing save button for a row, it saves that one but all the edits for the other row are lost.

 Any ideas?

 

Thanks,

Ray

 

[Ray]

Hi Eyup,

I am working on the update of the edited rows using the technique from here:

http://docs.telerik.com/devtools/aspnet-ajax/controls/grid/data-editing/update-records/performing-batch-updates

The part I am having problems with SQLDataSource update command:

Protected Sub RadGrid1_ItemCommand(ByVal source As Object, ByVal e As Telerik.Web.UI.GridCommandEventArgs)
    If (e.CommandName = "UpdateAll") Then
        For Each editedItem As GridEditableItem In RadGrid1.EditItems
            Dim newValues As Hashtable = New Hashtable
            'The GridTableView will fill the values from all editable columns in the hash
            e.Item.OwnerTableView.ExtractValuesFromItem(newValues, editedItem)
            SqlDataSource1.UpdateCommand = String.Format("Update Customers SET ContactName='{0}' WHERE CustomerID='{1}'", newValues("ContactName"), editedItem.GetDataKeyValue("CustomerID").ToString())
            SqlDataSource1.Update()
            editedItem.Edit = False
        Next
    End If
    RadGrid1.Rebind()
End Sub

 

I use a stored procedure, passing in 7 of my fields as parameters.  I can't seem to get the syntax right in this function to pass in the correct values.

 My stored procedure definition is as follows:

ALTER PROCEDURE [dbo].[sp_UpdateTravelerSubRecord]
@DetailID int,
@ProdOrder nvarchar(20),
@FinalPassedToStock bit,
@FinalPassedToStockDate datetime,
@HasIssue bit,
@Comments nvarchar(200),
@Source nvarchar(1)
AS...

Can you help?

 

[Ray]

Hi Eyup,

The solution you gave me above works when the button is placed in the parent grid.  Here is the button click code:

Protected Sub btnEditAll_Click(sender As Object, e As EventArgs)
    Dim button As Button = DirectCast(sender, Button)
    Dim item As GridDataItem = DirectCast(button.NamingContainer, GridDataItem)
    Dim detailTable As GridTableView = item.ChildItem.NestedTableViews(0)
    For Each detailItem As GridDataItem In detailTable.Items
        detailItem.Edit = True
    Next
    detailTable.Rebind()
End Sub

 

I would like to move the button down to the CommandItemTemplate of the DetailTable where my "Update All" button is though.  This way, the button to edit all rows only shows up when you expand the parent item.

This is my CommandItemTemplate:

<CommandItemTemplate>
    <asp:Button runat="server" ID="EditAll" Text="Edit All" CommandName="EditAll" />
    <asp:Button runat="server" ID="UpdateAll" Text="Update All" CommandName="UpdateAll" />
</CommandItemTemplate>

 This is my ItemCommand function:

Protected Sub rgTraveler_ItemCommand(sender As Object, e As GridCommandEventArgs)
    Select Case e.CommandName
        Case "EditAll"
            For Each editedItem As GridEditableItem In rgTraveler.EditItems
                editedItem.Edit = True
            Next

        Case "UpdateAll"
            For Each editedItem As GridEditableItem In rgTraveler.EditItems
                Dim newValues As Hashtable = New Hashtable
                e.Item.OwnerTableView.ExtractValuesFromItem(newValues, editedItem)
                SqlDataSource1.UpdateCommand = String.Format("UPDATE [Setouts].[dbo].[tbl_sales_order_traveler_details] SET [final_passed_to_stock]='{0}',[final_passed_to_stock_date]='{1}',[has_issue]='{2}',[comments]='{3}' WHERE [ID]='{4}'", newValues("FinalPassedToStock"), newValues("FinalPassedToStockDate"), newValues("HasIssue"), newValues("Comments"), editedItem.GetDataKeyValue("DetailID").ToString())
                SqlDataSource1.Update()
                editedItem.Edit = False
            Next
            rgTraveler.Rebind()

        Case Else
            Return
    End Select
End Sub

 When I click on the "Edit All" button, it does put all the child rows in edit mode but when I save, the newvalues are not extracted from the items.  So there is something not quite right with what I am doing in the ItemCommand function.

It works in the btnEditAll_Click() but I can't seem to recreate that same code in the ItemCommand function.  I don't know if it is because it can't be done or it is because I have the syntax wrong.

Please help, I have been fighting with this for the better part of 2 days.

 Thanks,

Ray

 

[Viktor Tachev]

Hello Ray,

I have examined the provided code and noticed that the items are not placed in edit mode. Note that the EditItems collection of RadGrid contains the items that are already placed in edit mode. Thus, the code in the EditAll Case would not be executed.

Try to modify the Click handler for the EditAll button like below. This should place all items in the relevant GridTableView in edit mode.

Protected Sub Button1_Click(sender As Object, e As EventArgs)
    Dim tableView As GridTableView = TryCast(TryCast(sender, Button).NamingContainer, GridCommandItem).OwnerTableView

    For Each dataItem As GridDataItem In tableView.Items
        dataItem.Edit = True
    Next

    tableView.Rebind()
End Sub

If you add similar code to the ItemCommand handler you would need to implement additional logic in order to find the correct GridTableView which items should be placed in edit mode.

Give the modification a try and let me know how it works for you.


Regards,
Viktor Tachev
Telerik

[Ray]

Hi Viktor,

Adding the code to the ItemCommand is exactly what I am trying to do.  It is this additional logic to find the correct GridTableView that I am having trouble with.

I have added the "Edit All" button to the Command ItemTemplate and in the rgTraveler_ItemCommand() function I have the case statement for "EditAll" but the code in there is not quite right.

It actually does put the items in edit mode but when I try to save, it errors out on the line:

e.Item.OwnerTableView.ExtractValuesFromItem(newValues, editedItem)

because it cannot extract the new values.

Can you please help with this additional logic to find the correct GridTableView in the ItemCommand function?  I have tried everything I can and have gotten nowhere.

Thanks,

Ray

[Viktor Tachev]

Hello Ray,

Try to use logic similar to the following:

<CommandItemTemplate>
    <asp:Button Text="EditAll" runat="server" ID="Button1" CommandName="CustomEditAll" />
</CommandItemTemplate>

Protected Sub RadGrid3_ItemCommand(sender As Object, e As GridCommandEventArgs)
    If e.CommandName = "CustomEditAll" Then
        Dim tableView As GridTableView = e.Item.OwnerTableView

        For Each dataItem As GridDataItem In tableView.Items
            dataItem.Edit = True
        Next

        tableView.Rebind()
    End If
End Sub

Also note that the "EditAll" command is used by default. If you would like to implement custom logic you should use a different command name.

Regards,
Viktor Tachev
Telerik

[Ray]

Hi Viktor,

That worked!  Thank you so much.  I have been fighting with this for too long.  :)

 Thanks,

Ray