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

FormView like Grid Implementation

7 Answers 150 Views

Grid

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

Phil asked on 17 Jul 2014, 12:29 AM

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

7 Answers, 1 is accepted

answered on 17 Jul 2014, 06:11 AM

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

answered on 18 Jul 2014, 04:48 AM

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

answered on 18 Jul 2014, 11:15 PM

popup-issue.png

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