Change column to editable text box

10 posts, 1 answers
  1. Web Services
    Web Services avatar
    243 posts
    Member since:
    Apr 2008

    Posted 16 Aug 2011 Link to this post

    I would like to be able to change one column value to an editable text box with a save/cancel button on click is there any way to do this? See my image for further explanation.
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 17 Aug 2011 Link to this post

    Hello WebServices,

    Try the following code snippet to make the column to Editable TextBox on RowDoubleClick.
    aspx:
    <telerik:RadGrid ID="RadGrid1" runat="server">
     . . . .
       <MasterTableView DataKeyNames="EmployeeID" CommandItemDisplay="Top" EditMode="PopUp">
         <Columns>
            <telerik:GridBoundColumn UniqueName="EmployeeID" DataField="EmployeeID" HeaderText="EmployeeID"
            ColumnEditorID="GridTextBoxColumnEditor1">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn UniqueName="FirstName" DataField="FirstName" HeaderText="FirstName"
            ReadOnly="true">
            </telerik:GridBoundColumn>
         <Columns>
      </MasterTableView>
      <ClientSettings>
         <ClientEvents OnRowDblClick="RowDblClick" />
      </ClientSettings>
    </telerik:RadGrid>
    <telerik:GridTextBoxColumnEditor ID="GridTextBoxColumnEditor1" runat="server" TextBoxMode="SingleLine"
    TextBoxStyle-Width="180px" />
    JS:
    <script type="text/javascript">
     function RowDblClick(sender, eventArgs)
     {
      editedRow = eventArgs.get_itemIndexHierarchical();
      $find("<%= RadGrid1.ClientID %>").get_masterTableView().editItem(editedRow);
     }
      function GridCommand(sender, args)
      {
       if (args.get_commandName() != "Edit")
        {
         editedRow = null;
        }
      }
    </script>

    Thanks,
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Web Services
    Web Services avatar
    243 posts
    Member since:
    Apr 2008

    Posted 17 Aug 2011 Link to this post

    While that does work, is there any way to keep everything in the row as is and just change that one filed to an editable text box? What I mean is, right now, it expands out the row and then puts the editable text box, I would like to keep it inline and just change it in the spot. See my images
  5. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 17 Aug 2011 Link to this post

    Hello WebServices,

    Try setting the EditMode in MasterTableView to InPlace to achieve your requirement.For more information check the following help article.
    In Place

    Thanks,
    Shinu.
  6. Web Services
    Web Services avatar
    243 posts
    Member since:
    Apr 2008

    Posted 18 Aug 2011 Link to this post

    That worked, but where does the save button go when you do that?
  7. Web Services
    Web Services avatar
    243 posts
    Member since:
    Apr 2008

    Posted 18 Aug 2011 Link to this post

    I can't see the save button anywhere. Here is what my grid looks like.
    <telerik:RadGrid ID="RadGrid1" runat="server" GridLines="None" AllowPaging="True"
            AllowSorting="True" AutoGenerateColumns="false" PageSize="50" Skin="Windows7">
                <ClientSettings>
                    <ClientEvents OnRowDblClick="RowDblClick" />
                    <ClientEvents OnRowClick="RowClick" />
                </ClientSettings>
                <MasterTableView DataKeyNames="memberId" AutoGenerateColumns="false" EditMode="InPlace" >
                    <RowIndicatorColumn>
                        <HeaderStyle Width="20px"></HeaderStyle>
                    </RowIndicatorColumn>
                    <ExpandCollapseColumn>
                        <HeaderStyle Width="20px"></HeaderStyle>
                    </ExpandCollapseColumn>
                    <Columns>
                        <telerik:GridBoundColumn DataField="name" HeaderText="Name" SortExpression="name"
                            UniqueName="name" HeaderStyle-Width="80px" ReadOnly="true">
                        </telerik:GridBoundColumn>
                        <telerik:GridTemplateColumn DataField="goalhours" HeaderText="Goal" SortExpression="goalHours"
                            UniqueName="goalHours" HeaderStyle-Width="80px" >
                            <ItemTemplate>
                                <asp:Label ID="goalOutput" runat="server" Text='<%# Bind("goalHours") %>'></asp:Label>
                            </ItemTemplate>
                            <EditItemTemplate>
                                <telerik:RadTextBox ID="goalHoursInput" Runat="server" Value='<%# Eval("goalHours") %>' Width="40px">
                                </telerik:RadTextBox>
                                <asp:CompareValidator ID="hoursValidate" runat="server" ControlToValidate="goalHoursInput"
                                ErrorMessage="Please enter a number" Operator="DataTypeCheck" Type="Double" Display="Dynamic"></asp:CompareValidator>
                            </EditItemTemplate>
                        </telerik:GridTemplateColumn>
                        <telerik:GridBoundColumn DataField="percent" HeaderText="% of Goal" SortExpression="percent"
                            UniqueName="percent" HeaderStyle-Width="80px" ReadOnly="true">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="metGoal" HeaderText="Met Goal" SortExpression="metGoal"
                            UniqueName="metGoal" HeaderStyle-Width="80px" ReadOnly="true">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="averageHours" HeaderText="Average" SortExpression="averageHours"
                            UniqueName="averageHours" HeaderStyle-Width="80px" ReadOnly="true">
                        </telerik:GridBoundColumn>
                    </Columns>
                </MasterTableView>
            </telerik:RadGrid>
  8. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 19 Aug 2011 Link to this post

    Hello WebServices,

    When you are editing the grid using InPlace it will automatically generate Update and Cancel buttons which saves your records which is explained in the help documentation. Check the below attached image as well. Then make sure that you use Advanced Databinding using NeedDatasource Event.Check the following documentaion for more information.
    Advanced Data-binding (using NeedDataSource event)

    Thanks,
    Shinu.
  9. Answer
    Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 19 Aug 2011 Link to this post

    Hello,

    you are not able to see Update and Cancel button because you are not taking the "GridEditCommandColumn" so but you can achieve this thing with different way. as mentioned in below code snippet.

    <telerik:GridTemplateColumn DataField="goalhours" HeaderText="Goal" SortExpression="goalHours"
                            UniqueName="goalHours" HeaderStyle-Width="80px" >
                            <ItemTemplate>
                                <asp:Label ID="goalOutput" runat="server" Text='<%# Bind("goalHours") %>'></asp:Label>
                            </ItemTemplate>
                            <EditItemTemplate>
                                <telerik:RadTextBox ID="goalHoursInput" Runat="server" Value='<%# Eval("goalHours") %>' Width="40px">
                                </telerik:RadTextBox>
                                <asp:CompareValidator ID="hoursValidate" runat="server" ControlToValidate="goalHoursInput"
                                ErrorMessage="Please enter a number" Operator="DataTypeCheck" Type="Double" Display="Dynamic"></asp:CompareValidator>
     
     
    <asp:Button ID="btnUpdate" Text="Update"runat="server" CommandName="Update">
                                    </asp:Button
    <asp:Button ID="btnCancel" Text="Cancel" runat="server" CausesValidation="False"
    CommandName="Cancel"></asp:Button>
     
     
                            </EditItemTemplate>
                        </telerik:GridTemplateColumn>

    Let me know if any concern.

    Thanks,
    Jayesh Goyani
  10. Web Services
    Web Services avatar
    243 posts
    Member since:
    Apr 2008

    Posted 19 Aug 2011 Link to this post

    Thanks for the help. I stole your profile pic btw. That has to be the best one I've ever seen.
  11. Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 20 Aug 2011 Link to this post

    Hello,

    Thanks a lot for photo.....

    Thanks,
    Jayesh Goyani
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017