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

6 posts, 0 answers
  1. Steve
    Steve avatar
    84 posts
    Member since:
    Aug 2013

    Posted 29 Dec 2013 Link to this post

    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?

  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 02 Jan 2014 Link to this post

    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


  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Steve
    Steve avatar
    84 posts
    Member since:
    Aug 2013

    Posted 02 Jan 2014 Link to this post

    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.
  5. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 03 Jan 2014 Link to this post

    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
  6. Steve
    Steve avatar
    84 posts
    Member since:
    Aug 2013

    Posted 03 Jan 2014 Link to this post

    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.
  7. Steve
    Steve avatar
    84 posts
    Member since:
    Aug 2013

    Posted 03 Jan 2014 Link to this post

    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!

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017