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

[Solved] Master Detail Grid with delete on detail

4 Answers 171 Views

Grid

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

Velissarios asked on 18 Jul 2011, 03:39 PM

Hello to all

I have built the following scenario.
There is one table called "centers" which holds data for some public centers across a town.
There is another table called services having ID and Name of the Service.
The centers has many services (e.g. car rental, bike rental e.t.c.)
So I made another table (CenterServices), which holds the IDs of Centers and Services (to simulate the one to many relationship)

I built a page with a master and a separate detail grid, using your example in demos.
http://demos.telerik.com/aspnet-ajax/grid/examples/programming/selectedvalue/defaultvb.aspx

I added edit and delete buttons to the detail grid.
The problem is that I can edit the record of the details grid, but I cannot delete it.
Can anyone help me please?
The sqldatasource is working fine (I think).
May be something is missing from the grid or the code.

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="ServiceCenter.aspx.vb" Inherits="ServiceCenter" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

</head>

<body>

<form id="form1" runat="server">

<div>

<telerik:RadScriptManager ID="RadScriptManager" runat="server"></telerik:RadScriptManager>

<strong>Centers:</strong>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

<ajaxsettings>

<telerik:AjaxSetting AjaxControlID="RadGrid1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGrid1" />

<telerik:AjaxUpdatedControl ControlID="RadGrid2" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="RadGrid2">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGrid2" />

</UpdatedControls>

</telerik:AjaxSetting>

</ajaxsettings>

</telerik:RadAjaxManager>

<telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True"

PageSize="5" DataSourceID="SqlDataSource1" GridLines="None" width="95%"

CellSpacing="0">

<clientsettings allowkeyboardnavigation="true" enablepostbackonrowclick="true">

<Selecting AllowRowSelect="true" />

</clientsettings>

<mastertableview datakeynames="Center_ID" >

<CommandItemSettings ExportToPdfText="Export to PDF"></CommandItemSettings>

<RowIndicatorColumn FilterControlAltText="Filter RowIndicator column"></RowIndicatorColumn>

<ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column"></ExpandCollapseColumn>

<EditFormSettings>

<EditColumn FilterControlAltText="Filter EditCommandColumn column"></EditColumn>

</EditFormSettings>

<PagerStyle AlwaysVisible="True" />

</mastertableview>

<pagerstyle mode="NextPrevAndNumeric" AlwaysVisible="True" />

<FilterMenu EnableImageSprites="False"></FilterMenu>

<HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Default"></HeaderContextMenu>

</telerik:RadGrid>

<br />

<strong>Services:</strong>

<telerik:RadGrid ID="RadGrid2" runat="server" AllowAutomaticDeletes="True" AutoGenerateColumns="False"

AllowAutomaticInserts="True" AllowAutomaticUpdates="True"

AllowPaging="True" CellSpacing="0" DataSourceID="SqlDataSource2" ShowStatusBar="True"

GridLines="None" ShowFooter="True" Width="95%">

<MasterTableView DataSourceID="SqlDataSource2" Width="100%"

CommandItemDisplay="TopAndBottom" DataKeyNames="CenterServices_ID">

<CommandItemSettings ExportToPdfText="Export to PDF"></CommandItemSettings>

<RowIndicatorColumn FilterControlAltText="Filter RowIndicator column">

<HeaderStyle Width="20px"></HeaderStyle>

</RowIndicatorColumn>

<ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column">

<HeaderStyle Width="20px"></HeaderStyle>

</ExpandCollapseColumn>

<Columns>

<telerik:GridEditCommandColumn ButtonType="ImageButton" UniqueName="EditCommandColumn">

<ItemStyle CssClass="MyImageButton" />

</telerik:GridEditCommandColumn>

<telerik:GridTemplateColumn FilterControlAltText="Filter TemplateColumn column"

HeaderText="Service Name" UniqueName="TemplateColumn">

<EditItemTemplate>

<telerik:RadComboBox ID="RadComboBox1" Runat="server"

DataSourceID="SqlDataSource3" DataTextField="Service_Name"

DataValueField="Service_ID"

SelectedValue='<%# Bind("CenterServices_Service") %>'>

</telerik:RadComboBox>

</EditItemTemplate>

<InsertItemTemplate>

<telerik:RadComboBox ID="RadComboBox2" Runat="server"

DataSourceID="SqlDataSource3" DataTextField="Service_Name"

DataValueField="Service_ID"

SelectedValue='<%# Bind("CenterServices_Service") %>'>

</telerik:RadComboBox>

</InsertItemTemplate>

<ItemTemplate>

<asp:Label ID="Label1" runat="server" Text='<%# Eval("Service_Name") %>'></asp:Label>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn FilterControlAltText="Filter TemplateColumn1 column"

HeaderText="Center" UniqueName="TemplateColumn1">

<EditItemTemplate>

<asp:Label ID="Label2" runat="server"

Text='<%# Bind("CenterServices_Center") %>'></asp:Label>

</EditItemTemplate>

<InsertItemTemplate>

<telerik:RadComboBox ID="RadComboBox3" Runat="server"

DataSourceID="SqlDataSource4" DataTextField="Center_Code"

DataValueField="Center_ID" SelectedValue='<%# Bind("CenterServices_Center") %>'>

</telerik:RadComboBox>

</InsertItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridButtonColumn ConfirmText="Delete this product?" ConfirmDialogType="RadWindow"

ConfirmTitle="Delete" ButtonType="ImageButton" CommandName="Delete" Text="Delete"

UniqueName="DeleteColumn">

<ItemStyle HorizontalAlign="Center" CssClass="MyImageButton" />

</telerik:GridButtonColumn>

</Columns>

<EditFormSettings>

<EditColumn FilterControlAltText="Filter EditCommandColumn column"></EditColumn>

</EditFormSettings>

<PagerStyle AlwaysVisible="True" />

</MasterTableView>

<FilterMenu EnableImageSprites="False"></FilterMenu>

<HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Default"></HeaderContextMenu>

</telerik:RadGrid>

<telerik:RadWindowManager ID="RadWindowManager1" runat="server"></telerik:RadWindowManager>

<br />

<strong>Orders details:</strong>

<asp:SqlDataSource ID="SqlDataSource1" ConnectionString="xxxxxxxxxxxx"

ProviderName="System.Data.SqlClient" SelectCommand=

"SELECT Centers.Center_ID, countries.CO_Name, Centers.Center_Region, Centers.Center_City, Centers.Center_Street_Number, Centers.Center_ZipCode, Centers.Center_WorkingHours, Centers.Center_Code FROM Centers INNER JOIN countries ON Centers.Center_Country = countries.CO_id"

runat="server"></asp:SqlDataSource>

<asp:SqlDataSource ID="SqlDataSource2" ConnectionString="xxxxxxxxxxxx"

ProviderName="System.Data.SqlClient" SelectCommand=

"SELECT CenterServices.CenterServices_ID, CenterServices.CenterServices_Center, CenterServices.CenterServices_Service, Services.Service_Name FROM CenterServices INNER JOIN Services ON CenterServices.CenterServices_Service = Services.Service_ID WHERE (CenterServices.CenterServices_Center = @CenterServices_Center)"

runat="server"

DeleteCommand="DELETE FROM CenterServices WHERE (CenterServices_ID = @CenterServices_ID)"

InsertCommand=

"INSERT INTO [CenterServices] ([CenterServices_Center], [CenterServices_Service]) VALUES (@CenterServices_Center, @CenterServices_Service)"

UpdateCommand=

"UPDATE [CenterServices] SET [CenterServices_Center] = @CenterServices_Center, [CenterServices_Service] = @CenterServices_Service WHERE [CenterServices_ID] = @CenterServices_ID"

>

<DeleteParameters>

<asp:Parameter Name="CenterServices_ID" Type="Int32" />

</DeleteParameters>

<InsertParameters>

<asp:Parameter Name="CenterServices_Center" Type="Int32" />

<asp:Parameter Name="CenterServices_Service" Type="Int32" />

</InsertParameters>

<SelectParameters>

<asp:ControlParameter ControlID="RadGrid1" Name="CenterServices_Center"

PropertyName="SelectedValue" Type="Int32" />

</SelectParameters>

<UpdateParameters>

<asp:Parameter Name="CenterServices_Center" Type="Int32" />

<asp:Parameter Name="CenterServices_Service" Type="Int32" />

<asp:Parameter Name="CenterServices_ID" Type="Int32" />

</UpdateParameters>

</asp:SqlDataSource>

</div>

<asp:SqlDataSource ID="SqlDataSource3" runat="server"

ConnectionString="xxxxxxxxxxxx"

ProviderName="System.Data.SqlClient" SelectCommand="SELECT * FROM [Services]">

</asp:SqlDataSource>

<asp:SqlDataSource ID="SqlDataSource4" runat="server"

ConnectionString="xxxxxxxxxxxx"

ProviderName="System.Data.SqlClient"

SelectCommand="SELECT [Center_ID], [Center_Code] FROM [Centers]">

</asp:SqlDataSource>

<br />

</form>

</body>

</html>

The code page is the following:

Imports System

Imports System.Web.UI.WebControls

Imports Telerik.Web.UI

Partial Class ServiceCenter

Inherits System.Web.UI.Page

Protected Sub Page_PreRender(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreRender

If RadGrid1.SelectedIndexes.Count = 0 Then

RadGrid1.SelectedIndexes.Add(0)

End If

If RadGrid2.SelectedIndexes.Count = 0 Then

RadGrid2.Rebind()

RadGrid2.SelectedIndexes.Add(0)

End If

End Sub

Protected Sub RadGrid1_ItemCommand(ByVal sender As Object, ByVal e As GridCommandEventArgs) Handles RadGrid1.ItemCommand

RadGrid2.SelectedIndexes.Clear()

End Sub

Protected Sub RadGrid2_ItemDeleted(ByVal source As Object, ByVal e As Telerik.Web.UI.GridDeletedEventArgs) Handles RadGrid2.ItemDeleted

Dim item As GridDataItem = DirectCast(e.Item, GridDataItem)

Dim id As String = item.GetDataKeyValue("CenterServices_ID").ToString()

If Not e.Exception Is Nothing Then

e.ExceptionHandled = True

SetMessage("Service Type with ID " + id + " cannot be deleted. Reason: " + e.Exception.Message)

Else

SetMessage("Service Type with ID " + id + " is deleted!")

End If

End Sub

Protected Sub RadGrid2_ItemUpdated(ByVal source As Object, ByVal e As Telerik.Web.UI.GridUpdatedEventArgs) Handles RadGrid2.ItemUpdated

Dim item As GridEditableItem = DirectCast(e.Item, GridEditableItem)

Dim id As String = item.GetDataKeyValue("CenterServices_ID").ToString()

If Not e.Exception Is Nothing Then

e.KeepInEditMode = True

e.ExceptionHandled = True

SetMessage("Service Type with ID " + id + " cannot be updated. Reason: " + e.Exception.Message)

Else

SetMessage("Service Type with ID " + id + " is updated!")

End If

End Sub

Protected Sub RadGrid2_ItemInserted(ByVal source As Object, ByVal e As Telerik.Web.UI.GridInsertedEventArgs) Handles RadGrid2.ItemInserted

If Not e.Exception Is Nothing Then

e.ExceptionHandled = True

e.KeepInInsertMode = True

SetMessage("Service Type cannot be inserted. Reason: " + e.Exception.Message)

Else

SetMessage("New Service Type is inserted!")

End If

End Sub

Private Sub DisplayMessage(ByVal text As String)

RadGrid2.Controls.Add(New LiteralControl(String.Format("<span style='color:red'>{0}</span>", text)))

End Sub

Private Sub SetMessage(ByVal message As String)

gridMessage = message

End Sub

Private gridMessage As String = Nothing

Protected Sub RadGrid2_DataBound(ByVal sender As Object, ByVal e As EventArgs) Handles RadGrid2.DataBound

If Not String.IsNullOrEmpty(gridMessage) Then

DisplayMessage(gridMessage)

End If

End Sub

End Class

Thanks in advanced

4 Answers, 1 is accepted

answered on 21 Jul 2011, 10:21 AM

RadGridMasterdetailCRUD.zip

Hello Velissarios,

I have followed your scenario and prepared a sample project for you demonstrating how the desired functionality can be implemented. You can find it attached to this post.

I hope it helps.

Regards,
Mira
the Telerik team

Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

answered on 08 Aug 2011, 10:10 AM

Dear Mira

thank you very much for Your answer.
I didn't reply to you, because I was on holidays. I'm so sorry....

I tried to implement your scenario, and everything worked.
But I added the add new record function to the second (detail grid) and it not working, and I cannot figure out why...
I'm pasting the code bellow, and I would be very pleased if you could find where is the problem.

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="mappings.aspx.vb" Inherits="mappings" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

</head>

<body>

<form id="form1" runat="server">

<div>

<telerik:RadScriptManager ID="RadScriptManager" runat="server">

</telerik:RadScriptManager>

<strong>Select a Center:</strong>

<telerik:RadGrid ID="RadGrid2" ShowStatusBar="True" runat="server" AllowPaging="True"

PageSize="5" DataSourceID="SqlDataSource1" GridLines="None" Width="95%"

CellSpacing="0">

<MasterTableView Width="100%" AutoGenerateColumns="False" DataKeyNames="Center_ID"

DataSourceID="SqlDataSource1">

<CommandItemSettings ExportToPdfText="Export to PDF"></CommandItemSettings>

<RowIndicatorColumn FilterControlAltText="Filter RowIndicator column"></RowIndicatorColumn>

<ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column"></ExpandCollapseColumn>

<Columns>

<telerik:GridBoundColumn DataField="Center_ID" DataType="System.Int32" HeaderText="Center_ID"

ReadOnly="True" SortExpression="Center_ID" UniqueName="Center_ID">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Center_Code" HeaderText="Center_Code"

SortExpression="OrderDate" UniqueName="Center_Code">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="CO_Name" HeaderText="CO_Name" SortExpression="CO_Name"

UniqueName="CO_Name">

</telerik:GridBoundColumn>

</Columns>

<EditFormSettings>

<EditColumn FilterControlAltText="Filter EditCommandColumn column"></EditColumn>

</EditFormSettings>

</MasterTableView>

<ClientSettings AllowKeyboardNavigation="true" EnablePostBackOnRowClick="true">

<Selecting AllowRowSelect="true" />

</ClientSettings>

<PagerStyle Mode="NextPrevAndNumeric" />

<FilterMenu EnableImageSprites="False"></FilterMenu>

<HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Default"></HeaderContextMenu>

</telerik:RadGrid>

<strong>

<br />

Services's Mappings:</strong>

<telerik:RadGrid ID="RadGrid3" ShowStatusBar="True" runat="server" AllowPaging="True"

PageSize="5" DataSourceID="SqlDataSource2" GridLines="None" Width="95%"

AutoGenerateEditColumn="True" AutoGenerateDeleteColumn="True"

AllowSorting="True" CellSpacing="0" ShowFooter="True">

<MasterTableView Width="100%" AutoGenerateColumns="False" DataKeyNames="CenterServices_ID"

DataSourceID="SqlDataSource2" CommandItemDisplay="TopAndBottom" AllowAutomaticDeletes="true" AllowAutomaticUpdates="true">

<CommandItemSettings ExportToPdfText="Export to PDF"></CommandItemSettings>

<RowIndicatorColumn FilterControlAltText="Filter RowIndicator column"></RowIndicatorColumn>

<ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column"></ExpandCollapseColumn>

<Columns>

<telerik:GridBoundColumn DataField="CenterServices_Center"

HeaderText="CenterServices_Center" SortExpression="CenterServices_Center"

UniqueName="CenterServices_Center" Display="False">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="CenterServices_ID" HeaderText="CenterServices_ID" SortExpression="CenterServices_ID"

ReadOnly="true" UniqueName="CenterServices_ID">

</telerik:GridBoundColumn>

<telerik:GridTemplateColumn FilterControlAltText="Filter TemplateColumn column"

HeaderText="Center" UniqueName="TemplateColumn">

<InsertItemTemplate>

<telerik:RadComboBox ID="RadComboBox3" Runat="server"

DataSourceID="SqlDataSource4" DataTextField="Center_Code"

DataValueField="Center_ID" SelectedValue='<%# Bind("CenterServices_Center") %>'>

</telerik:RadComboBox>

</InsertItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn FilterControlAltText="Filter TemplateColumn1 column"

HeaderText="Service" UniqueName="TemplateColumn1">

<EditItemTemplate>

<telerik:RadComboBox ID="RadComboBox1" Runat="server"

DataSourceID="SqlDataSource3" DataTextField="Service_Name"

DataValueField="Service_ID"

SelectedValue='<%# Bind("CenterServices_Service") %>' Width="400px">

</telerik:RadComboBox>

</EditItemTemplate>

<InsertItemTemplate>

<telerik:RadComboBox ID="RadComboBox2" Runat="server"

DataSourceID="SqlDataSource3" DataTextField="Service_Name"

DataValueField="Service_ID"

SelectedValue='<%# Bind("CenterServices_Service") %>' Width="400px">

</telerik:RadComboBox>

</InsertItemTemplate>

<ItemTemplate>

<asp:Label ID="Label1" runat="server" Text='<%# Eval("Service_Name") %>'></asp:Label>

</ItemTemplate>

</telerik:GridTemplateColumn>

</Columns>

<EditFormSettings>

<EditColumn FilterControlAltText="Filter EditCommandColumn column"></EditColumn>

</EditFormSettings>

<PagerStyle AlwaysVisible="True" />

</MasterTableView>

<PagerStyle Mode="NextPrevAndNumeric" AlwaysVisible="True" />

<FilterMenu EnableImageSprites="False"></FilterMenu>

<HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Default"></HeaderContextMenu>

</telerik:RadGrid>

<asp:SqlDataSource ID="SqlDataSource1" ConnectionString="Data Source=xxxxxxxxxxxxxxxxxxxxxxxxxxxxx"

ProviderName="System.Data.SqlClient" SelectCommand=

"SELECT Centers.Center_ID, countries.CO_Name, Centers.Center_Region, Centers.Center_City, Centers.Center_Street_Number, Centers.Center_ZipCode, Centers.Center_WorkingHours, Centers.Center_Code FROM Centers INNER JOIN countries ON Centers.Center_Country = countries.CO_id WHERE ([Center_Country] = @Center_Country)"

runat="server">

<SelectParameters>

<asp:CookieParameter CookieName="CountryCookie" Name="Center_Country"

Type="Int32" />

</SelectParameters>

</asp:SqlDataSource>

<asp:SqlDataSource ID="SqlDataSource2" ConnectionString="Data Source=xxxxxxxxxxxxxxxxxxxxxxxxxxxxx"

ProviderName="System.Data.SqlClient" SelectCommand=

"SELECT CenterServices.CenterServices_ID, CenterServices.CenterServices_Center, CenterServices.CenterServices_Service, Services.Service_Name FROM CenterServices INNER JOIN Services ON CenterServices.CenterServices_Service = Services.Service_ID WHERE (CenterServices.CenterServices_Center = @CenterServices_Center)"

runat="server"

DeleteCommand="DELETE FROM CenterServices WHERE (CenterServices_ID = @CenterServices_ID)"

InsertCommand=

"INSERT INTO [CenterServices] ([CenterServices_Center], [CenterServices_Service]) VALUES (@CenterServices_Center, @CenterServices_Service)"

UpdateCommand=

"UPDATE [CenterServices] SET [CenterServices_Center] = @CenterServices_Center, [CenterServices_Service] = @CenterServices_Service WHERE [CenterServices_ID] = @CenterServices_ID"

>

<DeleteParameters>

<asp:Parameter Name="CenterServices_ID" Type="Int32" />

</DeleteParameters>

<InsertParameters>

<asp:Parameter Name="CenterServices_Center" Type="Int32" />

<asp:Parameter Name="CenterServices_Service" Type="Int32" />

</InsertParameters>

<SelectParameters>

<asp:ControlParameter ControlID="RadGrid2" Name="CenterServices_Center"

PropertyName="SelectedValue" Type="Int32" />

</SelectParameters>

<UpdateParameters>

<asp:Parameter Name="CenterServices_Center" Type="Int32" />

<asp:Parameter Name="CenterServices_Service" Type="Int32" />

<asp:Parameter Name="CenterServices_ID" Type="Int32" />

</UpdateParameters>

</asp:SqlDataSource>

<asp:SqlDataSource ID="SqlDataSource3" runat="server"

ConnectionString="Data Source=xxxxxxxxxxxxxxxxxxxxxxxxxxxxx"

ProviderName="System.Data.SqlClient" SelectCommand="SELECT * FROM [Services]">

</asp:SqlDataSource>

<asp:SqlDataSource ID="SqlDataSource4" runat="server"

ConnectionString="Data Source=xxxxxxxxxxxxxxxxxxxxxxxxxxxxx"

ProviderName="System.Data.SqlClient"

SelectCommand="SELECT [Center_ID], [Center_Code] FROM [Centers]">

</asp:SqlDataSource>

</div>

</form>

</body>

</html>

Imports System

Imports System.Web.UI.WebControls

Imports Telerik.Web.UI

Partial Class mappings

Inherits System.Web.UI.Page

Protected Sub Page_PreRender(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreRender

If RadGrid2.SelectedIndexes.Count = 0 Then

RadGrid2.Rebind()

RadGrid2.SelectedIndexes.Add(0)

End If

End Sub

End Class

answered on 11 Aug 2011, 09:09 AM

RadGridMasterdetailCRUD1.zip

Hello Velissarios,

I have modified the project from my previous post to implement Insert as well. You can find the updated version attached to this message.

I hope it helps.

Greetings,
Mira
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.