FormView like Grid Implementation

[Phil]

Hi:

I am going down a different path, I am trying to implement a FormView with the Radgrid.  I have the following, but I have a couple of problems.
1) edit form is a popup,... I would like in-line,
2) the insert event is not fully wired-up.  The ItemCommand event has the Insert command but the InsertCommand is not triggered:

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="MasterFormDetailProdGrid.aspx.cs" Inherits="Telerik.RadGrid.MasterFormDetailProdGrid" %>
<%@ Register TagPrefix="Telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <Telerik:RadGrid
        ID="categoriesGrid" runat="server"
        DataSourceID="categoriesDataSource"
        AllowFilteringByColumn="True"
        AllowPaging="True"
        AutoGenerateColumns="False"
        allowautomaticdeletes="True"
        allowautomaticinserts="True"
        allowautomaticupdates="True"
        Skin="Office2007" CellSpacing="0"
        OnItemCommand="categoriesGrid_ItemCommand" OnInsertCommand="categoriesGrid_InsertCommand" OnItemInserted="categoriesGrid_ItemInserted"
        >
        <MasterTableView
            CommandItemDisplay="Top"
            DataSourceID="categoriesDataSource"
            EditMode="InPlace"
            DataKeyNames="CategoryID" GridLines="None"
            PageSize="1" ShowHeader="False">
            <Columns>
                <Telerik:GridTemplateColumn HeaderText="CategoryID" UniqueName="CategoryIDColumn" AllowFiltering="False" ItemStyle-BorderStyle="None" >
                    <ItemTemplate>
                        <table style="padding: 0; margin: 0; width: 100%">
                            <tr>
                                <td class="rightDetail" style="width: 120px;">
                                    CategoryID:
                                </td>
                                <td class="leftDetail">
                                    <asp:Label ID="categoryIDLabel" runat="server" Text='<%# Eval("CategoryID") %>' />
                                </td>
                            </tr>
                            <tr>
                                <td class="rightDetail">
                                    CategoryName:
                                </td>
                                <td class="leftDetail">
                                    <asp:Label ID="categoryNameLabel" runat="server" Text='<%# Eval("CategoryName") %>' />
                                </td>
                            </tr>
                            <tr>
                                <td class="rightDetail">
                                    Description:
                                </td>
                                <td class="leftDetail">
                                    <asp:Label ID="descriptionLabel" runat="server" Text='<%# Eval("Description") %>' />
                                </td>
                            </tr>
                            <tr>
                                <td class="rightDetail">
                                    Picture:
                                </td>
                                <td class="leftDetail">
                                    <telerik:RadBinaryImage runat="server" ID="RadBinaryImage1" DataValue='<%# Eval("Picture") == DBNull.Value? new System.Byte[0]: Eval("Picture") %>'
                                        AutoAdjustImageControlSize="false" Width="150px" Height="150px" ToolTip='<%#Eval("CategoryName", "Photo of {0}") %>'
                                        AlternateText='<%#Eval("CategoryName", "Photo of {0}") %>' />
                                </td>
                            </tr>
                        </table>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:Label ID="CategoryIDLabel" runat="server" Text='<# Eval("CategoryID") %>' />
                    </EditItemTemplate>
                </Telerik:GridTemplateColumn>
                <Telerik:GridEditCommandColumn EditText="Edit"
                    ItemStyle-VerticalAlign="Top" ItemStyle-Width="40px"
                    ItemStyle-BorderStyle="None" />
                <Telerik:GridButtonColumn Text="Delete" CommandName="Delete"
                    UniqueName="DeleteColumn" ItemStyle-VerticalAlign="Top" ItemStyle-Width="50px" ItemStyle-BorderStyle="None"
                    ConfirmText="Are you sure you want to delete this data?" />
            </Columns>
            <ExpandCollapseColumn>
            <HeaderStyle Width="20px"></HeaderStyle>
            </ExpandCollapseColumn>
            <RowIndicatorColumn>
            <HeaderStyle Width="20px"></HeaderStyle>
            </RowIndicatorColumn>
            <EditItemStyle CssClass="EditedTelerikGrid"/>
            <EditFormSettings EditFormType="Template">
                <FormTemplate>
            <table style="padding: 0; margin: 0; width: 100%">
                <tr>
                    <td colspan="3" class="rightDetail">
                        <asp:LinkButton id="insertButton" runat="server" CausesValidation="True"
                            CommandName="Insert" Text="Save" CssClass="buttonBlue" CommandArgument="close"
                            ValidationGroup="insertValidationGroup" />
                          |
                        <asp:LinkButton id="InsertCancelButton" runat="server" CausesValidation="False"
                            CommandName="Cancel" Text="Cancel" CssClass="buttonBlue" />
                    </td>
                </tr>
                <tr>
                    <td class="rightDetail">
                        CategoryID:
                    </td>
                    <td class="leftDetail">
                        <asp:Label ID="categoryIDLabel" runat="server" Text='<%# Eval("CategoryID") %>' />
                    </td>
                    <td class="leftDetail">
                    </td>
                </tr>
                <tr>
                    <td class="rightDetail">
                        CategoryName:
                    </td>
                    <td class="leftDetail">
                        <telerik:RadTextBox ID="categoryNameTextBox" runat="server" Text='<%# Bind("CategoryName") %>' Columns="14" MaxLength="15" />
                    </td>
                    <td class="leftDetail">
                        <asp:RequiredFieldValidator id="categoryNameValidator" runat="server"
                            ControlToValidate="categoryNameTextBox" ValidationGroup="insertValidationGroup"
                            ErrorMessage="'CategoryName' is required" Text="*" />
                    </td>
                </tr>
                <tr>
                    <td class="rightDetail">
                        Description:
                    </td>
                    <td class="leftDetail">
                        <telerik:RadTextBox ID="descriptionTextBox" runat="server" Text='<%# Bind("Description") %>' Columns="80" Rows="3" />
                    </td>
                    <td class="leftDetail">
                        <asp:RequiredFieldValidator id="descriptionValidator" runat="server"
                            ControlToValidate="descriptionTextBox" ValidationGroup="insertValidationGroup"
                            ErrorMessage="'Description' is required" Text="*" />
                    </td>
                </tr>
                <tr>
                    <td class="rightDetail">
                        Picture:
                    </td>
                    <td class="leftDetail">
                    </td>
                    <td class="leftDetail">
                    </td>
                </tr>
                <tr>
                    <td colspan="3">
                        <asp:ValidationSummary id="insertValidationSummary" runat="server"
                            ValidationGroup="insertValidationGroup" />
                    </td>
                </tr>
            </table>

                </FormTemplate>
            </EditFormSettings>
            <CommandItemSettings AddNewRecordText="Add"  RefreshText="Refresh" />
        </MasterTableView>
        <FilterMenu EnableTheming="True" Skin="Office2007">
            <CollapseAnimation Duration="200" Type="OutQuint" />
        </FilterMenu>
    </Telerik:RadGrid>
    <asp:HiddenField ID="CategoryIDHidden" runat="server" Value='' />
    <asp:SqlDataSource ID="categoriesDataSource" runat="server"
        ConnectionString="<%$ ConnectionStrings:Northwind %>"
        SelectCommand="SELECT * FROM [Categories]"
        DeleteCommand="DELETE FROM [Categories] WHERE [CategoryID] = @CategoryID"
        InsertCommand=" INSERT INTO [Categories] ( [CategoryName], [Description] )
    VALUES ( @CategoryName, @Description )"
        UpdateCommand=" UPDATE [Categories]
    SET
        [CategoryName] = @CategoryName,
        [Description] = @Description
    WHERE
        [CategoryID] = @CategoryID ">
        <DeleteParameters>
            <asp:Parameter Name="CategoryID" />
        </DeleteParameters>
        <InsertParameters>
            <asp:Parameter Name="CategoryName" />
            <asp:Parameter Name="Description" />
            <asp:Parameter Name="Picture" />
        </InsertParameters>
        <UpdateParameters>
            <asp:Parameter Name="CategoryName" />
            <asp:Parameter Name="Description" />
            <asp:Parameter Name="Picture" />
            <asp:Parameter Name="CategoryID" />
        </UpdateParameters>
    </asp:SqlDataSource>
    <asp:Label ID="messageLabel" runat="server" Text="" CssClass="notification"></asp:Label>
</asp:Content>

Sorry about the size, I tried the simplest example.  The code behind is nothing.
This comes from:
http://demos.telerik.com/aspnet-ajax/grid/examples/data-editing/form-template-update/defaultcs.aspx
Phil

[Phil]

Hi:
I have solved item 2 (insert event), the command name needs to be PerformInsert
I would still like item 1.
Phil

[Princy]

Hi Phil,

The EditFormType="Template" is effective only for EditMode types "EditForms" or "PopUp". If you want Inplace editing, you should use EditItemTemplate. Please take a look at the sample code snippet.

ASPX:

<telerik:RadGrid ID="rgrdOrders" runat="server" DataSourceID="dsOrders" AllowPaging="True" AutoGenerateColumns="False">
    <MasterTableView CommandItemDisplay="Top" EditMode="InPlace" DataKeyNames="OrderID" PageSize="1" ShowHeader="False">
        <Columns>
            <telerik:GridTemplateColumn UniqueName="OrderID">
                <ItemTemplate>
                    OrderID:
                    <asp:Label ID="lblOrderID" runat="server" Text='<%# Eval("OrderID") %>' />
                    <br />
                    ShipName:
                    <asp:Label ID="lblShipName" runat="server" Text='<%# Eval("ShipName") %>' />
                    <br />
                    ShipVia:
                    <asp:Label ID="lblShipVia" runat="server" Text='<%# Eval("ShipVia") %>' />
                </ItemTemplate>
                <EditItemTemplate>
                    OrderID:
                    <asp:Label ID="lblOrderID" runat="server" Text='<%# Eval("OrderID") %>' />
                    <br />
                    ShipName:
                    <telerik:RadTextBox ID="rtxtShipName" runat="server" Text='<%# Bind("ShipName") %>' />
                    <br />
                    ShipVia:
                    <telerik:RadTextBox ID="rtxtShipVia" runat="server" Text='<%# Bind("ShipVia") %>' />
                </EditItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridEditCommandColumn EditText="Edit" />
            <telerik:GridButtonColumn Text="Delete" CommandName="Delete" UniqueName="DeleteColumn" ConfirmText="Are you sure you want to delete this data?" />
        </Columns>
        <CommandItemSettings AddNewRecordText="Add" RefreshText="Refresh" />
    </MasterTableView>
</telerik:RadGrid>

Thanks,
Princy

[Phil]

Hi:
I tried EditForms and inplace but it still does popup.
Phil

[Princy]

Hi Phil,

The code works fine at my end, please try the below sample code snippet and check if it works on your side.

ASPX:

<telerik:RadGrid ID="categoriesGrid" runat="server" DataSourceID="categoriesDataSource" AllowPaging="True" AutoGenerateColumns="False" AllowAutomaticDeletes="True" AllowAutomaticInserts="True" AllowAutomaticUpdates="True" CellSpacing="0">
    <MasterTableView CommandItemDisplay="Top" DataSourceID="categoriesDataSource" EditMode="InPlace" DataKeyNames="CategoryID" GridLines="None" PageSize="1" ShowHeader="False">
        <Columns>
            <telerik:GridTemplateColumn HeaderText="CategoryID" UniqueName="CategoryIDColumn"
                ItemStyle-BorderStyle="None">
                <ItemTemplate>
                    <table style="padding: 0; margin: 0; width: 100%">
                        <tr>
                            <td class="rightDetail" style="width: 120px;">
                                CategoryID:
                            </td>
                            <td class="leftDetail">
                                <asp:Label ID="categoryIDLabel" runat="server" Text='<%# Eval("CategoryID") %>' />
                            </td>
                        </tr>
                        <tr>
                            <td class="rightDetail">
                                CategoryName:
                            </td>
                            <td class="leftDetail">
                                <asp:Label ID="categoryNameLabel" runat="server" Text='<%# Eval("CategoryName") %>' />
                            </td>
                        </tr>
                        <tr>
                            <td class="rightDetail">
                                Description:
                            </td>
                            <td class="leftDetail">
                                <asp:Label ID="descriptionLabel" runat="server" Text='<%# Eval("Description") %>' />
                            </td>
                        </tr>
                        <tr>
                            <td class="rightDetail">
                                Picture:
                            </td>
                            <td class="leftDetail">
                                <telerik:RadBinaryImage runat="server" ID="RadBinaryImage1" DataValue='<%# Eval("Picture") == DBNull.Value? new System.Byte[0]: Eval("Picture") %>' AutoAdjustImageControlSize="false" Width="150px" Height="150px" ToolTip='<%#Eval("CategoryName", "Photo of {0}") %>' AlternateText='<%#Eval("CategoryName", "Photo of {0}") %>' />
                            </td>
                        </tr>
                    </table>
                </ItemTemplate>
                <EditItemTemplate>
                    <table style="padding: 0; margin: 0; width: 100%">
                        <tr>
                            <td class="rightDetail">
                                CategoryID:
                            </td>
                            <td class="leftDetail">
                                <asp:Label ID="categoryIDLabel" runat="server" Text='<%# Eval("CategoryID") %>' />
                            </td>
                            <td class="leftDetail">
                            </td>
                        </tr>
                        <tr>
                            <td class="rightDetail">
                                CategoryName:
                            </td>
                            <td class="leftDetail">
                                <telerik:RadTextBox ID="categoryNameTextBox" runat="server" Text='<%# Bind("CategoryName") %>' />
                            </td>
                            <td class="leftDetail">
                                <asp:RequiredFieldValidator ID="categoryNameValidator" runat="server" ControlToValidate="categoryNameTextBox" ErrorMessage="'CategoryName' is required" Text="*" />
                            </td>
                        </tr>
                        <tr>
                            <td class="rightDetail">
                                Description:
                            </td>
                            <td class="leftDetail">
                                <telerik:RadTextBox ID="descriptionTextBox" runat="server" Text='<%# Bind("Description") %>' />
                            </td>
                            <td class="leftDetail">
                                <asp:RequiredFieldValidator ID="descriptionValidator" runat="server" ControlToValidate="descriptionTextBox" ErrorMessage="'Description' is required" Text="*" />
                            </td>
                        </tr>
                    </table>
                </EditItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridEditCommandColumn EditText="Edit" ItemStyle-VerticalAlign="Top" ItemStyle-Width="40px" ItemStyle-BorderStyle="None" />
            <telerik:GridButtonColumn Text="Delete" CommandName="Delete" UniqueName="DeleteColumn" ItemStyle-VerticalAlign="Top" ItemStyle-Width="50px" ItemStyle-BorderStyle="None" ConfirmText="Are you sure you want to delete this data?" />
        </Columns>
        <ExpandCollapseColumn>
            <HeaderStyle Width="20px"></HeaderStyle>
        </ExpandCollapseColumn>
        <RowIndicatorColumn>
            <HeaderStyle Width="20px"></HeaderStyle>
        </RowIndicatorColumn>
        <EditItemStyle CssClass="EditedTelerikGrid" />
        <CommandItemSettings AddNewRecordText="Add" RefreshText="Refresh" />
    </MasterTableView>
    <FilterMenu EnableTheming="True">
        <CollapseAnimation Duration="200" Type="OutQuint" />
    </FilterMenu>
</telerik:RadGrid>
<asp:HiddenField ID="CategoryIDHidden" runat="server" Value='' />
<asp:SqlDataSource ID="categoriesDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
    SelectCommand="SELECT * FROM [Categories]" DeleteCommand="DELETE FROM [Categories] WHERE [CategoryID] = @CategoryID"
    InsertCommand=" INSERT INTO [Categories] ( [CategoryName], [Description] ) VALUES ( @CategoryName, @Description )"
    UpdateCommand=" UPDATE [Categories] SET  [CategoryName] = @CategoryName, [Description] = @Description  WHERE   [CategoryID] = @CategoryID ">
    <DeleteParameters>
        <asp:Parameter Name="CategoryID" />
    </DeleteParameters>
    <InsertParameters>
        <asp:Parameter Name="CategoryName" />
        <asp:Parameter Name="Description" />
        <asp:Parameter Name="Picture" />
    </InsertParameters>
    <UpdateParameters>
        <asp:Parameter Name="CategoryName" />
        <asp:Parameter Name="Description" />
        <asp:Parameter Name="Picture" />
        <asp:Parameter Name="CategoryID" />
    </UpdateParameters>
</asp:SqlDataSource>

Thanks,
Princy

[Phil]

Hi:
I pasted your version of the RadGrid, but it still use popup editing. I had both inline and EditForms and they both look the same (see attachment).
Phil 

[Phil]

Hi:
I tried your Orders sample, with no better results.
Phil

[Princy]

Hi Phil,

Unfortunately, I'm unable to replicate this issue at my end.

Thanks,
Princy