Change column to editable text box

[Web Services]

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.

[Shinu]

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.

[Web Services]

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

[Shinu]

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.

[Web Services]

That worked, but where does the save button go when you do that?

[Web Services]

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>

[Shinu]

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.

[Jayesh Goyani]

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

[Web Services]

Thanks for the help. I stole your profile pic btw. That has to be the best one I've ever seen.

[Jayesh Goyani]

Hello,

Thanks a lot for photo.....

Thanks,
Jayesh Goyani