In-line editing mode and entity framework

[Wendy Hunt]

Hi -

I'm using VS 2008 and it's entity framework.  Is it possible to use the in-line editing (Grid / Automatic Operations) with entity framework?, like in the example: 
http://demos.telerik.com/aspnet-ajax/grid/examples/dataediting/alleditablecolumns/defaultcs.aspx

I have been playing around with it and can't get anything to work but for poulating the grid and editing the field.  I have an edit and delete button and the CommandItemDisplay is set to "Top".  I need some assitance in order to get the insert working and the textbox in the correct spot.  I'm not sure if I need behind code or if my html page is not setup correctly. 

Here is my code block:

<%@ Page Title="" Language="C#" MasterPageFile="~/Pages/Master.Master" AutoEventWireup="true" CodeBehind="RadGridInLineTest2.aspx.cs" Inherits="TelerikTest.Pages.RadGridInLineTest2" %>
<%@ MasterType VirtualPath="~/Pages/Master.Master" %>
<%@ Register Assembly="System.Web.Entity, Version=3.5.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089"
    Namespace="System.Web.UI.WebControls" TagPrefix="asp" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

  <asp:Panel ID="Panel2" runat="server"
    style="z-index:1; position:absolute; top:100px; left: 0px;">
    <asp:UpdatePanel ID="UpdatePanel2" runat="server">
      <ContentTemplate>
        <div>
          <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
              <telerik:AjaxSetting AjaxControlID="systemApplyOffsetRadGrid">
                <UpdatedControls>
                  <telerik:AjaxUpdatedControl ControlID="systemApplyOffsetRadGrid" LoadingPanelID="RadAjaxLoadingPanel1" />
                  <telerik:AjaxUpdatedControl ControlID="RadWindowManager1" />
                </UpdatedControls>
              </telerik:AjaxSetting>
            </AjaxSettings>
          </telerik:RadAjaxManager>
          <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" />
          <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server"
            style="z-index:1; position:absolute; top:9px; left:-30px;">
            <div>
                <telerik:RadGrid ID="systemApplyOffsetRadGrid" runat="server"
                  GridLines="None"
                  PageSize="5"
                  Skin="WebBlue"
                  AllowAutomaticInserts="true"
                  AllowAutomaticUpdates="true"
                  AllowAutomaticDeletes="true"
                  DataSourceID="EntityDataSource1"
                  style="z-index: 1; left: 150px; top:50px; position: absolute">
                  <MasterTableView AutoGenerateColumns="False" DataKeyNames="ID" TableLayout="Fixed"
                    CommandItemDisplay="Top" Name="Master" ShowHeader="true" Caption="Apply Offset" Width="100%"
                    CssClass="RadGrid" AllowAutomaticDeletes="true" AllowAutomaticInserts="true" AllowAutomaticUpdates="true">
                    <Columns>
                      <telerik:GridEditCommandColumn ButtonType="ImageButton" UniqueName="EditCommandColumn"
                        EditImageUrl="../Images/Edit.gif" HeaderStyle-Width="30px" ItemStyle-HorizontalAlign="Center">
                      </telerik:GridEditCommandColumn>
                      <telerik:GridBoundColumn DataField="ID" DataType="System.Int32"
                        HeaderText="ID" ReadOnly="True" SortExpression="ID"
                        UniqueName="ID" HeaderStyle-Width="50px" ItemStyle-HorizontalAlign="Center"
                        HeaderStyle-HorizontalAlign="Center">
                      </telerik:GridBoundColumn>
                      <telerik:GridBoundColumn DataField="Lookup_Value"
                        HeaderText="Lookup Value" SortExpression="Lookup_Value"
                        UniqueName="Lookup_Value" HeaderStyle-Width="150px" ColumnEditorID="GridTextBoxColumnEditor1">
                      </telerik:GridBoundColumn>
                      <telerik:GridButtonColumn ConfirmText="Delete this Applied Offset?"
                        ImageUrl="../Images/Delete.gif"
                        ConfirmDialogType="RadWindow" ConfirmTitle="Delete" ButtonType="ImageButton"
                        CommandName="Delete" Text="Delete" UniqueName="DeleteColumn"
                        HeaderStyle-Width="40px" ItemStyle-HorizontalAlign="Center">
                      </telerik:GridButtonColumn>
                    </Columns>
                    <EditFormSettings ColumnNumber="2" CaptionDataField="Lookup_Value">
                      <FormTableItemStyle Wrap="false" />
                      <FormMainTableStyle GridLines="None" CellSpacing="0" CellPadding="0" />
                      <FormTableStyle CellSpacing="0" CellPadding="0" />
                      <FormTableAlternatingItemStyle Wrap="false" />
                      <EditColumn ButtonType="ImageButton" InsertText="Insert Value" UpdateText="Update Value"
                        UniqueName="EditCommandColumn1" CancelText="Cancel Edit"></EditColumn>
                    </EditFormSettings>
                  </MasterTableView>
                  <ClientSettings ClientEvents-OnRowDblClick="RowDblClick"></ClientSettings>
                </telerik:RadGrid>
                <telerik:GridTextBoxColumnEditor ID="GridTextBoxColumnEditor1" runat="server" TextBoxStyle-Width="75px"></telerik:GridTextBoxColumnEditor>
                <telerik:RadWindowManager ID="RadWindowManager1" runat="server"></telerik:RadWindowManager>
                <asp:EntityDataSource ID="EntityDataSource1" runat="server" ConnectionString="name=AllDataModels"
                  DefaultContainerName="AllDataModels" EntitySetName="lkup_ApplyOffset" EnableDelete="true"
                  EnableInsert="true" EnableUpdate="true">
                </asp:EntityDataSource>
                <asp:CustomValidator ID="customValidator" runat="server" ErrorMessage="CustomValidator"
                  style="z-index:1; position:absolute; top:52px; left:500px; height: 61px; width: 283px;"></asp:CustomValidator>
            </div>
          </telerik:RadAjaxPanel>
        </div>
      </ContentTemplate>
    </asp:UpdatePanel>
  </asp:Panel>
  <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
      <script type="text/javascript">
      function RowDblClick(sender, eventArgs)
      {
        sender.get_masterTableView().editItem(eventArgs.get_itemIndexHierarchical());
      }
      </script>
  </telerik:RadCodeBlock>
</asp:Content>

My goal is to be able to modify the Lookup_Value column within the grid itself (add/edit/delete) like the demo example.  I've attached a screen shot of the grid in editing mode.  The editing is done on another line than the record is shown in the grid and it is not what I would consider "In-Line". 

So, what I'd like help with is:
1. Get the Add New Record to work
2. Get the Deleting to work
3. Get the in-line to be in the correct spot, ...on the same row as the record.

Some assistance would be a big help. 
Thanks!!
wen

[Rosen]

Hi Wendy,

In order to change RadGrid's edit form type from EditForm to InPlace you should use MasterTableView's EditMode property.

Also I have noticed that you are using an incorrect ajaxsification scheme. As you may know you cannot mix RadAjaxManager, RadAjaxPanels and UpdatePanels on a single page. Therefore you should choose to use only one type of those controls.

Kind regards,
Rosen
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.