34 Answers, 1 is accepted
There is an issue with the check box element and as you have observed out yourself, you have to select outside the check box in order to activate the edit.
Nevertheless, I have prepared a sample page with RadGrid that uses GridTemplateColumn instead of the GridCheckBoxColumn that has the behavior you need.
Please refer to the attached sample page and see if this fulfills your requirements.
Regards,
Konstantin Dikov
Telerik
Thank you for your quick response and apologies for my slow one. This worked great for me so thank you very much.
Regards
Geoff
One snag I have with the solution is that having the Checkbox in a GridTemplateColumn means that the associated UpdateParameter in my SQDataSource is no longer populated automatically with the edited values. I guess there is a way to do this with one of the RadGrid events (e.g. UpdateCommand or ItemCommand) in the code behind. Could you help?
Regards
Geoff
You could handle the ItemCommand or BatchEditCommand server-side event for retrieving the values. Detail information for this is available at the following help article:
Hope that helps.
Regards,
Konstantin Dikov
Telerik
I have read through that demo and a few others but I am still unable to fathom the technique that gets me access to the control from the ItemCommand event. Here is my page code:
<
telerik:RadWindowManager
ID
=
"RadWindowManager1"
runat
=
"server"
EnableShadow
=
"true"
></
telerik:RadWindowManager
>
<
telerik:RadCodeBlock
ID
=
"RadCodeBlock1"
runat
=
"server"
>
<
script
type
=
"text/javascript"
>
function changeEditor(sender, args) {
var grid = $find("<%=RadGrid1.ClientID%>");
var batchManager = grid.get_batchEditingManager();
grid.get_batchEditingManager().openCellForEdit(sender.parentElement.parentElement);
sender.checked = !sender.checked;
}
</
script
>
</
telerik:RadCodeBlock
>
<
telerik:RadAjaxPanel
runat
=
"server"
ID
=
"RadAjaxPanel1"
>
<
telerik:RadGrid
ID
=
"RadGrid1"
DataSourceID
=
"ds_ActivityCodes"
AutoGenerateColumns
=
"False"
AllowSorting
=
"True"
AllowAutomaticDeletes
=
"False"
AllowAutomaticInserts
=
"True"
AllowAutomaticUpdates
=
"True"
AllowPaging
=
"True"
GridLines
=
"None"
PageSize
=
"10"
runat
=
"server"
>
<
MasterTableView
CommandItemDisplay
=
"TopAndBottom"
DataKeyNames
=
"activity_id"
DataSourceID
=
"ds_ActivityCodes"
HorizontalAlign
=
"NotSet"
EditMode
=
"Batch"
AutoGenerateColumns
=
"False"
>
<
CommandItemSettings
ShowSaveChangesButton
=
"false"
/>
<
BatchEditingSettings
EditType
=
"Cell"
OpenEditingEvent
=
"None"
/>
<
SortExpressions
>
<
telerik:GridSortExpression
FieldName
=
"ActivityCode"
SortOrder
=
"Ascending"
/>
</
SortExpressions
>
<
Columns
>
<
telerik:GridBoundColumn
DataField
=
"ActivityCode"
ColumnEditorID
=
"ActivityCode_Editor"
HeaderStyle-Width
=
"60px"
HeaderText
=
"Activity Code"
SortExpression
=
"ActivityCode"
UniqueName
=
"ActivityCode"
>
<
ColumnValidationSettings
EnableRequiredFieldValidation
=
"true"
>
<
RequiredFieldValidator
ForeColor
=
"Red"
Text
=
"*This field is required"
>
</
RequiredFieldValidator
>
</
ColumnValidationSettings
>
</
telerik:GridBoundColumn
>
<
telerik:GridBoundColumn
DataField
=
"ActivityDescription"
ColumnEditorID
=
"TextEditor"
HeaderStyle-Width
=
"210px"
HeaderText
=
"Description"
SortExpression
=
"ActivityDescription"
UniqueName
=
"ActivityDescription"
>
<
ColumnValidationSettings
EnableRequiredFieldValidation
=
"true"
>
<
RequiredFieldValidator
ForeColor
=
"Red"
Text
=
"*This field is required"
>
</
RequiredFieldValidator
>
</
ColumnValidationSettings
>
</
telerik:GridBoundColumn
>
<
telerik:GridTemplateColumn
HeaderText
=
"Display"
UniqueName
=
"Display"
DataField
=
"Display"
>
<
ItemTemplate
>
<
input
id
=
"chk_Display"
type
=
"checkbox"
checked='<%# Eval("Display") %>' onclick="changeEditor(this);" />
</
ItemTemplate
>
<
EditItemTemplate
>
<
asp:CheckBox
ID
=
"chk_DisplayEdit"
Checked='<%# Bind("Display") %>' ToolTip="Untick to remove from options available to user" runat="server" />
</
EditItemTemplate
>
</
telerik:GridTemplateColumn
>
</
Columns
>
</
MasterTableView
>
</
telerik:RadGrid
>
<
telerik:GridTextBoxColumnEditor
runat
=
"server"
ID
=
"ActivityCode_Editor"
>
<
TextBoxStyle
Width
=
"30px"
/>
</
telerik:GridTextBoxColumnEditor
>
<
telerik:GridTextBoxColumnEditor
runat
=
"server"
ID
=
"TextEditor"
>
<
TextBoxStyle
Width
=
"280px"
/>
</
telerik:GridTextBoxColumnEditor
>
<
telerik:GridCheckBoxColumnEditor
runat
=
"server"
ID
=
"CheckBoxEditor"
>
<
CheckBoxStyle
Width
=
"10px"
/>
</
telerik:GridCheckBoxColumnEditor
>
</
telerik:RadAjaxPanel
>
<%-- Data Source, definition for Activity Codes --%>
<
asp:SqlDataSource
ID
=
"ds_ActivityCodes"
runat
=
"server"
ConnectionString="<%$ ConnectionStrings:RAMtrack %>"
ProviderName="<%$ ConnectionStrings:RAMtrack.ProviderName %>"
SelectCommand="Select_Activities"
SelectCommandType="StoredProcedure"
UpdateCommand="Update_Activities"
UpdateCommandType="StoredProcedure"
InsertCommand="Insert_Activities"
InsertCommandType="StoredProcedure"
>
<
SelectParameters
>
<
asp:SessionParameter
DefaultValue
=
"2"
Name
=
"Installation_Id"
SessionField
=
"Installation_Id"
Type
=
"Int64"
/>
</
SelectParameters
>
<
InsertParameters
>
<
asp:SessionParameter
Name
=
"Installation_Id"
SessionField
=
"Installation_Id"
Type
=
"Int64"
/>
<
asp:Parameter
Name
=
"ActivityCode"
Type
=
"String"
/>
<
asp:Parameter
Name
=
"ActivityDescription"
Type
=
"String"
/>
<
asp:Parameter
Name
=
"display"
DefaultValue
=
"1"
Type
=
"Int64"
/>
</
InsertParameters
>
<
UpdateParameters
>
<
asp:Parameter
Name
=
"ActivityCode"
Type
=
"String"
/>
<
asp:Parameter
Name
=
"ActivityDescription"
Type
=
"String"
/>
<
asp:Parameter
Name
=
"display"
Type
=
"Int64"
/>
<
asp:Parameter
Name
=
"activity_id"
Type
=
"Int64"
/>
</
UpdateParameters
>
</
asp:SqlDataSource
>
Protected Sub RadGrid1_ItemCommand(sender As Object, e As Web.UI.GridCommandEventArgs) Handles RadGrid1.ItemCommand
If e.CommandName = RadGrid.UpdateCommandName Then
' Trying to access the control "chk_DisplayEdit" which is an ASP checkbox control in a GridTemplateColumn
Dim editedItem As GridEditableItem = DirectCast(e.Item, GridEditableItem)
Dim Display_chk As CheckBox = DirectCast(editedItem.FindControl("chk_DisplayEdit"), CheckBox)
' These GridBoundColumns work fine
Dim argument As GridBatchEditingEventArgument = TryCast(e.CommandArgument, GridBatchEditingEventArgument)
Dim oldValues As Hashtable = argument.OldValues
Dim newValues As Hashtable = argument.NewValues
Dim OldDisplayValue As String = oldValues("ActivityDescription").ToString()
Dim NewDisplayValue As String = newValues("ActivityDescription").ToString()
End If
End Sub
Can you help me anymore?
The approach you are trying to use for getting the new values of the check box control is not applicable with Batch Editing. Please note that with Batch Editing there are no editors for each item and only one instance is used for each.
For retrieving the check boxes new values you should use the same approach used for the other columns:
Protected
Sub
RadGrid1_ItemCommand(sender
As
Object
, e
As
GridCommandEventArgs)
If
e.CommandName = RadGrid.UpdateCommandName
Then
Dim
argument
As
GridBatchEditingEventArgument = TryCast(e.CommandArgument, GridBatchEditingEventArgument)
Dim
newValues
As
Hashtable = argument.NewValues
Dim
checkBoxNewValue
As
Boolean
=
Boolean
.Parse(newValues(
"Display"
).ToString())
End
If
End
Sub
Hope that helps.
Regards,
Konstantin Dikov
Telerik
That works great, thank you for you help and patience.
Regards
Geoff
After messing about with it for a bit, I tried using a server control as per the EditItemTemplate. This worked fine in terms of the binding but then of course I needed to add the call to the client changeEditor javascript function, which I did in the RadGrid1_ItemDataBound event.
So here's my final page code:
<%@ Page Language="vb" CodeFile="ActivityCodes.aspx.vb" Inherits="Telerik.GridExamplesVBNET.DataEditing.BatchEditing.ActivityCodesVB" MasterPageFile="~/RAMTrack.master" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<
asp:Content
ID
=
"Content1"
ContentPlaceHolderID
=
"Head"
runat
=
"Server"
>
</
asp:Content
>
<
asp:Content
ID
=
"Content2"
ContentPlaceHolderID
=
"Body"
runat
=
"Server"
>
<
telerik:RadWindowManager
ID
=
"RadWindowManager1"
runat
=
"server"
EnableShadow
=
"true"
></
telerik:RadWindowManager
>
<
telerik:RadCodeBlock
ID
=
"RadCodeBlock1"
runat
=
"server"
>
<
script
type
=
"text/javascript"
>
function changeEditor(sender, args) {
var grid = $find("<%=RadGrid1.ClientID%>");
var batchManager = grid.get_batchEditingManager();
grid.get_batchEditingManager().openCellForEdit(sender.parentElement.parentElement);
sender.checked = !sender.checked;
}
</
script
>
</
telerik:RadCodeBlock
>
<
telerik:RadAjaxPanel
runat
=
"server"
ID
=
"RadAjaxPanel1"
>
<
telerik:RadGrid
ID
=
"RadGrid1"
DataSourceID
=
"ds_ActivityCodes"
AutoGenerateColumns
=
"False"
AllowSorting
=
"True"
AllowAutomaticDeletes
=
"False"
AllowAutomaticInserts
=
"True"
AllowAutomaticUpdates
=
"True"
AllowPaging
=
"True"
GridLines
=
"None"
PageSize
=
"10"
runat
=
"server"
>
<
MasterTableView
CommandItemDisplay
=
"TopAndBottom"
DataKeyNames
=
"activity_id"
DataSourceID
=
"ds_ActivityCodes"
HorizontalAlign
=
"NotSet"
EditMode
=
"Batch"
AutoGenerateColumns
=
"False"
>
<
CommandItemSettings
ShowSaveChangesButton
=
"false"
/>
<
BatchEditingSettings
EditType
=
"Cell"
OpenEditingEvent
=
"None"
/>
<
SortExpressions
>
<
telerik:GridSortExpression
FieldName
=
"ActivityCode"
SortOrder
=
"Ascending"
/>
</
SortExpressions
>
<
Columns
>
<
telerik:GridBoundColumn
DataField
=
"ActivityCode"
ColumnEditorID
=
"ActivityCode_Editor"
HeaderStyle-Width
=
"60px"
HeaderText
=
"Activity Code"
SortExpression
=
"ActivityCode"
UniqueName
=
"ActivityCode"
>
<
ColumnValidationSettings
EnableRequiredFieldValidation
=
"true"
>
<
RequiredFieldValidator
ForeColor
=
"Red"
Text
=
"*This field is required"
>
</
RequiredFieldValidator
>
</
ColumnValidationSettings
>
</
telerik:GridBoundColumn
>
<
telerik:GridBoundColumn
DataField
=
"ActivityDescription"
ColumnEditorID
=
"TextEditor"
HeaderStyle-Width
=
"210px"
HeaderText
=
"Description"
SortExpression
=
"ActivityDescription"
UniqueName
=
"ActivityDescription"
>
<
ColumnValidationSettings
EnableRequiredFieldValidation
=
"true"
>
<
RequiredFieldValidator
ForeColor
=
"Red"
Text
=
"*This field is required"
>
</
RequiredFieldValidator
>
</
ColumnValidationSettings
>
</
telerik:GridBoundColumn
>
<
telerik:GridTemplateColumn
HeaderText
=
"Display"
UniqueName
=
"Display"
DataField
=
"Display"
>
<
ItemTemplate
>
<
asp:CheckBox
ID
=
"chk_Display"
Checked='<%# Eval("Display") %>' ToolTip="Untick to remove from options available to user" runat="server" />
</
ItemTemplate
>
<
EditItemTemplate
>
<
asp:CheckBox
ID
=
"chk_DisplayEdit"
Checked='<%# Bind("Display") %>' ToolTip="Untick to remove from options available to user" runat="server" />
</
EditItemTemplate
>
</
telerik:GridTemplateColumn
>
</
Columns
>
</
MasterTableView
>
</
telerik:RadGrid
>
<
telerik:GridTextBoxColumnEditor
runat
=
"server"
ID
=
"ActivityCode_Editor"
>
<
TextBoxStyle
Width
=
"30px"
/>
</
telerik:GridTextBoxColumnEditor
>
<
telerik:GridTextBoxColumnEditor
runat
=
"server"
ID
=
"TextEditor"
>
<
TextBoxStyle
Width
=
"280px"
/>
</
telerik:GridTextBoxColumnEditor
>
<
telerik:GridCheckBoxColumnEditor
runat
=
"server"
ID
=
"CheckBoxEditor"
>
<
CheckBoxStyle
Width
=
"10px"
/>
</
telerik:GridCheckBoxColumnEditor
>
</
telerik:RadAjaxPanel
>
<%-- Data Source, definition for Activity Codes --%>
<
asp:SqlDataSource
ID
=
"ds_ActivityCodes"
runat
=
"server"
ConnectionString="<%$ ConnectionStrings:RAMtrack %>"
ProviderName="<%$ ConnectionStrings:RAMtrack.ProviderName %>"
SelectCommand="Select_Activities"
SelectCommandType="StoredProcedure"
UpdateCommand="Update_Activities"
UpdateCommandType="StoredProcedure"
InsertCommand="Insert_Activities"
InsertCommandType="StoredProcedure"
>
<
SelectParameters
>
<
asp:SessionParameter
DefaultValue
=
"2"
Name
=
"Installation_Id"
SessionField
=
"Installation_Id"
Type
=
"Int64"
/>
</
SelectParameters
>
<
InsertParameters
>
<
asp:SessionParameter
Name
=
"Installation_Id"
SessionField
=
"Installation_Id"
Type
=
"Int64"
/>
<
asp:Parameter
Name
=
"ActivityCode"
Type
=
"String"
/>
<
asp:Parameter
Name
=
"ActivityDescription"
Type
=
"String"
/>
<
asp:Parameter
Name
=
"Display"
Type
=
"Boolean"
/>
</
InsertParameters
>
<
UpdateParameters
>
<
asp:Parameter
Name
=
"ActivityCode"
Type
=
"String"
/>
<
asp:Parameter
Name
=
"ActivityDescription"
Type
=
"String"
/>
<
asp:Parameter
Name
=
"Display"
Type
=
"Boolean"
/>
<
asp:Parameter
Name
=
"Activity_Id"
Type
=
"Int64"
/>
</
UpdateParameters
>
</
asp:SqlDataSource
>
</
asp:Content
>
and here's my code behind (VB):
Imports System
Imports Telerik.Web.UI
Imports System.Collections
Imports System.Web.UI.WebControls
Imports System.Data
Namespace Telerik.GridExamplesVBNET.DataEditing.BatchEditing
Partial Public MustInherit Class ActivityCodesVB
Inherits System.Web.UI.Page
Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
If IsNothing(Session("UserName")) Or IsNothing(Session("UserID")) Then
Response.Redirect("../Login.aspx")
Else
If Session("ChangePassword_b") = "True" Then
Response.Redirect("UserProfile.aspx")
End If
' Define what action puts the cell in edit mode. The choices are:
' 1) "click"
' 2) "dblclick"
' 3) "mousedown"
' 4) "mouseup"
Call EditTrigger("click")
' Hide the New Record button for users that do not have permission
Call EnableEditButtons()
End If
End Sub
Protected Sub RadGrid1_InsertCommand(sender As Object, e As Web.UI.GridCommandEventArgs) Handles RadGrid1.InsertCommand
End Sub
Protected Sub RadGrid1_ItemDataBound(sender As Object, e As Web.UI.GridItemEventArgs) Handles RadGrid1.ItemDataBound
Dim UserHasUpdatePermission_b As Boolean
Dim item As GridDataItem
Dim myCheckBox As CheckBox
' Determine whether the user is able to update or insert data
' (hard-coded boolean value will be swapped later on for a function call)
UserHasUpdatePermission_b = True
If e.Item.ItemType = GridItemType.AlternatingItem Or e.Item.ItemType = GridItemType.Item Then
' Disable fields if users do not have permission to update
item = e.Item
item.Enabled = UserHasUpdatePermission_b
' Add call to client side function to switch the Display checkbox into edit mode
myCheckBox = DirectCast(e.Item.FindControl("chk_Display"), CheckBox)
If Not IsNothing(myCheckBox) Then
If myCheckBox.ID = "chk_Display" Then
myCheckBox.Attributes.Add("onclick", "changeEditor(this);")
End If
End If
End If
End Sub
Protected Sub RadGrid1_BatchEditCommand(sender As Object, e As Telerik.Web.UI.GridBatchEditingEventArgs) Handles RadGrid1.BatchEditCommand
End Sub
Protected Sub RadGrid1_ItemUpdated(source As Object, e As Telerik.Web.UI.GridUpdatedEventArgs) Handles RadGrid1.ItemUpdated
Dim item As GridEditableItem = DirectCast(e.Item, GridEditableItem)
Dim ActivityCode_s As [String] = item("ActivityCode").Text
If e.Exception IsNot Nothing Then
e.KeepInEditMode = True
e.ExceptionHandled = True
NotifyUser("Activity Code " + ActivityCode_s + " cannot be updated. Reason: " + e.Exception.Message)
End If
End Sub
Protected Sub RadGrid1_ItemInserted(source As Object, e As GridInsertedEventArgs) Handles RadGrid1.ItemInserted
If e.Exception IsNot Nothing Then
e.ExceptionHandled = True
NotifyUser("Activity Code cannot be inserted. Reason: " + e.Exception.Message)
End If
End Sub
Private Sub NotifyUser(message As String)
RadWindowManager1.RadAlert(message, 330, 180, "RAMtr@ck Notification", "", "")
End Sub
Protected Sub EditTrigger(Trigger_s As String)
Select Case Trigger_s
Case "click"
RadGrid1.MasterTableView.BatchEditingSettings.OpenEditingEvent = GridBatchEditingEventType.Click
Exit Select
Case "dblclick"
RadGrid1.MasterTableView.BatchEditingSettings.OpenEditingEvent = GridBatchEditingEventType.DblClick
Exit Select
Case "mousedown"
RadGrid1.MasterTableView.BatchEditingSettings.OpenEditingEvent = GridBatchEditingEventType.MouseDown
Exit Select
Case "mouseup"
RadGrid1.MasterTableView.BatchEditingSettings.OpenEditingEvent = GridBatchEditingEventType.MouseUp
Exit Select
End Select
End Sub
Protected Sub EnableEditButtons()
Dim UserHasUpdatePermission_b As Boolean
Dim UserHasInsertPermission_b As Boolean
' Determine whether the user is able to update or insert data
' (hard-coded values will be swapped for a function call)
UserHasUpdatePermission_b = True
UserHasInsertPermission_b = True
' Hide the New Record button for users that do not have permission
RadGrid1.MasterTableView.CommandItemSettings.ShowAddNewRecordButton = UserHasInsertPermission_b
RadGrid1.MasterTableView.CommandItemSettings.ShowCancelChangesButton = UserHasUpdatePermission_b Or UserHasInsertPermission_b
RadGrid1.MasterTableView.CommandItemSettings.ShowSaveChangesButton = UserHasUpdatePermission_b
RadGrid1.MasterTableView.CommandItemSettings.ShowRefreshButton = UserHasUpdatePermission_b
End Sub
Protected Sub RadGrid1_ItemCommand(sender As Object, e As Web.UI.GridCommandEventArgs) Handles RadGrid1.ItemCommand
Dim argument As GridBatchEditingEventArgument
Dim newValues As Hashtable
Dim oldValues As Hashtable
'Dim OldActivityDescriptionValue As String
'Dim NewActivityDescriptionValue As String
argument = TryCast(e.CommandArgument, GridBatchEditingEventArgument)
If Not IsNothing(argument) Then
newValues = argument.NewValues
oldValues = argument.OldValues
'OldActivityDescriptionValue = oldValues("ActivityDescription").ToString()
'NewActivityDescriptionValue = newValues("ActivityDescription").ToString()
If e.CommandName = RadGrid.UpdateCommandName Then
Me.ds_ActivityCodes.UpdateParameters("Display").DefaultValue = newValues("Display")
ElseIf e.CommandName = RadGrid1.PerformInsertCommandName Then
Me.ds_ActivityCodes.InsertParameters("Display").DefaultValue = newValues("Display")
End If
End If
End Sub
End Class
End Namespace
It all seems to work fine.
Geoff
I tried your sample, however im just wondering how come it didnt appear when the row was not in edit mode, the checkbox will only appear when the row is in edit mode?
How to make it appear on both edit and view mode?
Thanks.
In the code for the page, the checkbox control is defined twice within a GridTemplateColumn, once for the view mode and once for the edit mode. The first occurrence is within the <ItemTemplate> tags and the control ID is "chk_Display". The Second is within the <EditItemTemplate> tags and is called "chk_DisplayEdit".
Is this what you wanted? Hope this helps.
Regards
Geoff
I'm experiencing the same behavior with 2014.2.724.45. In which version is this bug resolved?
Thanks
If you are referring to the initial issue, that you can not click directly on the checkbox for initiating the editing, this is browsers limitation related to the disabled elements and the fact that the click event will not fire for those elements. Since this is a browser limitation and having in mind how the GridCheckBoxColumn is implemented, the only possible workaround is the one suggested in my first reply on this tread. Please try the attached solution and see if the result will meet your requirement.
Best Regards,
Konstantin Dikov
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.
function btnSave_OnClientClick() {
if (hasPendingChanges() == true) {
if (Page_ClientValidate('SaveMappings') == true) {
var grid = aramark.vcs.controls.gridvendorcustomers();
grid.get_batchEditingManager().saveChanges(grid.get_masterTableView());
}
return false;
} else {
$('#alert-dialog').modal('show');
}
}
We have managed to fix the issue by calling your internal api batchManager._tryCloseEdits(document) as follows:
function changeEditor(sender, args) {
var grid = aramark.vcs.controls.gridvendorcustomers();
var batchManager = grid.get_batchEditingManager();
batchManager.openCellForEdit(sender.parentElement.parentElement);
sender.checked = !sender.checked;
setTimeout(function () {
batchManager._tryCloseEdits(document);
}, 500);
}
Is there a better solution? Please cc: shaw-james@aramark.com (if possible) with your answer.
Thanks,
James
The workaround that you have found is good enough and I could only suggest that you remove the specified time in the setTimeout function, because leaving it empty will add the execution of the content at the end of the stack, which should do the trick.
You could also try to put the setTimeout function within the OnClientClick event handler, which will be called only once, when the user needs to save the changes.
Best Regards,
Konstantin Dikov
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.
I was trying to disable the filters in the filter row to prevent users from losing their changes while pending changes exists. I understand there's a solution for that by handling "OnUserAction" or "OnCommand" events, however this solution only cancels the command and does not provide a visual indication to the user.
Anyway I wanted to bring up that while debugging "batchManager._tryCloseEdits(document)" I noticed that "OnBatchEditClosed" event gets fired more than once even though I changed only one cell. In fact the number of times that it gets fired is superior than the number of rows in the grid.
I've seen other forum solutions where is being used as follows batchManager._tryCloseEdits(grid.get_masterTableView()) or passing other elements. I've tried these and the result is still the same.
Can you explain what batchManager._tryCloseEdits() does internally?
Provided "BatchEditingSettings EditType="Cell" shouldn't be firing the event only once per modified cell?
Many thanks,
James
I have tested the scenario that you are describing, but the OnBatchEditClosed event is not firing at all on my end. Below is the example that I have tested locally:
<
telerik:RadCodeBlock
ID
=
"RadCodeBlock1"
runat
=
"server"
>
<
script
type
=
"text/javascript"
>
var count = 0;
function editClosed(sender, args) {
console.log(count++);
}
function closeEdits(sender, args) {
var grid = $find("RadGrid1");
var tableView = grid.get_masterTableView();
var batch = grid.get_batchEditingManager();
batch.hasChanges(tableView);
batch._tryCloseEdits(tableView);
}
</
script
>
</
telerik:RadCodeBlock
>
<
telerik:RadGrid
ID
=
"RadGrid1"
runat
=
"server"
OnNeedDataSource
=
"RadGrid1_NeedDataSource"
>
<
MasterTableView
CommandItemDisplay
=
"Top"
EditMode
=
"Batch"
>
</
MasterTableView
>
<
ClientSettings
>
<
ClientEvents
OnBatchEditClosed
=
"editClosed"
/>
</
ClientSettings
>
</
telerik:RadGrid
>
<
telerik:RadButton
runat
=
"server"
ID
=
"RadButton1"
AutoPostBack
=
"false"
OnClientClicked
=
"closeEdits"
></
telerik:RadButton
>
Can you please open a regular support ticket and provide a sample, runnable project that replicates the issue, so we can test it locally and isolate the root of the problem.
Best Regards,
Konstantin Dikov
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.
Thanks Konstantin!!!
Hi Konstantin,
I tried your example:
function changeEditor(sender, args) {
var grid = $find("<%=dgMain.ClientID%>");
var batchManager = grid.get_batchEditingManager();
grid.get_batchEditingManager().openCellForEdit(sender.parentElement.parentElement);
sender.checked = !sender.checked;
}
Grid column whith checkbox:
<telerik:GridTemplateColumn Groupable="false" CurrentFilterFunction="NoFilter" FilterListOptions="VaryByDataType"
ForceExtractValue="None" HeaderText="Monday" UniqueName="colMonday"
Visible="true" AllowFiltering="false" ItemStyle-HorizontalAlign="center">
<HeaderStyle Width="50px" />
<ItemStyle Width="50px" />
<ItemTemplate>
<input id="chkMonday" type="checkbox" checked='<%# Eval("Monday") %>' onclick="changeEditor(this);" />
</ItemTemplate>
<EditItemTemplate>
<asp:CheckBox ID="chkMondayEdit" runat="server" Checked='<%# Bind("Monday") %>' />
</EditItemTemplate>
</telerik:GridTemplateColumn>
the user creates a new line and checks the checkbox and click outside the grid.
The problem is: the Item mode does not display the check!! Instead it displays 'TRUE' ! !
How I do correct this behavior?
In Edit mode, it shows correctly the checkbox .
Thanks.
Marta
Can you please elaborate bit more on the exact functionality you need to achieve and the exact scenario you are implementing? Thus we will be able to revise your case locally and provide the bets option for it.
Regards,
Maria Ilieva
Telerik
Hi Maria Ilieva,
Ok, I will try myself to explain better.
I have a grid Batch with the buttons of Save and Cancel out of the grid. It cost me, but I obtained it. I hope that my code helps other persons.
But my question is on the checkbox:
Summarizing, when the grid has loaded information from of server, the checkbox behave well. The problem is when I create a new line (image 1), I refill information (image 2), click out of the grid (image 3), is when instead of rendering a checkbox it shows the word TRUE. The word TRUE should be a checkbox (obviously). I need to correct this behavior.
Try the appraoch below
JavaScript:
function
rowCreated(sedner,args) {
if
(args.get_id().indexOf(
"-"
) != -1) {
var
cell = args.get_item().get_cell(
"ColumnName"
);
var
element = document.createElement(
"input"
);
element.setAttribute(
"type"
,
"checkbox"
);
cell.appendChild(element);
}
}
JavaScript:
function
rowCreated(sedner,args) {
if
(args.get_id().indexOf(
"-"
) != -1) {
var
cell = args.get_item().get_cell(
"ColumnName"
);
var
element = document.createElement(
"input"
);
element.setAttribute(
"type"
,
"checkbox"
);
element.setAttribute(
"onclick"
,
"openCellForEdit(this)"
);
cell.appendChild(element);
}
}
function
openCellForEdit(sender) {
var
cell = Telerik.Web.UI.Grid.GetFirstParentByTagName(sender,
"td"
),
grid = $find(
'<%=RadGrid1.ClientID%>'
),
manager = grid.get_batchEditingManager();
manager.openCellForEdit(cell);
}
By following the above suggested approach you should be able to make things work.
Regards,
Maria Ilieva
Telerik
Hi Maria Ilieva,
thanks,it works on Add mode and Edit mode.
But now I have another problem. When I click on the Save button , I cannot get the values from the dgMain_BatchEditCommand event from the codebehind (in the case of Add mode).
My final code is this one:
<script type="text/javascript">
function rowCreated(sender, args) {
if (args.get_id().indexOf("-") != -1) {
var cell = args.get_item().get_cell("colActive");
var element = document.createElement("input");
element.setAttribute("type", "checkbox");
element.setAttribute("onclick", "openCellForEdit(this)");
cell.appendChild(element);
}
}
function openCellForEdit(sender) {
var cell = Telerik.Web.UI.Grid.GetFirstParentByTagName(sender, "td"),
grid = $find('<%=RadGrid1.ClientID%>'),
manager = grid.get_batchEditingManager();
manager.openCellForEdit(cell);
}
function addRecord() {
var grid = $find("<%=RadGrid1.ClientID%>");
var tableView = grid.get_masterTableView();
var batchManager = grid.get_batchEditingManager();
batchManager.addNewRecord(tableView);
return false;
}
function saveChanges(sender, args) {
var grid = $find('<%=RadGrid1.ClientID%>');
grid.get_batchEditingManager().saveChanges(grid.get_masterTableView());
return false;
}
function cancelChanges(sender, args) {
var grid = $find('<%=RadGrid1.ClientID%>');
grid.get_batchEditingManager().cancelChanges(grid.get_masterTableView());
return false;
}
function changeEditor(sender, args) {
var grid = $find("<%=RadGrid1.ClientID%>");
var batchManager = grid.get_batchEditingManager();
grid.get_batchEditingManager().openCellForEdit(sender.parentElement.parentElement);
sender.checked = !sender.checked;
}
</script>
<telerik:RadGrid ID="RadGrid1" runat="server" Width="100%" Height="470px" AutoGenerateColumns="false"
GridLines="None" AllowSorting="true" AllowPaging="true" PageSize="7" ShowGroupPanel="false"
AllowMultiRowSelection="false" OnItemDataBound="RadGrid1_ItemDataBound" ShowHeader="true"
OnNeedDataSource="RadGrid1_NeedDataSource" AllowAutomaticInserts="true" AllowAutomaticUpdates="True"
AllowAutomaticDeletes="True" OnBatchEditCommand="RadGrid1_BatchEditCommand">
<ClientSettings>
<Scrolling AllowScroll="true" UseStaticHeaders="true" />
<ClientEvents OnRowCreated="rowCreated" />
</ClientSettings>
bla bla bla
<telerik:GridTemplateColumn Groupable="false" CurrentFilterFunction="NoFilter" FilterListOptions="VaryByDataType"
ForceExtractValue="None" HeaderText="Active" UniqueName="colActive"
Visible="true" AllowFiltering="false" ItemStyle-HorizontalAlign="center">
<HeaderStyle Width="50px" />
<ItemStyle Width="50px" />
<ItemTemplate>
<asp:CheckBox ID="chkActive" runat="server" Checked='<%# (Eval("Active"))%>' />
</ItemTemplate>
</telerik:GridTemplateColumn>
bla bla bla
<telerik:GridButtonColumn ButtonCssClass="btn DeleteButtonGrid" HeaderStyle-Width="70px"
CommandName="Delete" Text='Delete'
UniqueName="DeleteColumn" ButtonType="LinkButton">
</telerik:GridButtonColumn>
</Columns>
</MasterTableView>
</telerik:RadGrid>
And the button outside the grid:
<asp:LinkButton ID="btnAdd" runat="server" OnClientClick="return addRecord();">New product</asp:LinkButton>
<asp:LinkButton ID="btnSave" runat="server" OnClientClick="return saveChanges();">Save</asp:LinkButton>
<asp:LinkButton ID="btnCancel" runat="server" OnClientClick="return cancelChanges();">Cancel</asp:LinkButton>
In the codebehind:
protected void dgMain_BatchEditCommand(object sender, GridBatchEditingEventArgs e)
{
bool active = Convert.ToBoolean(newValues["colActive"]); -----------> doesn't work
The problem is that newValues["colActive"] is null.
So can you help me to achieve this?
Regards.
Marta Gómez
I would suggest you to see the forum thread below and test the project provided in it.
http://www.telerik.com/forums/how-to-save-results-of-batch-editing-all-rows-all-cells
Regards,
Maria Ilieva
Telerik
Hi Maria Ilieva,
And here you go. It looks like you spend a lot of time answering my question.
Even thow, I checked your link and it did not help at all.
Good job! (ironic mode).
Regards,
Marta Gómez
After examining your last code snippet I have noticed that there is no EditItemTemplate for the template column, so there is no editing for that column, which is whey there are no values on server-side. Please include the EditItemTemplate as per the initial example and let me know if the issue will be resolved.
Best Regards,
Konstantin Dikov
Telerik
Marta,
I'm new to batch grid, but I have the same checkbox issue, which I posted at the end of this thread, but no response yet...
http://www.telerik.com/forums/batch-grid-add-new-row-create-template-column-elements
While trying to solve it on my own, I came across your thread. I tried the rowCreated code (modified for my grid), but like you, it didn't quite work. This is what I found (take with grain of salt as I'm muddling through) but cell.appendChild(element) looked problematic. So after it ran, I looked at the cell's innerHTML value to see this...
"<div> </div><input onclick="changeCheckbox(this)" type="checkbox">"
That seemed wrong, as I thought the checkbox should be inside the div. I verified that by checking a pre-existing row at grd.get_masterTableView().get_dataItems()[0].get_cell("PrintOnPurchaseOrder").innerHTML and it showed this...
"<div><input id="chkPrintRead" onclick="changeCheckbox(this);" type="checkbox" checked="True"></div>"
So now I'm hard-coding my new cell.innerHTML to that value. I don't like hardcoding (especially innerHTML) and I'm guessing there's a more elegant way to create and set an element within these div tags, but it seems to work. Like I said, I'm new to this, so sorry if it takes you down the wrong road (or causes other problems), but maybe I'll get a different response in my thread for that piece and/or this will trigger a better option for the Telerik admins.
Will the issue described in the original post ever get fixed? It came as a nasty surprise when I made my first attempt at implementing the RadGrid (2017.1) yesterday and caused a lot of head scratching until i found this thread.
Is this issue really unsolvable to you guys at Telerik?
I know there is a workaround, but it does seem a bit convoluted and definitely makes the appeal of the RadGrid wear off. The more workarounds I need to add, the less sense it makes to me to add third party dependencies.
If it really is an unsolvable problem, then could you please add an caveat emptor in the official documentation so other customers don't have to waste time?
A HowTo example for handling the checkboxes in Batch Edit mode is already included in our documentation:
As for a built-in solution, the disabled INPUT elements will not fire the click event, which prevents us for including such solution internally. There are some solutions that will require enabled input element styled as disabled, but this will be a huge breaking change for the GridCheckBoxColumn and its rendering, which is something that we always try to avoid.
Regards,
Konstantin Dikov
Telerik by Progress
Konstantin,
Thanks so much for your zip file example earlier. It differs greatly from the HowTo (http://docs.telerik.com/devtools/aspnet-ajax/controls/grid/data-editing/edit-mode/batch-editing/how-to/editing-checkboxes) in that it actually works!
I think it would be worthwhile to replace the HowTo code sample with yours. Thanks.
Thank you for bringing our attention to the issue that you have faced with the Code Library. We will revise the code in the Code Library and will test it with our latest versions to see if we need to modify it.
Best Regards,
Konstantin Dikov
Telerik by Progress
Wow ... 2018 and the amount of code required to just have a single click editable checkbox in a grid, this is progress? ... no pun intended. There really is no better way?
I used the same code and modified for my application, but it seems that I can't do any "code behind" in response to the changed state of the CheckBox value? Suggestions?
Cheers, Rob.
To follow up, after using Konstantin's code sample which sorta works by has some major drawbacks:
1. Only works with asp:CheckBox (so any Skin usage is ignored making the checkbox really stand out add ODD relative to look and feel.
2. Leaves an ugly dotted box around the checkbox which I assume is the "cell"
3. If uncheck the checkbox and move OFF the cell it triggers what looks like a validation error flag (red triangle in left corner)
4. I can't use code behind events like OnCheckedChanged so I stuck with only what I can do in JavaScript.
I appreciate the code sample, but we're (my clients/users) are still left with something that does NOT look good and below par relative to other websites (especially my competitor web sites).
Is there any other way I accomplish what seems to me to be the most simple and basic of task:
A. A grid with an editable Checkbox bound to a datasource that can work with code behind events?
To be blunt, we're evaluating INFRAGISTICS Ultimate UI for ASP.NET with AJAX ... that's just how frustrated we are with Telerik.
Cheers, Rob.
I have not used Telerik for a long time, I'm sorry, I can not help you.
I do not remember how I solved it, I'm sorry. I tried a lot of javascript, and I did not get anything. In the end I think it worked modifying styles and also javascript, but I do not remember, today I no longer work in that company.
Good luck!
Cheers, Marta.
The short answer is - you can find an example of single click checkbox editing in the following article: https://docs.telerik.com/devtools/aspnet-ajax/controls/grid/data-editing/edit-mode/batch-editing/how-to/editing-checkboxes.
@Rob: batch editing operates on the client so if the checkbox did a postback so you can get a server event, the user input would be lost: https://docs.telerik.com/devtools/aspnet-ajax/controls/grid/data-editing/edit-mode/batch-editing/server-side-api. If you want to use server events, I'd suggest going with the default InPlace editing mode: https://docs.telerik.com/devtools/aspnet-ajax/controls/grid/data-editing/edit-mode/in-place. You can put a checkbox in a template column as if it were a regular gridview and handle its server event and <%#Bind()%> its Checked value. You can find one example, let's say, here: https://stackoverflow.com/questions/7432355/checkbox-in-radgrid-and-sending-data-to-database?rq=1.
@Marta - thank you for keeping an eye on the discussion, input from our customers is always welcome.
Regards,
Marin Bratanov
Progress Telerik