Web Services
Top achievements
Rank 2
Web Services
asked on 16 Aug 2011, 11:02 PM
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.
9 Answers, 1 is accepted
0
Shinu
Top achievements
Rank 2
answered on 17 Aug 2011, 05:17 AM
Hello WebServices,
Try the following code snippet to make the column to Editable TextBox on RowDoubleClick.
aspx:
JS:
Thanks,
Shinu.
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"
/>
<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.
0
Web Services
Top achievements
Rank 2
answered on 17 Aug 2011, 03:04 PM
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
0
0
Web Services
Top achievements
Rank 2
answered on 18 Aug 2011, 03:00 PM
That worked, but where does the save button go when you do that?
0
Web Services
Top achievements
Rank 2
answered on 18 Aug 2011, 03:39 PM
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
>
0
Shinu
Top achievements
Rank 2
answered on 19 Aug 2011, 11:44 AM
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.
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.
0
Accepted
Jayesh Goyani
Top achievements
Rank 2
answered on 19 Aug 2011, 11:51 AM
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.
Let me know if any concern.
Thanks,
Jayesh Goyani
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
0
Web Services
Top achievements
Rank 2
answered on 19 Aug 2011, 03:09 PM
Thanks for the help. I stole your profile pic btw. That has to be the best one I've ever seen.
0
Jayesh Goyani
Top achievements
Rank 2
answered on 20 Aug 2011, 09:51 AM
Hello,
Thanks a lot for photo.....
Thanks,
Jayesh Goyani
Thanks a lot for photo.....
Thanks,
Jayesh Goyani