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

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

5 Answers 83 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Steve
Top achievements
Rank 1
Steve asked on 29 Dec 2013, 08:10 PM
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?

5 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 02 Jan 2014, 06:06 AM
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


0
Steve
Top achievements
Rank 1
answered on 03 Jan 2014, 12:28 AM
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.
0
Shinu
Top achievements
Rank 2
answered on 03 Jan 2014, 09:28 AM
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
0
Steve
Top achievements
Rank 1
answered on 04 Jan 2014, 12:17 AM
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.
0
Steve
Top achievements
Rank 1
answered on 04 Jan 2014, 01:13 AM
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!

Tags
Grid
Asked by
Steve
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
Steve
Top achievements
Rank 1
Share this question
or