How do I create editable field in a specific Telerik demo?

[Steve]

I'm creating a page that is modeled off of Book A Car demo that is listed on the overview page of the grid. When the user clicks on the row in the grid, it expands to show the image of the car and details. Is there a way to make the details in that expanded view editable by clicking an edit button (I would add this to the expanded view)?

For instance, the user clicks on the row in the grid and it expands to show the details on the car. They can then click on an edit button that may be located in the upper right corner of the expanded view. That would then change the price to an editable text field with the current price in it. Once done, they click the update button and it updates the database with the new price.

Is this possible with this specific layout, and if so, how?

[Shinu]

Hi Steve,

You can use the NestedView template to achieve your required scenario. Please go through this online Demo on Grid - Hierarchy with Templates. In this demo, on the Contact Information view can be taken as example which uses DetailsView
and to it you can add a AutoGenerateEditButton. If you are using a RadGrid, you can add AutoGenerateEditColumn to edit the columns.

Thanks,
Shinu

[Steve]

Thanks Shinu. I'm looking to edit the data in-place. The AutoGenerateEditColumn changes the formatting. I'd like to be able to click a button and only one field will open up as an editable value, exactly where it is, without changing the layout.

[Shinu]

Hi Steve,

You can use a radgrid inside the NestedViewTemplate. Here for inline edit you can set EditMode="InPlace", and set ReadOnly="true" for those columns which you don't want to edit.

ASPX:

<NestedViewTemplate>
    <table>
        <tr>
            <td>
                <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
                <img src='<%# Page.ResolveUrl("~/Grid/Examples/Hierarchy/Hierarchy-with-templates/Img/") + (Container.FindControl("Label1") as Label).Text  %>.jpg'
                    alt="Customer Image" />
            </td>
            <td>
                <telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="false" DataSourceID="SqlDataSource1"
                    AllowPaging="true" AutoGenerateEditColumn="true" AllowSorting="true">
                    <MasterTableView EditMode="InPlace" DataKeyNames="EID">
                        <Columns>
                            <telerik:GridBoundColumn HeaderText="ID"DataField="ID" UniqueName="ID" ReadOnly="true">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn HeaderText="Date" DataField="Date" UniqueName="Date" DataFormatString="{0:D}" ReadOnly="true">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn HeaderText="Price" DataField="Price" UniqueName="Price">
                            </telerik:GridBoundColumn>
                        </Columns>
                    </MasterTableView>
                </telerik:RadGrid>
            </td>
        </tr>
    </table>
</NestedViewTemplate>

Thanks,
Shinu

[Steve]

Thanks Shinu, but that doesn't give me the correct look I am after. Everything lines up in columns, which is not 100% what I'm looking for.
If you look at the attached image, you will see I do have 2 columns, but if you look closely, I have a description in bold, followed by the data, non-bold. They line up on the left side, but the data follows the description immediately, not lined up in a separate column.

There has to be a way to just be able to edit a single field in the NestedViewTemplate. I'm only looking to edit the "On hand " value.

[Steve]

I found a post that gave me what I needed and have it working. If anyone else runs into this, take a look at http://www.telerik.com/community/forums/aspnet-ajax/grid/edit-and-insert-button-in-nested-view-template.aspx

One thing stumped me for about 20 minutes. I decided to use a RadNumericTextBox instead of a regular text box. When I tried to update, I was getting null values in the table. I found that I had to set DbValue='<%# Bind("OnHand")%>', I was using Eval.

Thanks for all your help Shinu!